如何在开发模式下使用 service-worker

Question

我正在使用create-react-app 4 和cra-template-pwa (source)

默认情况下，service-worker 似乎只用于生产构建：

export function register(config) {
    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {

https://github.com/cra-template/pwa/blob/25cb9f06938c671507684a8438c347d3c8bc8b24/packages/cra-template-pwa/template/src/serviceWorkerRegistration.js#L22

这对我来说是个问题，因为构建生产构建需要很长时间，因此我想在开发构建时注册服务工作者。 为了得到这个结果，我删除了检查 process.env.NODE_ENV === 'production' 和另一个 isLocalhost 检查。

现在，正如我所希望的那样，即使是调试版本也在尝试加载 www.example.com/service-worker.js。

---

现在的问题是，这个文件在src 里面。这是有道理的，因为它使用导入，如您所见here。但正因为如此，文件本身无法从网络浏览器访问，因此www.example.com/service-worker.js 肯定无法访问。

将文件复制到公共也不起作用

未捕获的语法错误：无法在模块外使用 import 语句

恐怕我还没有真正理解哪一部分属于JS，哪一部分属于NodeJS，哪一部分属于reactjs，哪一部分属于CRA。

所以我现在的问题是：

有没有办法获取“已翻译”service-worker.js 的“路径”（导入后，..）？

Answer 1

首先将craco添加到react项目craco

然后使用以下文件创建自定义 craco 插件

serviceWorkerRegistration.js

change this line ===>  if ("process.env.NODE_ENV === 'production' && serviceWorker" in navigator)

to ===>  if ("serviceWorker" in navigator)

craco.config.js

const cracoServiceWorkerConfig = require("./cracoServiceWorkerConfig");

module.exports = {
    plugins: [{ plugin: cracoServiceWorkerConfig }],
};

cracoServiceWorkerConfig.js

const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const path = require("path");

module.exports = {
    overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
        const isEnvDevelopment = env === "development";
        if (isEnvDevelopment) {
            const newConfig = {
                ...webpackConfig,
                plugins: [
                    ...webpackConfig.plugins,
                    isEnvDevelopment &&
                        new WorkboxWebpackPlugin.InjectManifest({
                            swSrc: path.resolve(__dirname, "src/service-worker.js"),
                            dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
                            exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
                            maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
                        }),
                ],
            };
            return newConfig;
        } else {
            return webpackConfig;
        }
        // Always return the config object.
    },
};

Answer 2

你根本做不到。 CRA-service worker 是 Javascript 浏览器功能的抽象，即 service-worker。它可以轻松编写此服务工作者，但它只会在构建时编译。 您总是可以在 JS 中编写自己的 service worker 并在 dev 中对其进行测试。但你不想。