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

Question

我正在开发一个使用 Node.js 和 Angular JS 的 Twilio 可编程聊天 API 的应用程序。我已在 twilio 聊天实例中启用推送配置。我已经使用 firebase key 在 twilio 中创建了推送凭据。之后，我使用 chatGrant 和 twilio 凭证 sid 获取了 twilio token 。我已经包含了 firebase.js 文件并初始化了 firebase。此后，我获得了用户的许可来显示通知。这一切都很好。但是当我尝试获取设备 token 以向聊天客户端实例注册时，它失败了。这是我初始化 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);}); 似乎作用不大——它只是让 Chat 客户端在 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 )查找此 Service Worker:

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 将按预期工作。