PWA工作箱离线后备

如何解决PWA工作箱离线后备

我是Workbox插件的新手，我开始在简单的项目上进行测试，这是我使用的示例代码

对于workbox.config.js

module.exports = {
"globDirectory": "public/","globPatterns": [
    "**/*.{png,xml,css,ico,jpg,svg,js}"
],"swDest": "public/service-worker.js","swSrc": "resources/js/service-worker.js","globIgnores": [
    'notusing/**/*','js/service-worker.js','service-worker.js','zsw.js'
  ]
};

和source-sw.js

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

    workbox.setConfig({debug: true});
//
    // Updating SW lifecycle to update the app after user triggered refresh
    workbox.core.skipWaiting();
    workbox.core.clientsClaim();
    // top-level routes we want to precache
    workbox.precaching.precacheAndRoute(['/','/sample/page1','/sample/page2']);

    workbox.precaching.precacheAndRoute(self.__WB_MANIFEST || []);

    // match routes for homepage,blog and any sub-pages of blog
    workbox.routing.registerRoute(
        /^\/(?:(blog)?(\/.*)?)$/,new workbox.strategies.NetworkFirst({
            cacheName: 'static-resources',})
    );

    // js/css files
    workbox.routing.registerRoute(
        /\.(?:js|css)$/,new workbox.strategies.StaleWhileRevalidate({
            cacheName: 'static-resources',})
    );

    // images
    workbox.routing.registerRoute(
        // Cache image files.
        /\.(?:png|jpg|jpeg|svg|gif)$/,// Use the cache if it's available.
        new workbox.strategies.CacheFirst({
            // Use a custom cache name.
            cacheName: 'image-cache',plugins: [
                new workbox.expiration.Plugin({
                    // Cache upto 50 images.
                    maxEntries: 50,// Cache for a maximum of a week.
                    maxAgeSeconds: 7 * 24 * 60 * 60,})
            ],})
    );

}

顺便说一句，它是一个laravel项目，当我使用npm run build时，一切正常构建，没有问题，并且网站运行正常，但是当我离线运行同一页面时，它不会从缓存运行。谁能指导我正确的方向，我在这里做错了什么。我正在努力寻找解决办法。