How To Use PWA (Progressive Web Apps)
A Progressive Web App (PWA) is a website that browsers can treat a little like an app: it keeps files on the visitor’s device so repeat visits load faster, and visitors can add it to their home screen with its own icon and color.
Tirenoa does not do this alone. It provides the options and passes them to a separate plugin, the PWA plugin from the WordPress plugin directory. This guide explains the requirements and each option in the Progressive Web App group of Tirenoa › Options › Performance.
In this article: What You Need · Switch It On · File Caching In The Browser · How The Installed App Looks · Good To Know · Related
What You Need
- The PWA plugin, installed and active. Until it is, the Progressive Web App group shows only a notice with a link to Tirenoa › Plugins, and no options.
- A site that runs on HTTPS. On a site without it, a second notice tells you so; browsers do not allow the feature on unencrypted sites.
The PWA plugin is free and is not made by Tiaro. Ask Tiaro before installing it on a site Tiaro maintains for you.
Switch It On
- Install and activate the PWA plugin.
- Open Tirenoa › Options › Performance and scroll to Progressive Web App. Reload the options once if the notice is still shown.
- Turn on Enable Progressive Web App. The remaining options appear.
- Upload an App Splash Screen Logo: a square PNG of 512 x 512 px.
- Choose the App Display Mode and the App Theme Color, then save.
File Caching In The Browser
Three options decide how the visitor’s browser stores your files. Each holds a list of file types; the available types are Images, Fonts, Scripts and Styles.
| Option | Behavior | Use it for |
|---|---|---|
| Cache-First strategy file types | The stored copy is used. The network is only asked when there is no copy. | Files that rarely change. By default all four types are in this list. |
| Network-First strategy file types | The browser asks the server first and falls back to the stored copy when the network is unreachable. | Files that change often |
| Stale-While-Revalidating strategy file types | The stored copy is used at once, and a fresh copy is fetched in the background for the next visit. | Files that change now and then, where the newest version is not critical |
Put each file type in one list only. If a type is in more than one, Cache-First wins, then Stale-While-Revalidating. For each type, the browser keeps up to 60 files for up to a month.
Note: Tirenoa stores files, not pages. The text of your pages is always fetched from the server, so these options do not make the site readable without an internet connection.
How The Installed App Looks
- App Splash Screen Logo is used as the app icon. If the site has no WordPress site icon, it is used for that as well.
- App Display Mode: Fullscreen hides all browser controls, Standalone looks like a separate app, Minimal UI (the default) keeps a small set of browser controls, Browser opens the site in a normal browser tab.
- App Theme Color colors the app’s header and the browser toolbar on phones.
- The background color shown while the app starts is the page background color from Global Options.
Good To Know
- With Cache-First, returning visitors can keep an old script or stylesheet until the stored copy expires. If visitors report an outdated look after a redesign, move Scripts and Styles to the Stale-While-Revalidating list.
- To switch the feature off, turn off Enable Progressive Web App and save. Deactivate the PWA plugin as well if nothing else on the site uses it.