Notorious Pug Mafia

    hops-pwa
    TypeScript icon, indicating that this package has built-in type declarations

    15.2.1 • Public • Published

    hops-pwa

    npm

    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.

    Install

    npm i hops-pwa

    DownloadsWeekly Downloads

    27

    Version

    15.2.1

    License

    MIT

    Unpacked Size

    16.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • robertkowalski
    • zaubernerd
    • jhiode
    • knisterpeter
    • hops-release
    • dmbch
    • aithir
    • robin-drexler