时间戳

首页 > 解决方案 > 使用生产构建注册服务工作者脚本时出错

javascript - 使用生产构建注册服务工作者脚本时出错

问题描述

我正在使用 Workbox Webpack 插件 (v4.3.1) 来生成服务工作者脚本和 Workbox-Window (v4.3.1) 插件来注册它。

在开发环境（我使用 webpack 开发服务器）上一切正常，但是在生产版本中，我在 Chrome（v78）开发控制台上收到以下错误：

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:4321/') with script ('http://localhost:4321/undefined'): A bad HTTP response code (404) was received when fetching the script.

（注意：我使用本地 Nginx 服务器来测试我的生产版本）

我像这样使用 Workbox Webpack GenerateSW：

new WorkboxPlugin.GenerateSW({
  clientsClaim: true,
  skipWaiting: false
})

我确认，在构建之后，会生成服务工作者脚本 (service-worker.js) 并且它在 dist 文件夹中。

我正在使用 Workbox-Window 插件来注册上述服务工作者脚本：

 import { Workbox } from 'workbox-window'

 if ('serviceWorker' in navigator) {
      const wb = new Workbox('/service-worker.js') // Note: I also tried without the bar and with path './service-worker.js' and didnt work
      wb.register()
  }

我猜这个问题与我使用 Nginx 测试产品构建的事实无关，也与提供给 Workbox 构造函数的服务工作者脚本的 url 或路径无关，因为使用 ServiceWorker Web API 而不是 Workbox Window API ，它工作正常：

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/service-worker.js') // THIS WORKS!!!
}

为什么在完全相同的条件下，使用 Workbox Window API 注册 Service Worker 失败？undefined您可以在错误日志中看到的那个是从哪里来的？？？

* 编辑 *我在 Workbox GitHub repo 上打开了一个问题。你可以在这里找到它。

标签： javascriptwebpackworkboxworkbox-webpack-pluginworkbox-window

解决方案

当我在这里看到您的帖子时，我遇到了同样的问题并抱有希望。在轻微的失望之后，我开始在网上搜索并寻找一些启示。无论如何，我有一个类似于你的设置，它在开发环境中可以工作，但在生产环境中却不行。

我的具体设置是：Python 3 + Flask + Webpack + npm + Apache HTTPD

我为解决这个问题所做的就是修改导入语句：

import { Workbox } from 'workbox-window'

对此：

import { Workbox } from 'workbox-window/Workbox.mjs';

根据 Google Workbox 网站上的此文档： Workbox Advanced 捆绑概念

之后，我需要更新我的 Webpack 设置以捆绑 Babel-Polyfill，这样我就能够避免由工作箱窗口使用的 promise 和 await 函数引起的 regeneratorRuntime 错误，方法是按照此处所述安装并包含它：@babel/ Polyfill或babel-polyfill取决于您的设置并将其添加为 module.exports 配置中的条目。

希望这可以帮助任何遭受这种模棱两可和令人筋疲力尽的错误的人。

推荐阅读