Offline støtte til dine nettsider eller Preact-komponenter

Workbox er din venn.

Nettsider

1. For å legge til ServiceWorkeren i nettsiden din så legger du inn dette i headeren på siden din.

   <script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js')
            .then(function (registration) {
                console.log('Service Worker registration successful with scope: ', registration.scope)
            })
            .catch(function (err) {
                console.log('Service Worker registration failed: ', err)
            })
    }
   </script>
   

2. Så lager du en fil på roten som heter service-worker.js. Denne filen definerer alle ruter som du ønsker å gjøre noe med. På toppen av filen så inkluderer du biblioteket:

   importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.2.0/workbox-sw.js');
   

3. Så legger du til noen fine regler: Eksempel på ruter.

Preact

For å bruke Workbox sammen med Preact-komponenter så gjør du slik:

1. Installere plugin:

   $ npm install --save-dev workbox-webpack-plugin
   

2. Endre i package.json filen som ligger i preact mappen din:

   {
    "scripts": {
        "build": "preact build --no-prerender --clean --template src/index.ejs  --service-worker false",
        "serve": "preact build --service-worker false && preact serve",
    }
   }
   

3. Legg til plugins i filen preact.config.js:

   const WorkboxPlugin = require('workbox-webpack-plugin');
   export default (config, env, helpers) => {
    // Path to your Preact component.
    config.output.publicPath = '/preact/simple-blog-cms/';
    config.plugins.push(
        new WorkboxPlugin.InjectManifest({
            swSrc: './service-worker.js',
            swDest: './service-worker.js',
            include: [/\.html$/, /\.js$/, /\.svg$/, /\.css$/, /\.png$/, /\.ico$/]
        })
    );
   };
   

Eksempel på ruter

Rute for å cache lokale bilder, javascript og css. Denne bruker cachen og sjekker med serveren like etterpå for å se om det har skjedd noen endringer.

workbox.routing.registerRoute(
    /\.(?:js|css|ico|png|gif|jpg|jpeg|svg)$/,
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: 'static-resources',
    })
);

Sjekker først direkte mot server og dersom den er offline så vil den svare med cachet versjon.

workbox.routing.registerRoute(
    /^\/api\//,
    new workbox.strategies.NetworkFirst({
        cacheName: 'mitt-api',
    })
);

Cacher filene med cache-first strategi i 1 år.

workbox.routing.registerRoute(
    /^https:\/\/stackpath\.bootstrapcdn\.com/,
    new workbox.strategies.CacheFirst({
        cacheName: 'bootstrap-cdn',
        plugins: [
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200],
            }),
            new workbox.expiration.Plugin({
                maxAgeSeconds: 60 * 60 * 24 * 365,
                maxEntries: 30,
            }),
        ],
    })
);

Flere oppskrifter finnes her:

• Common recipes.
• Advanced recipes.