FCM getToken() Failed to register a ServiceWorker for scope error Flutter web

user_9663497 0
Viewed 13512

In my app, for the web version, I use package firebase 7.3.0. I first instantiate Firebase app with a singleton and then instantiate Messaging() as I have done with all other Firebase services I use in my app :

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

I have subscribeToTopic() method which first calls getMessagingToken() method as it needs the returned token, but getMessagingToken() throws the error:

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;
  }

I checked and in my index.html firebase-messaging is present:

<!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>

Now, the error says 'http://localhost:5000/firebase-messaging-sw.js' not firebase-messaging.js as the library in the index.htmlfile. I noticed that Messaging()is not directly available through firebase app instance as it would be for other services, for Storage would befirebase.storage()`. Am I missing to setup something else for messaging?

flutter-web firebase-cloud-messaging firebase
2 Answers

Found this article https://medium.com/@rody.davis.jr/how-to-send-push-notifications-on-flutter-web-fcm-b3e64f1e2b76 and discovered that indeed there is a bit more setup for Firebase Cloud Messaging on web.

In index.html there is a script to add:

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

In project web folder create a new file firebase-messaging-sw.js where you import the firebase packages (match index.html versions), initialize Firebase app , and set the BackgroundMessageHandler. If I initialize Firebase app with the singleton then instantiating messaging() throws a syntax error, so it needs to be initialized with all parameters, otherwise on background messages won't work.

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

So now, getToken() and subscribeToTopic() and onMessage() work as expected.

In my bloc I have a listener on onMessage() which (on web) Stream I convert to a Stream<Map<String,Dynamic>> as the firebase_messaging(on device) returns from :

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

Hope it helps others. Cheers.

user_96634970

It turns out you can just create a file called firebase-messaging-sw.js in your web project folder and have some commented out JavaScript in it and then Flutter stops complaining.

Also modify index.html with this:

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

I really don't know why this works, but it's better than having some useless JavaScript code laying around.

user_81741910
Related