Progressive Web App

Roadmap Card

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:

  • Frontity in a different domain
    The 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/

  • PHP Theme Bridge
    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.