Uncaught (in promise) TypeError: Failed to fetch - Service Worker with workbox

Question

但是，我正在尝试通过 Workbox Webpack 插件使用 Workbox 设置我的服务工作者。下面是我的 Workbox 配置

module.exports = {
    swDest: "./service-worker.js",
    swSrc: "./resources/js/service-worker.js",
    precacheManifestFilename: './js/wb-manifest.[manifestHash].js',
    importWorkboxFrom: 'disabled',
};

下面是生成的服务工作者

module.exports = {
    swDest: "./service-worker.js",
    swSrc: "./resources/js/service-worker.js",
    precacheManifestFilename: './js/wb-manifest.[manifestHash].js',
    importWorkboxFrom: 'disabled',
};

这是/js/wb-manifest.52d5032189ed9e06abfcddfea1d2c06f.js文件内容

importScripts("/js/wb-manifest.52d5032189ed9e06abfcddfea1d2c06f.js");

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

if (workbox) {
    workbox.precaching.precacheAndRoute(self.__precacheManifest)
    // top-level routes we want to precache
    workbox.precaching.precacheAndRoute(['/']);

    // injected assets by Workbox CLI
    workbox.precaching.precacheAndRoute([]);

    // match routes for homepage, blog and any sub-pages of blog
    workbox.routing.registerRoute(
        /^\/(?:(home)?(\/.*)?)$/,
        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,
                })
            ],
        })
    );
}

但是，当我注册 Service Worker 并运行该页面时，出现错误

service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch

我已经尝试了几件事来查看可能导致它的原因，这似乎是 service worker 顶部的 importScripts 的问题。

我想知道我的服务人员是否有任何问题以及如何修复它。

Answer 1

我遇到了同样的问题并通过简单地禁用广告拦截器浏览器扩展来修复它。在某些情况下，这可能会有所帮助。

Answer 2

您已经解决问题了吗？我在 laravel mix 中遇到了完全相同的问题。请检查您的预缓存文件。是不是看起来像这样：

self.__precacheManifest = [
{
    "revision": "89c25ce71806a695a25e",
    "url": "//js/app.js"
  },
  {
    "revision": "89c25ce71806a695a25e",
    "url": "//css/app.css"
  }
];

如果是这样，请查看此修复： Workbox's precache manifest file contains invalid URL strings in Laravel Mix setting

将 publicPath 选项添加到您的 webpack 配置中

const { GenerateSW } = require('workbox-webpack-plugin');

mix.webpackConfig({
  plugins: [new GenerateSW()],
  output: {
    publicPath: ''
  }
});

这解决了我的问题！希望对你也有帮助