可编程聊天的 Twilio 推送通知失败

Question

我正在开发一个使用 node.js 和 angular js 的 Twilio 可编程聊天 API 的应用程序。我在 twilio 聊天实例中启用了推送配置。我已经使用 firebase 密钥在 twilio 中创建了推送凭证。在此之后，我使用带有 twilio 凭证 sid 的 chatGrant 获取了 twilio 令牌。我已经包含了 firebase.js 文件并初始化了 firebase。在此之后，我获得了用户的许可以显示通知。这一切都很好。但是当我试图让设备令牌注册到 chatclientinstance 时，它​​会失败。 这是我初始化firebase并获得许可的代码，

 var config = {
      apiKey: "my_key",
      authDomain: "example.firebaseapp.com",
      databaseURL: "https://example.firebaseio.com",
      projectId: "example",
      storageBucket: "example.appspot.com",
      messagingSenderId: "861813283864"
    };
    if (firebase) {
      firebase.initializeApp(config);
      console.log("firbase initialized.");
    }

    if (firebase && firebase.messaging()) {
      // requesting permission to use push notifications
      firebase.messaging().requestPermission().then(() => {
        // getting FCM token
        console.log("got permission for showing notification.");
        firebase.messaging().getToken().then((fcmToken) => {
          // continue with Step 7 here 
          console.log("got fcm token.",fcmToken);
          // ... 
          // ... 
        }).catch((err) => {
          // can't get token
          console.log("error in getting token for notification.",err);
        });
      }).catch((err) => {
        // can't request permission or permission hasn't been granted to the web app by the user
        console.log("error in getting permission for notification.",err);
      });
    } else {
      // no Firebase library imported or Firebase library wasn't correctly initialized
      console.log("no Firebase library imported or Firebase library wasn't correctly initialized");
    }

}

我在控制台中得到了这个，

firbase initialized.
got permission for showing notification.
The script has an unsupported MIME type ('text/html').
Failed to load resource: net::ERR_INSECURE_RESPONSE                 firebase-messaging-sw.js 
error in getting token for notification. 
e {code: "messaging/failed-serviceworker-registration", message: "Messaging: We are unable to register the default s…). (messaging/failed-serviceworker-registration).", browserErrorMessage: "Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').", stack: "FirebaseError: Messaging: We are unable to registe…o/polyfills.bundle.js:3152:35)↵    at <anonymous>"}

我已经按照 twilio 文档在 PUSH NOTIFICATIONS ON WEB 上所说的做了所有事情

但我没有在我的服务器中添加“firebase-messaging-sw.js”。是否需要添加此 js 文件或 twilio 会自动创建并初始化它？

请为我找到解决方案。提前致谢。

Answer 1

我也觉得这很令人困惑，因为文档没有解释通知支持的实际作用。您包含的代码（来自他们的聊天 SDK 文档）只做两件基本的事情：

• client.setPushRegistrationId('fcm', fcmToken) 确保浏览器已注册 FCM 服务并请求 Twilio 可编程聊天通知。
• messaging.onMessage(function(payload{client.handlePushNotification(payload);}); 似乎做的很少——它只是让聊天客户端在 FCM 收到消息时发出一个事件。

它不做的是创建一个监听通知的服务。这就是丢失文件的来源。首先，在某处创建此文件firebase-messaging-sw.js。我使用了 Firebase 文档中的以下示例：

// firebase sample code snippets from https://firebase.google.com/docs/cloud-messaging/js/client
importScripts('https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.0.4/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the essagingSenderId.
console.log("Initializing service worker...");
firebase.initializeApp({
  messagingSenderId: "<FILL IN FROM YOUR FIREBASE CONFIG>"
});

// Retrieve an instance of Firebase Messaging so that it can handle background messages.
var messaging = firebase.messaging();

// Listen for push messages and create notifications
messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  var notificationTitle = "My Notification Title";
  var notificationOptions = {
    body: "My Notification Text"
  };

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

这是一个基本的服务工作者，它监听通知然后显示它们。

接下来，从错误消息中，您可能已经注意到 FCM 正在寻找要从您的 Web 根目录提供的文件。如果不是这种情况，请稍微调整您的 Twilio 代码以在指定的 URL（来自 https://stackoverflow.com/a/41701594/4006592）处查找此服务工作者：

var messaging = firebase.messaging();
if (messaging) {
  navigator.serviceWorker.register("<URL FOR firebase-messaging-sw.js>").then(function(registration) {
    messaging.useServiceWorker(registration);

    // requesting permission to use push notifications
    messaging.requestPermission().then(function() {
      ...
    });
  });
}

通过上述更改，您可以明确指定 firebase-messaging-sw.js 的位置，然后 FCM/Twilio Chat 将按预期工作。