如何將 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...
}),