Flutter web - Firebase cloud messaging - running OK on localhost, not when I upload to firebase hosting

[davidsomekh]

I am trying to implement FCM for a flutter web project.

When I run the project in the localhost, it works fine. But when I upload it to firebase hosting (After running flutter build web), I am getting errors.

On the main.dart file, I am trying to get the device token:

    final fcmToken = await FirebaseMessaging.instance.getToken(
          vapidKey:
              "my_key");

However, I am getting this error in the console:

main.dart.js:4430 Uncaught MissingPluginException(No implementation found for method Messaging#getToken on channel plugins.flutter.io/firebase_messaging)

I added the firebase messaging package in my pubspec.yaml file:

firebase_messaging: ^14.2.1

Additionally, I added the service worker code as explained here: https://firebase.flutter.dev/docs/messaging/usage/

Here is my index.html script code:

 <script>
          window.addEventListener("load", function (ev) {
            // Download main.dart.js

            if ("serviceWorker" in navigator) {
              navigator.serviceWorker.register("/firebase-messaging-sw.js");
            }

            _flutter.loader
              .loadEntrypoint({
                serviceWorker: {
                  serviceWorkerVersion: serviceWorkerVersion,
                },
              })
              .then(function (engineInitializer) {
                return engineInitializer.initializeEngine();
              })
              .then(function (appRunner) {
                return appRunner.runApp();
              });
          });
        </script>

It looks like a problem with the firebase_messaging package, but I'm using the latest one. Also what I can't understand is why it's working in localhost but not production.

Thoughts anyone?

[davidsomekh]

Flutter doctor report:

flutter doctor -v [√] Flutter (Channel stable, 3.3.8, on Microsoft Windows [Version 10.0.19045.2486], locale en-GB) • Flutter version 3.3.8 on channel stable at C:\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 52b3dc25f6 (3 months ago), 2022-11-09 12:09:26 +0800 • Engine revision 857bd6b74c • Dart version 2.18.4 • DevTools version 2.15.0

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at C:\Users\david.somekh\AppData\Local\Android\sdk • Platform android-33, build-tools 30.0.3 • ANDROID_HOME = C:\Users\david.somekh\AppData\Local\Android\sdk • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174) • All Android licenses accepted.

[√] Chrome - develop for the web • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Professional 2022 17.2.0) • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Professional • Visual Studio Professional 2022 version 17.2.32505.173 • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 4.2) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] VS Code (version 1.74.3) • VS Code at C:\Users\david.somekh\AppData\Local\Programs\Microsoft VS Code

[√] Connected device (3 available) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.2486] • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.76 • Edge (web) • edge • web-javascript • Microsoft Edge 109.0.1518.61

[√] HTTP Host Availability • All required HTTP hosts are available

• No issues found! PS C:\apps\keep> flutter doctor -v [√] Flutter (Channel stable, 3.3.8, on Microsoft Windows [Version 10.0.19045.2486], locale en-GB) • Flutter version 3.3.8 on channel stable at C:\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 52b3dc25f6 (3 months ago), 2022-11-09 12:09:26 +0800 • Engine revision 857bd6b74c • Dart version 2.18.4 • DevTools version 2.15.0

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at C:\Users\david.somekh\AppData\Local\Android\sdk • Platform android-33, build-tools 30.0.3 • ANDROID_HOME = C:\Users\david.somekh\AppData\Local\Android\sdk • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174) • All Android licenses accepted.

[√] Chrome - develop for the web • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Professional 2022 17.2.0) • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Professional • Visual Studio Professional 2022 version 17.2.32505.173 • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 4.2) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] VS Code (version 1.74.3) • VS Code at C:\Users\david.somekh\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.58.0

[√] Connected device (3 available) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.2486] • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.76 • Edge (web) • edge • web-javascript • Microsoft Edge 109.0.1518.61

[√] HTTP Host Availability • All required HTTP hosts are available

• No issues found!

[darshankawar]

Additionally, I added the service worker code as explained here: https://firebase.flutter.dev/docs/messaging/usage/

@davidsomekh This document link is archive and not updated anymore. Can you try https://firebase.google.com/docs/cloud-messaging/flutter/client#web, follow the instructions from there and see if they help in your case ?

[davidsomekh]

@darshankawar

Yes, I tried also the setup with these instructions - same result.

[davidsomekh]

Here is my pubspec.yaml:

cupertino_icons: ^1.0.2 firebase_auth: ^4.1.2 google_sign_in: ^5.0.3 firebase_core: ^2.2.0 shared_preferences: ^2.0.16 flutter_local_notifications: ^9.3.1 cloud_firestore: ^4.0.5 font_awesome_flutter: ^10.2.1 provider: ^6.0.4 cloud_functions: ^4.0.7 rxdart: ^0.27.7 firebase_messaging: ^14.2.1

[darshankawar]

Thanks for the update. I tried with plugin example and uploaded to firebase hosting which worked properly without any issues. Can you try the same ? Looking at the error, it seems to be a config issue rather than the plugin, because it is unable to register the said method.

[davidsomekh]

Running flutter clean solved the problem - you can close the issue