FCM getToken无法为范围错误注册ServiceWorker Flutter网站

如何解决FCM getToken无法为范围错误注册ServiceWorker Flutter网站

在我的应用程序中，对于Web版本，我使用软件包firebase 7.3.0。我首先以单例实例化Firebase应用程序，然后像在应用程序中使用的所有其他Firebase服务一样实例化Messaging（）：

App firebase = FirebaseWeb.instance.app;
  var firebaseMessaging = messaging();

我有subscribeToTopic()方法，该方法首先需要调用getMessagingToken()方法，因为它需要返回的令牌，但是getMessagingToken()会引发错误：

PlatformPushNotificationWeb.getMessagingToken() getToken error: FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:5000/firebase-cloud-messaging-push-scope') with script ('http://localhost:5000/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration). (messaging/failed-service-worker-registration)

Future<String> getMessagingToken() async {
    String token;

    await firebaseMessaging.requestPermission().timeout(Duration(seconds: 5)).then((value) {
      print('PlatformPushNotificationWeb.getMessagingToken() requestPermission result is $value');
    }).catchError((e) => print('PlatformPushNotificationWeb.getMessagingToken() requestPermission error: $e'));

    await firebaseMessaging.getToken().then((value) {
      print(' PlatformPushNotificationWeb.getMessagingToken() token is $value');
      token = value;
    }).catchError((e) => print('PlatformPushNotificationWeb.getMessagingToken() getToken error: $e'));

    return token;
  }

我检查了一下，并在我的index.html firebase消息中找到了

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>fixit cloud biking</title>
  <!--  <meta name="google-signin-client_id" content="YOUR_GOOGLE_SIGN_IN_OAUTH_CLIENT_ID.apps.googleusercontent.com">-->
  <meta name="google-signin-client_id" content="xxxxxxxxxx.apps.googleusercontent.com">
<!--  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
</head>
<!--<body>-->
<body id="app-container">
<script src="main.dart.js?version=45" type="application/javascript"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-remote-config.js"></script>
</body>
</html>

现在，错误显示为'http://localhost:5000/firebase-messaging-sw.js'而不是firebase-messaging.js作为index.html file. I noticed that Messaging（）is not directly available through firebase app instance as it would be for other services,for Storage would be firebase.storage（）`中的库。我是否想为消息传递设置其他内容？

解决方法

发现这篇文章https://medium.com/@rody.davis.jr/how-to-send-push-notifications-on-flutter-web-fcm-b3e64f1e2b76，并发现确实存在Web上Firebase Cloud Messaging的更多设置。

在index.html中，有一个脚本要添加：

<script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load",function () {
    // navigator.serviceWorker.register("/flutter_service_worker.js");
    navigator.serviceWorker.register("/firebase-messaging-sw.js");
  });
}
</script>

在项目web文件夹中创建一个新文件firebase-messaging-sw.js，在其中导入firebase程序包（匹配index.html版本），初始化Firebase应用程序，并设置BackgroundMessageHandler。如果我使用单例初始化Firebase应用，则实例化messaging()会引发语法错误，因此需要使用所有参数进行初始化，否则在后台消息上将无法使用。

importScripts("https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.15.5/firebase-messaging.js");

//Using singleton breaks instantiating messaging()
// App firebase = FirebaseWeb.instance.app;


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',});

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    const promiseChain = clients
        .matchAll({
            type: "window",includeUncontrolled: true
        })
        .then(windowClients => {
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                windowClient.postMessage(payload);
            }
        })
        .then(() => {
            return registration.showNotification("New Message");
        });
    return promiseChain;
});
self.addEventListener('notificationclick',function (event) {
    console.log('notification received: ',event)
});

现在，getToken()和subscribeToTopic()和onMessage()可以按预期工作。

在我的集团中，我在onMessage()上有一个侦听器，当Stream<Map<String,Dynamic>>（在设备上）从以下位置返回时，该流（在网络上）转换为firebase_messaging：

Stream<Map<String,dynamic>> onMessage()  async* {

    print('PlatformPushNotificationWeb.onMessage() started');
    handleData(Payload payload,EventSink<Map<String,dynamic>> sink) {
        Map<String,dynamic> message = {
          'notification': {
            'title': payload.notification.title,'body': payload.notification.body,'sound': true
          },'data': payload.data
        };
      sink.add(message);
    }

    final transformer = StreamTransformer<Payload,Map<String,dynamic>>.fromHandlers(
        handleData: handleData);

    yield* firebaseMessaging.onMessage.transform(transformer);
  }

希望它对他人有帮助。干杯。

事实证明，您只需在 Web 项目文件夹中创建一个名为 firebase-messaging-sw.js 的文件，并在其中注释掉一些 JavaScript，然后 Flutter 就会停止抱怨。

同时修改 index.html：

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener("load",function () {
    navigator.serviceWorker.register("firebase-messaging-sw.js");
  });

  window.addEventListener('flutter-first-frame',function () {
    navigator.serviceWorker.register('flutter_service_worker.js');
  });
}

我真的不知道为什么会这样，但这比放置一些无用的 JavaScript 代码要好。

FCM getToken无法为范围错误注册ServiceWorker Flutter网站

如何解决FCM getToken无法为范围错误注册ServiceWorker Flutter网站

解决方法

相关推荐