Javascript Serviceworker从未被激活或接收消息，但workbox功能在子路径上工作

在我当前使用webpack with（

workbox-webpack-plugin

）和workbox（with

workbox-window

）的项目中，我遇到了一个错误，当页面加载到“深url”时，serviceworker将永远不会响应消息，例如“/我的路径/嵌套”。 它将在“/我的路径”上工作

在最小的可再生环境中，这是应该发生的

• 在新选项卡中，可访问应用程序（例如，通过

  https://my-app.my-name.company-dev-envs.cloud/some-unique-id

  ）
• ServiceWorker通过workbox（

  .register（）

  ）注册
• 注册后，

  messageSW

  用于请求SWs“版本”
• ServiceWorker使用

  event.ports[0].postMessage

  响应，并使用一个字符串指示版本

如果站点是通过“深层”路径访问的，比如/某个唯一的id/测试，则消息传递将永远无法工作

Workbox已成功“注册”-但不会触发任何事件（当选择应用程序>服务人员选项卡中的

重新加载时更新
时，
externalactivated
除外）
serviceworker将报告为“活动并正在运行”，而不显示其他service Worker。它似乎也可以处理抓取。只有消息和事件从不通过
wb
Workbox窗口实例响应/触发

“应用程序”选项卡将服务工作者报告为活动且正在运行：

index.js（应用程序的主条目）

/*全局窗口，系统*/
导入“/”脱机“；
// [...]

offline.js

从“工作盒窗口”导入{Workbox}；
if（导航器中的“serviceWorker”）{
const wb=new Workbox（'./sw.js'）；
const attachDebugEventHandlers=（事件）=>{
events.forEach（（eventName）=>{
wb.addEventListener（事件名称，（）=>{
log（`[workbox sw]${eventName}触发`）；
});
});
};
attachDebugEventHandlers([
“已激活”，
“控制”，
“外部激活”，
“外部安装”，
“外部等待”，
“已安装”，
"讯息",，
"多余",，
“等待”，
]);
wb.register（）
。然后（（注册）=>{
console.log（'workbox sw register successful'）；
console.log（“发送消息”）
messageSW（{type:'GET_VERSION'}）。然后（（ver）=>console.log（`[workbox sw]VERSION报告为${ver}`）
})
.catch（（错误）=>{
控制台。错误（“[workbox sw]无法激活sw”，错误）；
});

sw.js

webpack.config.js（为简洁起见缩短）

const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const WorkboxPlugin=require（'workbox-webpack-plugin'）；
module.exports={
devtool:“评估源地图”，
模块：{
规则：[
{
测试：/\（jsx？）$/，
包括：[
解析（uu dirname，'src'），
],
用法：['babel-loader']，
},
//[…]（样式加载）
{
测试：/\.html$/,，
使用：[
{
加载器：“html加载器”，
},
],
},
],
},
开发服务器：{
历史上的倒退：是的，
disableHostCheck：true
},
插件：[
// [...]
新HtmlWebpackPlugin({
模板：path.resolve（uu dirname，'src/html/index.html'）
}),
// [...]
新WorkboxPlugin.InjectManifest({
swSrc:'/src/sw.js'，
swDest:'sw.js'，
maximumFileSizeToCacheInBytes:12*1024*1024，
}),
],
};

使用的版本：

    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.2",
    "workbox-window": "^5.1.3"
    "workbox-webpack-plugin": "^5.1.3"

（）
我自己能够解决它。问题当然是当用户导航到子路径时，
/sw.js
的路径不正确

https://my-website.com/a-subpath/a-resource
不会将
/sw.js
解析为
https://my-website.com/sw.js
而不是
https://my-website.com/a-subpath/sw.js

这是一个非常愚蠢的错误，但希望有人能得到这个答案的帮助。如果
workbox window
没有像注册成功一样正确解析，但拒绝了
/sw.js
路径，可能会有所帮助

    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.2",
    "workbox-window": "^5.1.3"
    "workbox-webpack-plugin": "^5.1.3"