What are Progressive Web Apps?

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.

What is a PWA?

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.

When should I consider configuring my website as a PWA?

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:

• An event calendar
• A reference guide that users would want to access on the go
• A custom calculator that users might need to access on a regular basis

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.

Requirements

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:

• The web app is not already installed
• The user needs to have clicked or tapped on the page at least once
• The user needs to have spent a minimum of 30 seconds viewing the page
• It must be served over HTTPS
• It must include a web app manifest with the following:
  • short_name or name
  • icons - must include a 192px and a 512px icon
  • start_url
  • display - must be one of fullscreen, standalone, or minimal-ui
  • prefer_related_applications must not be present, or be false

Quick setup

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.

1. Visit realfavicongenerator.net and upload an image of your chosen icon with a transparent background.
2. Once the image has been uploaded, fill out the settings to best match how you would like your app to be displayed across various devices and press the “Generate your Favicons and HTML code” button.
3. Download your files using the “Favicon package” button.
4. Make any necessary adjustments to the site.webmanifest file, checking to make sure that all PWA required values are present and adding or modifying any values that you may need.
   • Make sure to check that the display property is set to the most appropriate value for your use case, as that is what determines how much of the browser UI is hidden while using the PWA.
   • For more information on the properties that can be set in a web manifest, check out this resource on the topic.
5. Follow the instructions on the download page to link your icons and manifest to 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.

Next steps

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.