工作箱未连接。是什么原因？

Question

我根据官方文档连接workbox。结果如下代码。

  

    self.addEventListener ('install', (event) => {

      importScripts ('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
        if (workbox) {
            console.log (`Yay! Workbox loaded ????`);
        } else {
            console.log (`Boo! Workbox did not boot ????`);
        }
        workbox.routing.registerRoute (
            /\.js$/,
            new workbox.strategies.NetworkFirst ()
        );

        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 only 20 images.
                        maxEntries: 20,
                        // Cache for a maximum of a week.
                        maxAgeSeconds: 7 * 24 * 60 * 60,
                    })
                ],
            })
        );

        self.skipWaiting ();
            console.log ('Service Worker has been installed'); 
});

工作箱已正确加载，但未执行进一步操作。 NetworkFirst 发出以下警告。

必须在初始评估时添加“获取”事件的事件处理程序 工作脚本。

'message' 事件的事件处理程序必须添加在初始 工作脚本的评估。

缓存中没有任何内容。我不使用 Node.js，但据我从服务器上的文档和响应中了解到，这不是必需的。那么问题到底是什么？是没有节点还是我连接有问题？

Answer 1

错误信息告诉你出了什么问题。

'fetch' 事件的事件处理程序必须在工作脚本的初始评估中添加。

在您的情况下，正在评估脚本文件，并且未定义 fetch 和 message 事件侦听器。 install 事件触发，然后工作箱尝试定义其他侦听器。需要在评估的初始脚本中定义其他侦听器。

简单的解决方案是您不需要install 侦听器。删除它并直接在 service worker 中导入和使用 workbox。

另请注意，您只能在脚本的top level 处使用importScripts。