FFE product widget

[Workbox er din venn](https://developers.google.com/web/tools/workbox/). ## Nettsider 1. For å legge til ServiceWorkeren i nettsiden din så legger du inn dette i headeren på siden din. ```html 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) }) } ``` 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: ```javascript 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](#eksempel-p-ruter). ## Preact For å bruke Workbox sammen med Preact-komponenter så gjør du slik: 1. Installere plugin: ```bash $ npm install --save-dev workbox-webpack-plugin ``` 2. Endre i `package.json` filen som ligger i preact mappen din: ```json { "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`: ```json 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. ```javascript 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. ```javascript workbox.routing.registerRoute( /^\/api\//, new workbox.strategies.NetworkFirst({ cacheName: 'mitt-api', }) ); ``` Cacher filene med cache-first strategi i 1 år. ```javascript 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.](https://developers.google.com/web/tools/workbox/guides/common-recipes) - [Advanced recipes.](https://developers.google.com/web/tools/workbox/guides/advanced-recipes)

FFE product widget

Hvor mye tid bruker du på mobilen?

Offline støtte til dine nettsider eller Preact-komponenter