How To Use PWA (Progressive Web Apps) With AvadaThe Progressive Web App (PWA) is one of the performance based features, added back in Avada 5.8. This provides new 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 AppIMPORTANT NOTE: To use the Avada Progressive Web App feature, your site must use HTTPS. Also, this is a quickly developing technology, and implementation of some features will vary across platforms and browsers.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.
Caching OptionsOnce 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.
App OptionsWith 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 CacheService-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.
FiltersCopy to Clipboardavada_pwa_filetypes avada_pwa_filetypesFile: 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.ExamplesAdding a new file-typeThis will add the rules we want, and also make 「PDF」 available in the list of options we can choose from.
Copy to Clipboardadd_filter(
'avada_pwa_filetypes',
/**
* Filter filetypes definitions and adjust their properties.
*
* @param array $filetypes The definitions for the service-worker caches.
* @return array The adjusted filetypes.
*/
function( $filetypes ) {
// Add PDF caching as a new file-type.
$filetypes['pdf'] = array(
'label' => esc_html__( 'PDF', 'Avada' ),
'rule' => '^https://.*.(?:pdf)(?.*)?$',
'args' => array(
'cacheName' => 'fusion_documents',
'plugins' => array(
'expiration' => array(
// Cache 20 files.
'maxEntries' => 20,
// Cache for 1 day (value is in seconds).
'maxAgeSeconds' => 60 * 60 * 24,
// Purge cache when browser quota is reached.
'purgeOnQuotaError' => true,
),
),
),
);
return $filetypes;
}
);x 1add_filter(2 'avada_pwa_filetypes',3 /**4 * Filter filetypes definitions and adjust their properties.5 *6 * @param array $filetypes The definitions for the service-worker caches.7 * @return array The adjusted filetypes.8 */9 function( $filetypes ) {1011 // Add PDF caching as a new file-type.12 $filetypes['pdf'] = array(13 'label' => esc_html__( 'PDF', 'Avada' ),14 'rule' => '^https://.*.(?:pdf)(?.*)?$',15 'args' => array(16 'cacheName' => 'fusion_documents',17 'plugins' => array(18 'expiration' => array(1920 // Cache 20 files.21 'maxEntries' => 20,2223 // Cache for 1 day (value is in seconds).24 'maxAgeSeconds' => 60 * 60 * 24,2526 // Purge cache when browser quota is reached.27 'purgeOnQuotaError' => true,28 ),29 ),30 ),31 );3233 return $filetypes;34 }35);Change properties for existing file-typesCopy to Clipboardadd_filter(
'avada_pwa_filetypes',
/**
* Filter filetypes definitions and adjust their properties.
*
* @param array $filetypes The definitions for the service-worker caches.
* @return array The adjusted filetypes.
*/
function( $filetypes ) {
// Filter the Regex used for images.
$filetypes['images']['rule'] = '^https://.*.(?:png|gif|jpg|jpeg|svg|webp)(?.*)?$';
// Filter how many files will be cached for fonts.
$filetypes['fonts']['args']['plugins']['expiration']['maxEntries'] = 60;
// Filter expiration of caches for scripts & styles.
$filetypes['scripts']['args']['plugins']['expiration']['maxAgeSeconds'] = MONTH_IN_SECONDS;
$filetypes['styles']['args']['plugins']['expiration']['maxAgeSeconds'] = MONTH_IN_SECONDS;
return $filetypes;
}
);23 1add_filter(2 'avada_pwa_filetypes',3 /**4 * Filter filetypes definitions and adjust their properties.5 *6 * @param array $filetypes The definitions for the service-worker caches.7 * @return array The adjusted filetypes.8 */9 function( $filetypes ) {1011 // Filter the Regex used for images.12 $filetypes['images']['rule'] = '^https://.*.(?:png|gif|jpg|jpeg|svg|webp)(?.*)?$';1314 // Filter how many files will be cached for fonts.15 $filetypes['fonts']['args']['plugins']['expiration']['maxEntries'] = 60;1617 // Filter expiration of caches for scripts & styles.18 $filetypes['scripts']['args']['plugins']['expiration']['maxAgeSeconds'] = MONTH_IN_SECONDS;19 $filetypes['styles']['args']['plugins']['expiration']['maxAgeSeconds'] = MONTH_IN_SECONDS;2021 return $filetypes;22 }23);ResourcesThe PWA plugin on wordpress.org
More about Progressive Web Apps (PWA) from Google
Development of this plugin on GitHub
