Question

我根据官方文档连接工作箱。原来的代码如下。

    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发出以下警告。

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

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

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

Answer 1

错误消息告诉您出了什么问题。

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

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

简单的解决方案是您不需要install侦听器。删除它，然后直接在服务工作者中导入并使用工作箱。

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

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

1 个答案: