How To Use PWA (Progressive Web Apps) With Avada

Last Update: May 21, 2024

The Progressive Web App (PWA) is one of the performance based features provides caching strategies to the Avada experience, and also allows your users to install your website as an app, for deeper user engagement. Read on to find out more about how to implement and use this exciting new tool.

Installing and Enabling Progressive Web App

To enable the Progressive Web App, you first have to install the PWA plugin. To do this, head to Avada > Plugins / Add-ons, and install and activate the PWA plugin. This is a one click process.

Once the plugin has been installed and activated, you can enable PWA and set your options. To do this, head over to Avada > Options > Performance > Progressive Web App. At the bottom you will see the Progressive Web App section, and the Enable Progressive Web App option is the first one. By default, this option is turned off. Select On, and save your theme options to enable the Progressive Web App.

Avada Plugins - PWA plugin

Caching Options

Once you have installed and enabled the Progressive Web App, you can choose your preferred caching strategy for each of the file types – Images, Scripts, Styles & Fonts. For specific details of each strategy, please see this Google Document, but basically, the strategies can be summarized like this:

  • Cache-First strategy file types – File types added in this list will be cached in the browser. Subsequent page requests will use the cached assets. Use this for static assets that don’t change like images and fonts.

  • Network-First strategy file types – File types added in this list will be cached in the browser. Subsequent page requests will first try to get a more recent version of these files from the network, and fallback to the cached files in case the network is unreachable. If your site’s content gets updated often we recommend you can use this for your content.

  • Stale-While-Revalidating strategy file types – Any file types added here will be served with a cache-first strategy, and after the page has been loaded the caches will be updated with more recent versions of the selected file types from the network. Use this for assets that may get updated but having their latest version is not critical.

PWA File Types

App Options

With PWA, it’s also possible for the user to add your website as an app. It must be noted, that this is a developing technology, and the implementation for this feature is different across platforms and browsers. With Android and Chrome, for example, the user will get a prompt to install the site as an app, but on iOS, the feature only works on Safari, and there is no prompt. Users have to choose the Share option and select ‘Add to Home Screen’.

The last three options allow you to choose a splash screen logo, select the App Display mode, and the App theme color. Again, implementation of these options are mixed. On iOS for example, fullscreen and minimal-ui won’t work (fullscreen will trigger stand alone, and minimal-ui will be just a shortcut to Safari), nor will the color options.

  • Splash Screen Logo – a 512 x 512px image that is used when prompting users to install the website as an app, and also in the splash screen that shows when they launch the app. The logo image must be in PNG format.

  • App Display Mode – If the user installs your site as an app, here you can select how the app will behave. Choose from Fullscreen, Stand Alone, Minimal UI, or Browser.

    For more information about these options please refer to this document.

  • App Theme Color – This allows you to select a color that will be used for the header of your app, as well as the browser toolbar-color on mobile devices.

Clearing Persistent Cache

Service-worker caches are very persistent, so if you have the PWA plugin enabled, and you are debugging a website, you may want to reset caches from a separate tab in Chrome.

Clearing Service Worker Cache

Filters

Copy to Clipboard

File: Avada/include/class-avada-pwa.php

Description: Used to add new filetypes or to edit existing filetypes that can be used in Avada's PWA

Default Value: Array of arrays with the parent level incides of images, fonts, scripts, styles, which hold the properties of these filetypes.

Examples

Adding a new file-type

This will add the rules we want, and also make “PDF” available in the list of options we can choose from.

Copy to Clipboard

Change properties for existing file-types

Copy to Clipboard

Resources

In this article