New plugin

We have published a new plugin for PWA Optimization. It is advised to use the new plugin for access to the latest technologies and long term support.

Install new plugin

Google has been promoting Progressive Web Apps (PWA) as the future of the internet: a combination of the flexability and openness of the existing web with the user experience advantages of native mobile apps. In essence: a mobile app that can be indexed by Google and that can be managed by WordPress.

Google provides an extensive test called Lighthouse that tests for validity against the key qualities of a Progressive Web App: performance, accessibility, and more.

This tool enables to score 100 / 100 / 100 / 100 in the lighthouse test and validate a website as Progressive Web App for improved mobile user experiences and findability.

At the core of the features of a Progressive Web App is a HTML5 Service Worker. It's not supported by Internet Explorer and Opera (browser compatibility).

Enable PWA	/> Enabled Enable PWA functionality in browsers that support Service Worker. /> Register Service Worker Unchecking this option enables to combine the PWA Service Worker with other service workers, for example for Push Notifications. If you want to load the PWA Service Worker using `importScripts` use the file /. /> Unregister Service Worker Unregister the PWA Service Worker for visitors.
	Service Worker Scope Enter an optional scope for the service worker, e.g. `/blog/`. The scope restricts the PWA functionality to a path.
	Push Notification API The PWA Service Worker supports sending Push Notifications (documentation). The API is `Abtf.push(title,options)` (show example) /* You must first obtain permissions */ Notification.requestPermission(function(result) { if (result === 'granted') { Abtf.push('Welcome back!',{ body: 'Buzz! Buzz!', icon: '../images/touch/chrome-touch-icon-192x192.png', vibrate: [200, 100, 200, 100, 200, 100, 200], tag: 'vibration-sample' }) .then(function(status) { console.log('Notification sent', status); }); } });
	Tip: For debugging the Service Worker see: chrome://serviceworker-internals (copy in the address bar)
Cache Pages	/> Enabled Cache HTML pages in the service worker. This option enables to make a website available offline.
	HTML Cache Strategy By default HTML pages are fetched from the network with the cache as fallback when the network fails. Select the Cache First strategy to serve pages from cache with the network as backup. Select the On demand strategy to use a Cache First strategy with a manual (event based) cache storage (e.g. "click to read this page offline"). The API is `Abtf.offline(url);` which can also be used for precaching. (show example) Abtf.offline(['/shop/','/shop/product1.html','/wp-content/uploads/.../product-image.jpg']) .then(function(status) { console.log('Resources available offline', status); });
	Cache Update Interval Enter a time in seconds to update cached pages using the network. Leave blank to update the cache on each request. Cache Max Age Enter a expire time in seconds. The maximum age does not override HTTP expire headers. HEAD based network update /> Enabled Use a HTTP HEAD request and `etag` and/or `last-modified` header verification to update the cache. This option saves bandwidth while enabling quick updates of changed content, however, it adds an extra request for content that always changes. Notify client on update /> Enabled Send a notification to the client when the cache is updated. The API is `jQuery(window).on('sw-update',fn);` (show example). jQuery(window).on('sw-update',function(e){ if (e.detail.url === '/my/ajax-feed.json') { /* the Service Worker detected new content, update view */ updateFeedView(); } });
	HTML Cache Include List <?php if (isset($options['pwa_cache_pages_include'])) { echo $this->CTRL->admin->newline_array_string($options['pwa_cache_pages_include']); } ?> Enter (parts of) page URL's to cache, e.g. `category/` to match all pages in a category.
Preload on Mouse Down	/> Enabled Start preloading navigation requests in the Service Worker on mouse down. Older mobile devices including iOS8 have a 300ms click delay which is a lot of time wasted for navigation clicks. An average mouse click also has a 200-500ms delay before navigation starts. This feature enables to start preloading a page in the Service Worker on mouse down/touch start to make use of the otherwise wasted delay.
	Offline Page Enter an URL or absolute path to a HTML page to display when the network is offline and when the requested page is not available in cache.
Cache Assets	/> Enabled Cache assets such as scripts and styles. Use a request and/or response filter to apply a cache strategy and enable or disable caching for specific assets. JSON editor Star

CSS online/offline class	/> Enabled Add the class `offline` to `<body>` based on HTML5 online/offline events. This feature enables to add a user friendly notice via CSS when the connection is offline.
Cache Size	Maximum cache entries to maintain. The default is 1000.
Cache Version	Optionally enter a cache version. This feature enables to invalidate existing caches.
Cache Preload	<?php if (isset($options['pwa_cache_preload'])) { echo $this->CTRL->admin->newline_array_string($options['pwa_cache_preload']); } ?> Enter URLs or absolute path's to preload for offline availability, e.g. `/path/to/page.html` or `/path/to/image.jpg`. /> Require preloading to complete in Service Worker installation. This option will activate the service worker after all assets have been preloaded.
Web App Manifest	The Web App Manifest is a JSON document that enables to control how a website app appears to the user in areas where they would expect to see apps. It is required to validate as Google PWA. (W3C documentation) ' . trailingslashit(home_url()) . 'manifest.json not found. Add the file to the root of your WordPress installation and make it writeable. '; } elseif (!is_writeable($manifest)) { print ' ' . trailingslashit(home_url()) . 'manifest.json is not writeable. Please make the file writeale for WordPress (PHP) to enable online editing and automatic `serviceworker` configuration. '; } else { $json = file_get_contents(trailingslashit(ABSPATH) . 'manifest.json'); $manifestjson = @json_decode(trim($json), true); if (!is_array($manifestjson)) { $manifestjson = array(); print ' ' . trailingslashit(home_url()) . 'manifest.json does not contain valid JSON. '.esc_html($json).' '; } ?> JSON editor Star There are several online tools that can help with Web App Manifest creation. https://app-manifest.firebaseapp.com/ is a simple one. Search Google for more creators. /> Update manifest.json Update manifest.json when saving settings. /> Link to manifest.json Add a link to manifest.json in the `<head>` of the page.
Web App Meta	<?php if (isset($options['pwa_meta'])) { echo esc_html($options['pwa_meta']); } ?> Enter Web App related meta tags to include in the `<head>` of the page. (documentation). There are many Web App Meta Generators that enable to fine tune the settings for an optimal mobile representation. Tip: Use the Google Chrome Application > Manifest tab to debug the settings and to simulate Add to homescreen.

New plugin

Service Worker Scope

Push Notification API

HTML Cache Strategy

Cache Update Interval

Cache Max Age

HEAD based network update

Notify client on update

HTML Cache Include List

Offline Page