如何将 firebase-messaging-sw.js 文件添加到 Bubble [编辑 - 文件无法识别]

Question

我知道在以下错误的常见解决方案中，我需要添加一个 firebase-messaging-sw.js 文件。由于我使用气泡 HTML 元素来运行脚本，因此我不确定如何执行此操作。我尝试使用 CDN，但我不确定我做得是否正确，或者是否有更好的方法。你觉得怎么样？

错误如下：

An error occurred while retrieving token.  FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The document is in an invalid state. (messaging/failed-service-worker-registration).
    at registerDefaultSw (registerDefaultSw.ts:43:25)
    at async updateSwReg (updateSwReg.ts:28:5)
    at async getToken$1 (getToken.ts:43:3)

检索令牌时发生错误。 FirebaseError：消息传递：我们无法注册默认服务工作线程。注册ServiceWorker失败：文档处于无效状态。 （消息传递/服务工作人员注册失败）。

这是我尝试添加文件的方法：

<script type="importmap">
{
    "imports": {
        "firebase/app": "https://www.gstatic.com/firebasejs/9.6.9/firebase-app.js",
        "firebase/messaging" :"https://www.gstatic.com/firebasejs/9.6.9/firebase-messaging.js"
    }
}
</script>
  <script type="module">
import { initializeApp } from 'firebase/app';
import { getMessaging,getToken } from "firebase/messaging";
const firebaseConfig = {
//my config
}
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

const swUrl = 'https://3b4293b7c2497062d0307b62bd49f75f.cdn.bubble.io/f1720473376600x761326990998907800/firebase-messaging-sw.js';
const sw = document.createElement('script');
sw.src = swUrl;
document.head.appendChild(sw);

getToken(messaging, {vapidKey: '...myactualvapidkey...'}).then((currentToken) => {
  if (currentToken) {
    console.log(currentToken);
  } else {
    console.log('No registration token available. Request permission to generate one.');
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
});
</script>

请注意，Service Worker 文件当前为空，因为根据 本教程，它应该使用空文件。

我也尝试了这个类似问题的答案，但它对我不起作用。我在尝试使用“firebase/messaging/sw”包时遇到导入问题。

---

编辑

我发现可以将文件添加到根目录（在“设置”-->“SEO/元标记”的末尾），但该文件似乎无法被识别。我尝试了以下方法来让服务人员得到认可：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/firebase-messaging-sw.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

但我收到此错误：

ServiceWorker 注册失败：DOMException：无法注册 ServiceWorker：文档处于无效状态。

请注意，此代码是从 iFrame 渲染的，并且文件

firebase-messaging-sw.js

为空。

Answer 1

注意： 这个答案是一项正在进行中和/或不完整的工作。我正在分享我所拥有的内容，以防它帮助其他人调查此问题。

---

<script type="module">
  (async function () {
    // note: targetting Firebase Web SDK v10.12.3
    // note: using direct import() syntax just for testing
    const { initializeApp } = await import("https://www.gstatic.com/firebasejs/10.12.3/firebase-app.js");
    const { getMessaging, getToken } = await import("https://www.gstatic.com/firebasejs/10.12.3/firebase-messaging.js");

    const firebaseConfig = {
      // my config
    }

    const app = initializeApp(firebaseConfig);
    const messaging = getMessaging(app);

    const serviceWorkerRegistration = await window.navigator.serviceWorker.register(
      (location.pathname.startsWith("/version-test") ? "/version-test" : "") + "/firebase-messaging-sw.js",
      {
        scope: "/firebase-cloud-messaging-push-scope"
      }
    );

    // note: deleted lines where service worker was attached as a script

    try {
      const currentToken = await getToken(messaging, {
        vapidKey: "<VAPID_KEY>",
        serviceWorkerRegistration
      });

      if (currentToken) {
        console.log(currentToken);
      } else {
        console.warn('No registration token available. Request permission to generate one.');
      }
    } catch (err) {
      console.error('An error occurred while retrieving token. ', err);
    }
  })()
    .catch(err => console.error("An unexpected error occurred.", err));
</script>

注意：

"/firebase-cloud-messaging-push-scope"

是 SDK 使用的 默认范围值