According to Google: “Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.”. It’s a really interesting feature and, although users can built it themselves, it’d be great to add support in Frontity.
According to Google, the minimal requirements to consider your web a PWA are:
Registers a service worker with a functional fetch handler.
User Stories
As a Frontity user
I want to add support for PWA in my Frontity project
so that I can improve the user experience.
Possible solution
Our first idea is to support this plugin, as it’s supposed to be merged into WordPress core in the future. It adds the manifest and service worker needed to be considered a PWA, so we’d need to make sure they work with Frontity and we may need to add some functionality to the service worker like the REST API cache.
Decoupled mode
The WP PWA plugin is not relevant in this case. We have to integrate a webpack service worker plugin in our build (and change the build to generate the files with subsequent webpack calls instead of with different entry files): https://webpack.js.org/guides/progressive-web-application/
Embedded mode
We still have to integrate a webpack service worker plugin in our build, but here we can use the PWA plugin to register Frontity’s sw.js file with wp_register_service_worker_script().
I have no idea how coupled the PWA plugin is with the PHP theme. That something we must look at, because by default it may be downloading assets from the PHP theme.
Where within Frontity could a developer add the code to integrate a webpack service worker? I built a whole site with Frontity and now I need PWA compatibility which on the front page of the site says that it offers but from here it looks like it’s still in development.
Before having to look through Frontitiy’s code and find the place, I thought someone here could help me find a quick route. I am not an experienced Reacted developer so I don’t necessarily want to write any code that will go into the future build but I would gladly share my solution here.
Configuring Webpack in Frontity is currently not supported at the moment. However, we are currently working on a feature (Customize Webpack configuration) to add support for that.
Also, you are totally right about the PWA Compatibility text on our webpage, we are gonna take it off until we’ve found a way to support it.
We apologize for not getting back to you sooner than this. Feel free to ask for help as you work with Frontity. We look forward to the awesome application you’ll be building with Frontity.
This is going to require that we switch from doing one Webpack build with multiple entries (one for each site) for the client to multiple Webpack builds for each site.
That is also needed for other features, so it’s something we need to do at some point.
That is because the service worker plugins for Webpack, like workbox-webpack-plugin will add a manifest to download all the files generated by the Webpack build, thinking that they belong to a single app. For that reason, the Webpack build for each site must be unique and isolated from the others.
