WordPress feature plugin to bring Progressive Web App (PWA) capabilities to Core

Weston Ruter

rtCamp

Google

Alberto Medina

<blockquote cite="https://developers.google.com/web/progressive-web-apps/">
Progressive Web Apps are user experiences that have the reach of the web, and are:
<ul>
<li><a href="https://developers.google.com/web/progressive-web-apps/#reliable" rel="nofollow ugc">Reliable</a> – Load instantly and never show the downasaur, even in uncertain network conditions.</li>
<li><a href="https://developers.google.com/web/progressive-web-apps/#fast" rel="nofollow ugc">Fast</a> – Respond quickly to user interactions with silky smooth animations and no janky scrolling.</li>
<li><a href="https://developers.google.com/web/progressive-web-apps/#engaging" rel="nofollow ugc">Engaging</a> – Feel like a natural app on the device, with an immersive user experience.</li>
</ul>
This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.
</blockquote>
Continue reading more about <a href="https://web.dev/progressive-web-apps/" rel="nofollow ugc">Progressive Web Apps</a> (PWA) from Google.
In general a PWA depends on the following technologies to be available:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" rel="nofollow ugc">Service Workers</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" rel="nofollow ugc">Web App Manifest</a></li>
<li><a href="https://en.wikipedia.org/wiki/HTTPS" rel="nofollow ugc">HTTPS</a></li>
</ul>
This plugin serves as a place to implement support for these in WordPress with the intention of being proposed for core merge, piece by piece. Case in point, the HTTPS functionality from this plugin has largely been made part of Core: <a href="https://make.wordpress.org/core/2021/02/22/improved-https-detection-and-migration-in-wordpress-5-7/" rel="nofollow ugc">Improved HTTPS detection and migration in WordPress 5.7</a>.
This feature plugin is not intended to obsolete the other plugins and themes which turn WordPress sites into PWAs. Rather, this plugin is intended to provide the PWA building blocks and coordination mechanism for these themes and plugins to not reinvent the wheel and also to not conflict with each other. For example, a theme that implements the app shell model should be able to extend the core service worker while a plugin that provides push notifications should be able to do the same. Themes and plugins no longer should have to each create a service worker on their own, something which is inherently problematic because only one service worker can be active at a time: only one service worker can win. If you are developing a plugin or theme that includes a service worker, consider relying on this PWA plugin, or at least only use the built-in implementation as a fallback for when the PWA plugin is not available.
In versions prior to 0.6, no caching strategies were added by default. The only service worker behavior was to serve an offline template when the client’s connection is down or the site is down, and also to serve an error page when the server returns with 500 Internal Server Error. As of 0.6, there is a new “Offline browsing” toggle on the Reading Settings screen in the admin. It is disabled by default, but when enabled a <a href="https://web.dev/offline-cookbook/#network-falling-back-to-cache" rel="nofollow ugc">network-first</a> caching strategy is registered for navigations so that the offline page won’t be shown when accessing previously-accessed pages. The network-first strategy is also used for assets from themes, plugins, and WordPress core. In addition, uploaded images get served with a <a href="https://web.dev/offline-cookbook/#stale-while-revalidate" rel="nofollow ugc">stale-while-revalidate</a> strategy. For all the details on these changes, see the <a href="https://github.com/GoogleChromeLabs/pwa-wp/pull/338" rel="nofollow ugc">pull request</a>.
Documentation for the plugin can be found on the <a href="https://github.com/GoogleChromeLabs/pwa-wp/wiki" rel="nofollow ugc">GitHub project Wiki</a>.
Development of this plugin is done <a href="https://github.com/GoogleChromeLabs/pwa-wp" rel="nofollow ugc">on GitHub</a>. Pull requests welcome. Please see <a href="https://github.com/GoogleChromeLabs/pwa-wp/issues" rel="nofollow ugc">issues</a> reported there before going to the <a href="https://wordpress.org/support/plugin/pwa" rel="ugc">plugin forum</a>.

Certainly the idea of not reinventing the wheel makes perfect sense.

It worked very well

Works neatly


It just works out of the box. No frills, no thunder, it just does exactly what is should do.



And responsive support to boot. Excellent work!


Does exactly what's needed


Hello developers,



There are 2 problems that you should improve.




My website uses SVG files for icons and the logo. The SVG files not be loaded when offline (both iOS and Android).



PWA can not load CSS files when I enable compress and combile CSS in Litespeed cache plugin (both iOS and Android).




Thank you!


Alternatives to PWA

Top alternatives