FFE product widget
Test av preact produktwidget fra Flyfish Europe AS.
<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>
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');
For å bruke Workbox sammen med Preact-komponenter så gjør du slik:
$ npm install --save-dev workbox-webpack-plugin
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",
}
}
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$/]
})
);
};
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:
Test av preact produktwidget fra Flyfish Europe AS.
Har du tenkt på hvor mye tid du bruker på de ulike tingene i hverdagen? Det kommer ofte som en overraskelse når man ser det visualisert.