With most people now accessing the internet through a mobile device, having a mobile app for your business can be very valuable. However, traditionally this required an entirely separate codebase from your website which could be both costly and difficult to maintain. This is where Progressive web apps (PWA) come in.
A progressive web app is an app created with the same technologies as a traditional website. In fact, in many cases existing websites can be configured to behave as PWAs. When configured properly, a PWA will allow visitors to install the app onto their device. The result will have a custom app icon and can optionally hide the browser controls, offering a very similar experience to a native app.
If your website offers a tool or content that a user might want to access from their mobile device on a regular basis, it might be a good candidate to configure as a progressive web app.
Some examples might include:
Although it is possible to set up a traditional website homepage as a PWA, it might not offer the same level of value to users.
The minimum requirements to set up a website as a PWA are actually very simple. Different browsers have slightly different specifications, but Chrome's PWA installation criteria include the following:
The process for this is simple:
short_name
name
icons
start_url
display
fullscreen
standalone
minimal-ui
prefer_related_applications
The fastest way to configure a webpage as a PWA is to use a free tool that will generate the files you need for you. An option like realfavicongenerator.net will accept a transparent image of your chosen icon and generate the resized icon files and webmanifest to your specifications, providing detailed instructions as to how they should be implemented on your webpage.
Once these steps have been completed, as long as your web app meets the other requirements outlined above it will show up as an installable PWA.
Although not strictly required, if your PWA has functionality that users should be able to access offline it may be a good idea to implement service workers. These effectively act as a proxy between the web app and the network, allowing for more custom handling of behavior when an internet connection is not available. To learn more about service workers, check out the service worker documentation.
A free tool that can be used to generate PWA icons and web manifests
An article outlining Chrome's requirements for PWAs
An article that explains the properties that can be defined in a web manifest
Documentation on service workers