CRA-Typescript PWA 与 Workbox 进行后台同步？答案

【问题标题】：CRA-Typescript PWA with Workbox for Background Sync?CRA-Typescript PWA 与 Workbox 进行后台同步？
【发布时间】：2020-07-15 18:24:51
【问题描述】：

有人可以为我指出正确的方向吗？如何将 Workbox 与服务工作者一起使用以在 CRA 打字稿 PWA 中实现后台同步？我已经在互联网上搜索了几个星期，但仍然没有找到好的教程或分步指南。

是否不可能让 Service Worker 将 Workbox 与 Typescript 一起使用？

【问题讨论】：

标签： typescript progressive-web-apps workbox react-typescript

【解决方案1】：

默认情况下，Create react 应用程序不支持此功能，但是您可以让它与 craco 之类的库一起使用，它允许自定义 create-react-app 配置而不会弹出。

就我而言，我可以通过向 CRA webpack 配置添加额外的插件来使其工作。

const path = require('path');
const { InjectManifest } = require('workbox-webpack-plugin');
const { addPlugins } = require('@craco/craco');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  webpack: {
    configure: (reactAppConfig) => {
      whenProd(() => {
        // Technically CRA copies files using fs
        // but those are not seen by webpack and InjectMainfest
        // I couldn't get those to be included in __WB_MANIFEST
        // with the plugin.

        // "workbox-build" would work using globPatterns
        // but it should be run after CRA has compiled everything
        // and it's not clear how to make sure of that
    
        reactAppConfig.plugins = reactAppConfig.plugins.concat([
          new CopyPlugin({
            patterns: [
              {
                from: 'public',
                to: './',
                globOptions: {
                  dot: false, // ignore hidden files
                  ignore: [
                    '*.txt',
                    '*.map',
                  ],
                },
              }],
          }),
          new InjectManifest({
            swSrc: path.resolve(__dirname, 'src', 'service-worker', 'my-worker.ts'),
            swDest: path.resolve(__dirname, 'build', 'sw.js'), // output js
            include: [ // Stuff to include in __WB_MANIFEST
              /\.(html|js|css|json)$/,
              /static\/.*\.(png|gif|jpg|svg|jpeg)$/
            ],
            exclude: [
              /asset-manifest\.json/,
            ],
            maximumFileSizeToCacheInBytes: 2 * 1024 * 1024, // 2 MB
          })
        ]);
      });
      return reactAppConfig;
    },
  },
};

您还需要确保使用正确的配置编译您的打字稿工作文件，您可以通过在工作目录中添加 tsconfig.json 来做到这一点（即src/service-worker/）

{
  "compilerOptions": {
    "composite": true,
    "lib": [
      "esnext",
      "webworker"
    ],
  },
  "include": [
    "./**/*.ts"
  ]
}

并确保您的根 typescript 配置文件指向此工作子项目

{
  // .... All the other options
  "exclude": [
    //...
    "./src/service-worker"
  ],

  // point to the service worker subproject
  "references": [{ "path": "./src/service-worker" }]
}

如有错误欢迎指出。

【讨论】：

【解决方案2】：

自从 CRA 4.0 发布以来，您可以简单地创建

src/service-worker.js

应用程序根目录下的文件，CRA会自动编译。

查看this

【讨论】：

*更新：使用 CRA 4.0 及更高版本，您可以删除这些黑客并使用标准方式创建服务工作者：read