Convert your site into a simple progressive web app

Mon, Jan 13, 2020 ❝Converting your site into a web-app that includes an "Add to homescreen" link.❞

Contents

You can convert any website into a basic web app installable on mobile phones, with the following steps. You can then incrementally enhance the installed “web app” experience by adding further capabilities like preloaded and off-line content. In this article we’ll just prepare for the basic initial set-up.

There are three steps involved:

1. Add a manifest, which is most easily adopted from the basic example at “Your first Progress Web App”.
2. Add icon files. Ensure that the references in the manifest are valid.
3. Add the <link rel="manifest" href="/manifest.webmanifest"> entry in the website’s HEAD-section. The href URL must refer to the manifest created in the previous step.

Now upload everything. Once the changes are in position, visit the website with a mobile phone and observe that a “house icon with + sign” appears in the address bar. That’s it.

From here on, one can further enhance the Progressive Web App experience as desirable and suitable for the website.