Toggle menu

Progressive Web App (PWA)

You can set up a subsite to deliver its content as an installable PWA on mobile and tablet devices.

PWA functionality has been enabled on this site. Visit https://docs.gossinteractive.com on your mobile to see it working.

What is a PWA?

PWAs combine the integrated feel of native apps with the universality and capability of web apps. There's a good introduction to PWAs in the Mozilla developer documentation: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction (opens new window)

How Does the PWA Behave?

This first release of the PWA framework meets the minimum requirements for turning a website into an installable app (we'll be adding more in the future). Some of these requirements are:

  • The site must reference and publish a web app manifest which specifies:
    • The name the app should have when installed
    • The icon it should use
    • The colour to use in OS toolbars
    • It's starting URL when opened
  • A service worker which caches enough data to access the app when the device is offline

When a user visits a PWA enabled subsite, the site will behave exactly as it did before. The PWA features are only relevant once the app has been installed.

Installing the PWA

The way in which a PWA is installed will depend upon the mobile operating system and browser that's being used. Most devices will prompt you to add the site to your home screen:

PWA Add to Home Screen
 

PWA Install
 

iOS devices using Safari can install the app by choosing "Add to home screen" from the action/share icon.

Android devices using Chrome can install the app by opening the Chrome browser menu and choosing (depending on the version of Chrome) "Add to Home screen" or "Install".

Using the PWA

Once installed the PWA will appear on the device home screen or app menu, using the name and icon set in your subsite configuration.

PWA Home Icon
 

Launching the app opens your subsite homepage. It appears like a native app, with no address bar or browser menu.

PWA Site
 

Offline Behaviour

Pages that a user has visited are cached. That means that if their device has no internet connection they can still view pages they have accessed before.

You can set up an offline warning message in your subsite configuration. Any links to pages that are not cached are redirected to an offline warning page.

PWA Offline Warning
 

Configuration

Any of your subsites can be set up to behave as a PWA. With framework 17 you'll find a new section in the "Miscellaneous" settings in the subsite configuration.

Note that updating the configuration will take time to proliferate through to the devices the PWA is installed on. From our understanding, devices using Chrome will recheck the published manifest periodically, whereas some Apple devices might never reread the manifest once the PWA has been installed. Unfortunately this behaviour is outside of our control and will depend upon the device/browser.

SettingDescription
Make this subsite into a PWA?Check this box to enable the PWA behaviour
NameThe name of the site when it is installed as an application. This will appear beneath the app icon
Short nameThis will override the Name if set
Large/Medium/Small iconsThe touch icon your app will use. You can use the same icon for all three, but we recommend picking icons close to the sizes outlined in the guidance text so they aren't distorted and any text is legible.

Note that on Apple devices, the "Apple touch icon" set in the "Look and Feel" section will take priority over the icons set here
Theme colourEnter a hex colour code (eg #3498db). This will be used by the browser address bar
Background colourEnter a hex colour code. This sets the background colour of the splash screen when the app is launched
Offline warningThe offline warning message will appear when a user is viewing cached pages while offline. Following a link to a page that hasn't been cached will redirect the user to the offline warning page
Last modified on 25 January 2023

Share this page

Facebook icon Twitter icon email icon

Print

print icon