Progressive Web App

Description

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:

  • Be served over HTTPS.
  • Includes a Web App Manifest with the info about your site.
  • 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.

Old issue: https://github.com/frontity/frontity/issues/110

Getting the manifest from the PWA plugin is fine but service workers are not going to work without Frontity supporting them via Webpack.

Manifest

The redirect of the manifest is not needed, you can just point to the WP domain. This should work just fine after installing the PWA plugin:

const Manifest = ({ state }) => (
  <Head>
    <link
      rel="manifest"
      href={`${state.source.api}/wp/v2/web-app-manifest`}
    />
  </Head>
);

Service Workers

We have two scenarios here:

  • 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.

1 Like

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.

Hi @kprishep, welcome to Frontity. :slightly_smiling_face:

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.

Welcome to Frontity once again! :slightly_smiling_face:

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.

A post was split to a new topic: Using OnseSignal (web workers) with Frontity

Hi,

Now that the custom webpack config is merged into core, will this be looked at again? :slight_smile:

I guess so yeah, although for multisite installations the offline webpack plugins won’t work, so ideally this needs to be addressed as well:

But for single site installations it should be possible now.

As this can be done as an external package, if anyone wants to take a look, please go ahead. Ask here for help if you need to :slightly_smiling_face:

Hi,

Will this be revisited now that the unique webpack configuration has been incorporated into core?