hops-pwa

hops-pwa

Please see the main Hops Readme for general information and a Getting Started Guide.

This is a preset for Hops that can be used to enable progressive web app features like a web app manifest and service worker usage in Hops.

Installation

Add this preset to your existing Hops React project:

npm install --save hops-pwa

If you don't already have an existing Hops project read this section on how to set up your first Hops project.

Usage

Web App Manifest

When you import / require a web app manifest in your application code you will get an URL to the web app manifet which you can, for example, render in a <link /> element via React Helmet Async.

import manifest from './manifest.webmanifest';
// inside a components render method
<Helmet>
  <link rel="manifest" href={manifest} />
</Helmet>;

Images that are referenced inside the web app manifest will be copied to the public directory and its references inside the webmanifest will be updated.

Service Worker

In order to use a service worker you need to configure the path to your worker file via the workerFile preset option and then import the installServiceWorker() function from hops-pwa.

import installServiceWorker from 'hops-pwa';

installServiceWorker();

Check out this integration test as an example for how to use this preset.

Consumer API

installServiceWorker(): Promise<ServiceWorkerRegistration>

This is the main export of hops-pwa which, when executed, will register the configured service worker and return a promise which resolves to the ServiceWorkerRegistration object.

Configuration

Preset Options

Name	Type	Default	Required	Description
workerPath	String	<basePath>/sw.js	no	The path on which to serve the service worker
workerFile	String	hops-pwa/worker.js	yes	The path to the service worker entry file

workerPath

This configures the path on which to serve the service worker.

workerFile

This is the path to the service worker source file which will be compiled via webpack and served on the workerPath.

The service worker is expected to export a function with the following signature: (config, assets): void.

The assets parameter is an array of asset urls that your build produced (referenced images, styles, scripts, etc) and might be used for precaching them.

export default (config, assets) => {
  // your worker code goes here. e.g.:
  self.addEventListener('install', (event) => {
    event.waitUntil(precache(assets));
  });
};

Render Options

This preset has no runtime options.