text PWA

Posted 2021-05-02

<script>
        // Check that service workers are registered
        if ('serviceWorker' in navigator) {
            // Use the window load event to keep the page load performant
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js');
            });
        }
</script>
    
// sw.js

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

workbox.routing.registerRoute(
    new RegExp('^.*'),
    workbox.strategies.networkFirst({
        cacheName: 'image-cache',
        plugins: [
            new workbox.expiration.Plugin({
                maxAgeSeconds: 2,
            }),
        ]
    }
);

workbox.precaching.precacheAndRoute([]);

/* workbox-config.js */

module.exports = {
  "globDirectory": ".",
  "globPatterns": [
    "**/*.{png,js,css,ico,erb,html,svg,eot,ttf,woff,woff2,gif,otf,jpg,webmanifest,jpeg}"
  ],
  "swDest": "swDest.js",
  "swSrc": "sw.js"
};

/* установка и инициализация */

npm install workbox-cli --global // ставим плагин
workbox wizard --injectManifest // инициализируем список файлов, которые надо кешировать
workbox injectManifest // запускаем генератор списка закешированных файлов