javascript - FirebaseError：消息：我们无法注册默认服务工作者。无法为范围注册 ServiceWorker

Question

我正在实现一个应该接收推送通知的 PWA。

我已经在 firebase 上创建了项目，并按照指南设置了一个 javascript 客户端（https://firebase.google.com/docs/cloud-messaging/js/client）。

但是我收到以下错误：

FirebaseError：消息：我们无法注册默认服务工作者。无法为范围注册 ServiceWorker

这是我的代码..

索引.html

      <script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-app.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-analytics.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-firestore.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js"></script>
      
      <script>
        var firebaseConfig = {
            apiKey: "XXXXXXXX",
            authDomain: "XXXXXXXX",
            databaseURL: "XXXXXXXX",
            projectId: "XXXXXXXX",
            storageBucket: "XXXXXXXX",
            messagingSenderId: "XXXXXXXX",
            appId: "XXXXXXXX",
            measurementId: "XXXXXXXX"
        };

        firebase.initializeApp(firebaseConfig);
        
        const messaging = firebase.messaging();
    
messaging.usePublicVapidKey("BJnbl7kVXLgjkM3U93a4QLwpYaryQAfcD_QFWZTDXpN89b7Q4aA43QBZZMAss9LdjMvc0tFkrj2EKRuHeGt4YzE");
        
        // Get Instance ID token. Initially this makes a network call, once retrieved
        // subsequent calls to getToken will return from cache.
        messaging.getToken().then((currentToken) => {
          if (currentToken) {
            sendTokenToServer(currentToken);
            updateUIForPushEnabled(currentToken);
          } else {
            // Show permission request.
            console.log('No Instance ID token available. Request permission to generate one.');
            // Show permission UI.
            updateUIForPushPermissionRequired();
            setTokenSentToServer(false);
          }
        }).catch((err) => {
          console.log('An error occurred while retrieving token. ', err);
          showToken('Error retrieving Instance ID token. ', err);
          setTokenSentToServer(false);
        });
      </script>
      
    </body>

firebase-messaging-sw.js

// Import and configure the Firebase SDK
// These scripts are made available when the app is served or deployed on Firebase Hosting
// If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup
importScripts('https://www.gstatic.com/firebasejs/7.21.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js');

const messaging = firebase.messaging();

/**
 * Here is is the code snippet to initialize Firebase Messaging in the Service
 * Worker when your app is not hosted on Firebase Hosting.

 // [START initialize_firebase_in_sw]
 // Give the service worker access to Firebase Messaging.
 // Note that you can only use Firebase Messaging here, other Firebase libraries
 // are not available in the service worker.
 importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-messaging.js');

 // Initialize the Firebase app in the service worker by passing in
 // your app's Firebase config object.
 // https://firebase.google.com/docs/web/setup#config-object
 firebase.initializeApp({
   apiKey: 'api-key',
   authDomain: 'project-id.firebaseapp.com',
   databaseURL: 'https://project-id.firebaseio.com',
   projectId: 'project-id',
   storageBucket: 'project-id.appspot.com',
   messagingSenderId: 'sender-id',
   appId: 'app-id',
   measurementId: 'G-measurement-id',
 });

 // Retrieve an instance of Firebase Messaging so that it can handle background
 // messages.
 const messaging = firebase.messaging();
 // [END initialize_firebase_in_sw]
 **/


// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
// [START background_handler]
messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});
// [END background_handler] 

我该如何解决这个错误？

谢谢！

标签： javascriptfirebasepush-notificationfirebase-cloud-messagingprogressive-web-apps