如何将 FCM 服务工作者与 workboxWebpackPlugin 默认服务工作者合并

Question

我在我的反应应用程序中使用 FCM，现在我正在开发与 PWA 相同的应用程序。 所以我添加了 workboxWebpackPlugin 来生成它的默认软件。 我需要合并 firebaseSW.js 和 serviceworker.js，因为它们都在同一个 scope 上运行。 我遇到的另一个挑战是 firebaseSW.js 将仅在用户接受通知权限时安装，但其他服务工作者将在应用程序开始运行时安装。 我将不胜感激任何提示和指导。

这是我的 workboxWebpackPlugin 设置

 new WorkboxWebpackPlugin.GenerateSW({
        clientsClaim: true,
        exclude: [/\.map$/, /asset-manifest\.json$/],
        // importWorkboxFrom: "cdn",
        navigateFallback: "/static-files/fallback.html",
        navigateFallbackBlacklist: [
          // Exclude URLs starting with /_, as they're likely an API call
          new RegExp("^/_"),
          // Exclude URLs containing a dot, as they're likely a resource in
          // public/ and not a SPA route
          new RegExp("/[^/]+\\.[^/]+$"),
        ],
        importsDirectory: __dirname + "/../build/static-files",
        swDest: "static-files/sw.js",
      }),

这是我的 FCM 软件设置

importScripts("https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.2.3/firebase-messaging.js");

firebase.initializeApp(FIREBASE_CONFIG);

firebase.messaging();

Answer 1

最直接的方法是将 FCM 代码包含在一个独立的 JavaScript 文件中，称为fcm-sw.js或类似的文件，从与您生成的服务工作者相同的目录中提供服务，然后使用GenerateSW插件中的importScripts选项来包括它：

new WorkboxWebpackPlugin.GenerateSW({
  importScripts: ['fcm-sw.js'],
  // ...other options...
}),