PWAs load instantly, respond quickly to user interactions, and feel like a natural app. They do not need an app store for installation and enable users to re-enter the site instantly, even when a device is offline.
To activate PWA feature:
- In the left panel, click SEO & Settings, and then click Progressive Web App (PWA).
- Click the Activate Progressive Web App toggle.
- (Optional) Click the Serve pages markup from cache first toggle. This setting changes our service worker caching strategy (for runtime sites); instead of checking in the network first, it will get the page first from cache (as long as it is not republished). Cache first (toggle on) can be best if you know the site and its assets are not going to change much, as it will quickly load the cached information and more easily be available to customers offline. Using network first (having that toggle off) is best when the data must be as fresh as possible.
- (Optional) Click the Enable mobile browsers to prompt to install the site as an app. When this is toggled on, you can configure the following settings:
- Name. This is the name displayed on the splash screen and the “Add to homescreen message.” It can be up to 60 characters long.
- Short Name. This is the name used when there is not enough space to display the full name; for example, on the mobile homescreen. This name can be up to 60 characters, but we suggest that you make it as short as you can.
- Icon. This is the icon that appears on the mobile homescreen and the splash screen when the app is loading. It must be at least 192 pixels width and in .png format.
- Splash screen background color. This is the color that appears while the site is loading.
When a user accesses a site enabled with PWA from their mobile device, they will see an Add to Home screen button displayed below the site. Once added to the home screen, the icon will be displayed on their device for quick access to the site (similar to an app).
The user can now re-enter the site using this icon, even if the device is offline.