6

我收到这个警告：

在此处输入图像描述

未检测到匹配的服务人员。您可能需要重新加载页面，或者检查当前页面的服务工作者是否也控制清单中 URL 的开始。

我的服务人员正在工作的东西。

在此处输入图像描述

我什至尝试使用其他两个 URL，它们都使用 HTTPS。

现在我将向您展示代码，我正在使用：

网站.webmanifest

{
    ...
    "start_url": "/",
    "display": "standalone"
    ...
}

为了创建我的 service-worker，我使用了 webpack 插件：WorkboxPlugin 结合 Laravel Mix：

webpack.mix.js

mix.webpackConfig({
    plugins: [
        build.jigsaw,
        build.browserSync(),
        build.watch(['source/**/*.md', 'source/**/*.php', 'source/**/*.scss', '!source/**/_tmp/*']),
        new WorkboxPlugin.GenerateSW({
            // these options encourage the ServiceWorkers to get in there fast
            // and not allow any straggling "old" SWs to hang around
            clientsClaim: true,
            skipWaiting: true,
        }),
    ],
    output: {
        publicPath: '/assets/build/', // fixes the output bug
    },
});

它创建了service-worker.js：

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

importScripts(
  "/assets/build/precache-manifest.cb67a9edd02323d8ea51560852b6cc0d.js"
);

workbox.core.skipWaiting();

workbox.core.clientsClaim();

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

使用precache-manifest.js

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "4e264a665cf5133098ac",
    "url": "/assets/build//js/main.js"
  },
  {
    "revision": "4e264a665cf5133098ac",
    "url": "/assets/build/css/main.css"
  },
  {
    "url": "/assets/build/images/vendor/leaflet/dist/layers-2x.png?4f0283c6ce28e888000e978e537a6a56"
  },
  {
    "url": "/assets/build/images/vendor/leaflet/dist/layers.png?a6137456ed160d7606981aa57c559898"
  },
  {
    "url": "/assets/build/images/vendor/leaflet/dist/marker-icon.png?2273e3d8ad9264b7daa5bdbf8e6b47f8"
  }
]);

我应该怎么处理这个警告？

4

2 回答 2

2

我找到了解决方案！范围设置不正确。您需要了解，服务人员需要位于根文件夹中。

所以我的改变是：

webpack.mix.js

mix.webpackConfig({
    plugins: [
        build.jigsaw,
        build.browserSync(),
        build.watch(['source/**/*.md', 'source/**/*.php', 'source/**/*.scss', '!source/**/_tmp/*']),
        new WorkboxPlugin.GenerateSW({
            // these options encourage the ServiceWorkers to get in there fast
            // and not allow any straggling "old" SWs to hang around
            clientsClaim: true,
            skipWaiting: true,
            swDest: '../../service-worker.js', //Need to move the service-worker to the root
        }),
    ],
    output: {
        publicPath: '/assets/build/', // fixes the output bug
    },
});

现在我需要用新路径注册服务工作者

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(reg => {
                console.log('Registration succeeded. Scope is ' + reg.scope);
            })
            .catch(registrationError => {
                console.log('SW registration failed: ', registrationError);
            });
    });
}
于 2019-08-23T17:19:47.577 回答
0

这里最简单的解决方案是，就像前面的答案中提到的那样，将服务工作者文件与站点 webmanifest 文件一起放在根目录中。

但是，如果您喜欢将资产分组到子目录中的人，那么您可以通过设置scope选项手动设置范围/并将Service-Worker-AllowedHTTP 标头添加到响应中。这样，您的服务工作人员文件不需要位于根目录中。

参考https://w3c.github.io/ServiceWorker/#service-worker-script-response中的示例 11

    // Set the scope to an upper path of the script location
    // Response included "Service-Worker-Allowed : /"
    navigator.serviceWorker.register("/js/sw.js", { scope: "/" }).then(() => {
        console.log("Install succeeded as the max allowed scope was overriden to 
    '/'.");
    });
于 2020-06-02T08:28:43.643 回答