List of compatible Themes and Plugins

[NicoHood]

Hi, I just found this plugin, and as far as I understand it is used along with other themes and plugins. Are there any of those already available? I'd like to have a small hint where to start, maybe also put this into the readme?

[westonruter]

It is intended to work with any theme and plugin. There are no specific theme/plugin requirements.

[NicoHood]

Okay, then I misunderstood this:

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.

I thought the theme must still enable/make use of this plugin. So I can install this PWA Plugin and PWA will fully work? Maybe this should be clarified.

Is there a plan when this will get merged into core?

[westonruter]

I thought the theme must still enable/make use of this plugin. So I can install this PWA Plugin and PWA will fully work? Maybe this should be clarified.

Yes, this plugin provides features out of the box, primarily the offline browsing capability.

Is there a plan when this will get merged into core?

That's a good question. No ETA. It needs more interest, I'd say.

[NicoHood]

Alright, so I tried this plugin on a stagging site. Is there a way to add an install button to the website? Is this a general PWA feature or do you need to create a custom html button? I think it makes sense to give people the chance to hit an on-website button to install the app.

Comparing this plugin to the SuperPWA Plugin I noticed, that there is a headline in this app, while superpwa hides this headline. This makes the App look much more like a native app. Can this be configured somehow?

Are there any downsites in enabling offline reading mode? What are the consequences? Will content be delivered to google, or is it just a formational flag for the client? Is there a way to flush the offline data when you revisit the site, etc?

Maybe a FAQ would be nice :)

[westonruter]

Maybe a FAQ would be nice :)

There actually is an FAQ: https://github.com/GoogleChromeLabs/pwa-wp/wiki/FAQ

Comparing this plugin to the SuperPWA Plugin I noticed, that there is a headline in this app, while superpwa hides this headline. This makes the App look much more like a native app. Can this be configured somehow?

I think you're referring to the display property. By default it is set to minimal-ui but you can change it to be standalone for a more native feel via:

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['display'] = 'standalone';
    return $manifest;
} );

Alright, so I tried this plugin on a stagging site. Is there a way to add an install button to the website? Is this a general PWA feature or do you need to create a custom html button? I think it makes sense to give people the chance to hit an on-website button to install the app.

The plugin relies on the browser to prompt the user to install the PWA. It is possible to add an install button on the page, but the plugin doesn't implement that. See How to provide your own in-app install experience.

Are there any downsites in enabling offline reading mode? What are the consequences? Will content be delivered to google, or is it just a formational flag for the client? Is there a way to flush the offline data when you revisit the site, etc?

It's only caching on the client. It's not related to Google in any way. Offline reading mode will enable a “network-first caching strategy” for page visits. This means that when you click on a link, it will first try to get the latest version from the network. If this fails (or it takes longer than the default 2-second timeout), it will use the cached version if available. There is a filter to customize the timeout. So there's not really any downside. The only potential problem is that stale content may be served to users on slow connections, but that is probably what they would want.

[NicoHood]

Nice, Nice, Nice! I recommend to add those Answers to the FAQ. Definitely worth it!

[westonruter]

Cool. I've added those to the FAQ.

[NicoHood]

Thanks!

One more: What is your recommended way to add push notifications to the PWA? Is this also on the roadmap of this plugin, or out of scope? I really like how clean this plugin is, well done!

[westonruter]

I don't have any specific recommendations for push notifications, as this is something that other plugins should provide on top of the PWA plugin. However, there is an a blog post for How to integrate OneSignal with PWA plugin in WordPress. There's also https://github.com/OneSignal/OneSignal-Website-SDK/issues/615 which is about making OneSignal's SDK compatible with the PWA plugin's service worker.

[nisbet-hubbard]

Given there won’t be an asset scanner in this plugin for now, I figure this is the place to collect notes on compatibility with other plugins for potential inclusion in the FAQ.

For sites using a plugin that aggregates CSS/JS files such as Autoptimize, one needs to create an additional caching route for /wp-content/cache/autoptimize/(?:css|js)/autoptimize_(?:single_)?[a-z0-9]+.(?:css|js) or separate precaching routes for the individual files, as the case may be.

[westonruter]

@gittehubbard Thanks for pointing this out. This is something we've overlooked in the runtime caching for offline browsing. I've opened #953 to address this.