如何将FCM service worker与workboxWebpackPlugin默认serviceworker合并

Question

我在我的react应用程序中使用FCM，现在我正在开发与PWA相同的应用程序。所以我添加了workboxWebpackPlugin来生成它的默认SW。我需要合并firebaseSW.js和serviceworker.js，因为它们都在同一个作用域上运行。我遇到的另一个挑战是，只有当用户接受通知权限时，才会安装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 option将其包含在内：

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