Offline støtte til dine nettsider eller Preact-komponenter

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: