hops-pwa
v15.2.1
Published
ServiceWorker and Web App Manifest support for Hops
Downloads
62
Readme
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.