Notorious Pug Mafia

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

    15.2.1 • Public • Published



    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.


    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.


    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
      <link rel="manifest" href={manifest} />

    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';

    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.


    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

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


    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) => {

    Render Options

    This preset has no runtime options.


    npm i hops-pwa

    DownloadsWeekly Downloads






    Unpacked Size

    16.6 kB

    Total Files


    Last publish


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