Progressive Web App Optimization - SpeedWP/mu-plugins GitHub Wiki
Advanced Progressive Web App (PWA) and Service Worker optimization toolkit. Cache strategy, offline browsing, preloading, Google Lighthouse PWA validation and more.
Description
This plugin is a toolkit for Progressive Web App and Service Worker optimization.
The plugin provides in a complete solution for service worker based performance optimization and enables to validate a website as a Progressive Web App (PWA) in Google Lighthouse.
The service worker can be configured with multiple cache strategies (cache first, network with fallback and event based), offline content, smart preloading, preload on mousedown to improve navigation speed and many more options to enable offline browsing and improved navigation performance.
Cache Policy
The Service Worker cache policy can be configured using JSON.
Service Worker Push
The plugin provides a unique innovation called Service Worker Push. It is an alternative for HTTP/2 Server Push + Cache-Digest with better performance and better efficiency.
Cache-Digest is not yet an official supported feature. HTTP/2 Server Push without Cache-Digest causes a lot of overhead and has almost no performance advantage.
- Performance study: https://calendar.perfplanet.com/2016/cache-digests-http2-server-push/
- Google engineer: https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/
Cache-Digest calculation for thousands of assets causes overhead. Service Worker Push has direct access to the browser cache storage and is therefor able to support millions of cached assets without performance loss.
Service Worker Push uses PHP method \O10n\attach_preload() to attach assets such as images, stylesheets and scripts to a page which are then exposed to a Service Worker using a HTTP header. The Service Worker is then able to preload assets intelligently on the basis of a page URL.
/* Attach assets to page for smart preloading in the Service Worker */
add_action('init', function() {
if (function_exists('O10n\attach_preload')) {
// attach single asset to page
\O10n\attach_preload('/path/to/image.jpg');
// attach multiple assets to page
\O10n\attach_preload(array('/path/to/image.jpg', 'https://cdn.google.com/script.js', '/path/to/stylesheet.css'));
}
});
Background Fetch
A performance flaw of Service Workers is that they initiate Fetch requests that cannot be cancelled when a user wants to navigate which can slow and even block navigation. This plugin provides a unique innovation in which Fetch requests can be performed in a regular Web Worker that can be terminated when a user wants to navigate, instantly cancelling any Fetch requests or background tasks.
Web App Manifest Editor
The plugin provides a Web App manifest.json and meta editor to easily optimize the web app configuration.
Additional features can be requested on the Github forum.