Workbox-webpack-plugin nested urls sw registration

Question

我在我的react应用程序中嵌套了路由，如https://my-app.com/someroute/new和https://my-app.com/someroute级service worker注册工作正常，但在https://my-app.com/someroute/new级它失败了

Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://my-app.com/someroute/') with script ('https://my-app.com/someroute/service-worker.js'): The script has an unsupported MIME type ('text/html').

我尝试将directoryIndex设置为'.. '/’，但也没有成功。

我的workbox-plugin配置在这里:

new GenerateSW({
cacheId: 'my-app',
skipWaiting: true,
clientsClaim: true,
exclude: [/.map$/, /^manifest.*.js(?:on)?$/, /.html$/],
}),

Answer 1

这个错误意味着当你的web应用程序请求URLhttps://my-app.com/someroute/service-worker.js从你的web服务器，而不是返回service-worker.js的JavaScript内容，它返回一个HTML文档。这大概是一个"404未找到"。错误文档，因为web服务器认为https://my-app.com/someroute/service-worker.js不存在。

解决这个问题的方法是确保在web服务器根目录下的/someroute/目录中有一个有效的service-worker.js文件。

GenerateSWworkbox-webpack-plugin有一个swDest属性，可以用来控制服务工作文件输出的位置。将其设置为swDest: '/someroute/service-worker.js'可能足以解决您的问题。