Question

我正在使用FCM网络应用通知向浏览器发送通知。我的代码如下。

<script>
var config = {
    apiKey: "<API-KEY>",
    authDomain: "<AUTH-DOMAIN>.firebaseapp.com",
    databaseURL: "<DATABASE>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDERID>",
  };
  firebase.initializeApp(config);

const messaging = firebase.messaging();
    messaging.requestPermission()
            .then(function(){
                console.log("GRANTED");
                console.log(messaging.getToken());
                return messaging.getToken();
            })
            .then(function(token){
                console.log(token);
            })
            .catch(function(err){
                console.log('Error Occurred.' + err)
            });

messaging.setBackgroundMessageHandler(function(payload){
  const title = "Hello World";
  const option = { body: payload.data.status }
  return self.registration.showNotification(title,option);
});

</script>

它正常工作并在chrome的localhost服务器上生成令牌但在我的托管服务器上无法正常工作。

我的托管服务器出现以下错误。

错误发生.FirebaseError：消息：我们无法注册默认服务工作者。手术不安全。（消息/失败-serviceworker注册）。

如果有人对此有任何想法，请指导我。

Answer 1

很可能HTTPd没有正确地提供带有内容类型application/javascript标头的JS文件。无法在没有任何实时URL的情况下验证该怀疑 - 如果是，可以为服务器配置MIME类型 - 或者作为快速修复：使用PHP设置缺少的内容类型HTTP标头。

Answer 2

尝试将以下示例添加到您的 firebase-messaging-sw.js 中，并将 firebase-messaging-sw.js 放入 react 应用程序的公共文件夹中。

// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing the generated config
var firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Answer 3

这是因为服务工作者可以在https或localhost上工作。因此，如果您的网站没有SSL证书服务工作人员将无法工作。

Answer 4

在根文件夹中创建 firebase-messaging-sw.js ，并将代码粘贴到其中。

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('../firebase-messaging-sw.js')
  .then(function(registration) {
    console.log('Registration successful, scope is:', registration.scope);
  }).catch(function(err) {
    console.log('Service worker registration failed, error:', err);
  });
}

Answer 5

我使用Amazon CloudFront托管生产环境。当它在localhost上运行时，我在生产（https）时收到此错误。在查看了Amazon S3存储桶（针对CloudFront）之后，我注意到在生产部署期间未生成服务工作者文件。只需修改部署脚本即可解决此问题。

因此，请确保已生成服务工作者文件（Chrome DevTools-> Sources-> Filesystem）。

Answer 6

您需要确保“firebase-messaging-sw.js”已存在于您的公共文件夹中

Answer 7

我也收到该错误，因为我的 appId 中缺少 firebase.initializeApp({})，而您的配置中也缺少它。

FirebaseError：我们无法注册默认服务工作者

7 个答案: