时间戳

首页 > 解决方案 > 如何在开发模式下使用 service-worker

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

问题描述

我正在使用create-react-app 4和cra-template-pwa（来源）

默认情况下，看起来 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。这是有道理的，因为它使用进口，你可以在这里看到。但正因为如此，文件本身无法从网络浏览器访问，因此www.example.com/service-worker.js肯定无法访问。

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

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

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

所以我现在的问题是：

有没有办法获得“翻译”的“路径” service-worker.js（进口后，..）？

标签： javascriptreactjsnode-modulescreate-react-appservice-worker

解决方案

首先将 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.
    },
};

推荐阅读