@polyfea/service-worker

v0.1.0

Published

2 years ago

Service worker for Polyfea

0High
0Medium
0Low

michalsevcik

milung

polyfea service-worker microfrontend

Service worker for Polyfea microfrontends

Implements configurable service worker with regular reconcilation of the caching strategies. This allows Polyfea Controller to aggregate caching rules accross multiple mifrofrontends registered in the scope of the single microfrontendClass resource. The service worker is build using the Workbox framework.

Intended usage

After installing with

npm install @polyfe/service-worker

this package provides two module scripts in node_modules/@polyfe/service-worker/dist/register.mjs and node_modules/@polyfe/service-worker/dist/sw.mjs. Both are intended to be served by the server at the intended scope (base url) and loaded into html page and service worker.

Example:

<!DOCTYPE html>
<html>
<head>
    <base href="/pwa-scope/">
    <title>My PWA</title>
    <link rel="manifest" href="manifest.json">
    
    <script type="module" src="./@polyfea/service-worker/register.mjs"></script>
    <!-- optional configuration of the service worker 
    <meta name="polyfea-sw-caching-config" content="./polyfea-caching.json">
    <meta name="polyfea-sw-reconcile-interval" content="1800000">
    -->
</head>
<body>
    ...
</body>

Important: sw.mjs must be served on the path that defines its scope, which typically means the base url. In the example above it shall be served from the path /pwa-scope/sw.mjs

The precaching and runtime caching strategies are loaded and regularly reconciled from the ./polyfea-caching.json configuration object which implements Caching. The actual patch to the configuration file and reconcilation period may be defined by metatags as depicted in the example above.

Example of the configuration file:

{
    "precache": [
        { "url": "/index.html", "revision": "1" }
    ],
    "routes": [
        { "pattern": "/api/.*", "strategy": "network-only" },
        { "pattern": "/api/.*", "strategy": "network-only", "method": "POST", "syncRetentionMinutes": 60 },  
        { "pattern": "/test-data/.*", "strategy": "cache-only" },
        { "pattern": ".*", "strategy": "cache-first", "maxAgeSeconds":  86400 }
    ]

}

Documentation

The package may be also bundled into existing project. See Reference Documentation for more informations.

Development

Clone and run

npm install

then start the project by npm start and open browser at [http://localhost:3000].

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Service worker for Polyfea microfrontends

Intended usage

Documentation

Development