🐛 [firebase_messaging] Failed to register a ServiceWorker for scope ('http://localhost:/firebase-cloud-messaging-push-scope') with script ('http://localhost/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html')

aliaksei-liavonik commented 1 year ago

Bug report

Describe the bug

I've made a setup with flutterfire config, where currentPlatform was generated with FirebaseOptions for the web. However, I'm encountering an error when trying to get the token: "Error during device token receiving on app init: FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost/firebase-cloud-messaging-push-scope') with script ('http://localhost/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html'). (messaging/failed-service-worker-registration)."

Sample project

run flutter create {project_name} remove all platforms except web run the script on the root of the project

#!/bin/bash

flutterfire config \
  --project=YOUR_PROJECT \
  --platforms=web \
  --out=lib/firebase_options/firebase_options_tst.dart \
  --yes

Update main.dart

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:{project_name}/firebase_options/firebase_options_tst.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  FirebaseMessaging.instance.getToken(); // give or not give vapidKey error will be the same

  runApp(const MaterialApp(
    home: Scaffold(body: Center(child: Text('text'))),
  ));
}

Flutter doctor

Run flutter doctor and paste the output below:

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.13.5, on macOS 13.6 22G120 darwin-arm64, locale en-US) [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) ✗ cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 14.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2022.2) [✓] VS Code (version 1.82.2) [✓] Connected device (3 available) [✓] Network resources

! Doctor found issues in 1 category.

Click To Expand

``` Error: FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:50252/firebase-cloud-messaging-push-scope') with script ('http://localhost:50252/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html'). (messaging/failed-service-worker-registration). 2 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 327:10 createErrorWithStack dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 337:28 _throw dart-sdk/lib/core/errors.dart 120:5 throwWithStackTrace dart-sdk/lib/async/zone.dart 1386:11 callback dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:15 ```

Flutter dependencies

Click To Expand

``` Dart SDK 3.1.2 Flutter SDK 3.13.5 tmp 1.0.0+1 dependencies: - cupertino_icons 1.0.6 - firebase_analytics 10.5.1 [firebase_analytics_platform_interface firebase_analytics_web firebase_core firebase_core_platform_interface flutter] - firebase_core 2.17.0 [firebase_core_platform_interface firebase_core_web flutter meta] - firebase_crashlytics 3.3.7 [firebase_core firebase_core_platform_interface firebase_crashlytics_platform_interface flutter stack_trace] - firebase_messaging 14.6.9 [firebase_core firebase_core_platform_interface firebase_messaging_platform_interface firebase_messaging_web flutter meta] - flutter 0.0.0 [characters collection material_color_utilities meta vector_math web sky_engine] dev dependencies: - flutter_lints 2.0.3 [lints] - flutter_test 0.0.0 [flutter test_api matcher path fake_async clock stack_trace vector_math async boolean_selector characters collection material_color_utilities meta source_span stream_channel string_scanner term_glyph web] transitive dependencies: - _flutterfire_internals 1.3.7 [collection firebase_core firebase_core_platform_interface flutter meta] - async 2.11.0 [collection meta] - boolean_selector 2.1.1 [source_span string_scanner] - characters 1.3.0 - clock 1.1.1 - collection 1.17.2 - fake_async 1.3.1 [clock collection] - firebase_analytics_platform_interface 3.7.1 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface] - firebase_analytics_web 0.5.5+1 [_flutterfire_internals firebase_analytics_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins js] - firebase_core_platform_interface 4.8.0 [collection flutter flutter_test meta plugin_platform_interface] - firebase_core_web 2.8.0 [firebase_core_platform_interface flutter flutter_web_plugins js meta] - firebase_crashlytics_platform_interface 3.6.7 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - firebase_messaging_platform_interface 4.5.8 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface] - firebase_messaging_web 3.5.8 [_flutterfire_internals firebase_core firebase_core_web firebase_messaging_platform_interface flutter flutter_web_plugins js meta] - flutter_web_plugins 0.0.0 [flutter characters collection material_color_utilities meta vector_math web] - js 0.6.7 [meta] - lints 2.1.1 - matcher 0.12.16 [async meta stack_trace term_glyph test_api] - material_color_utilities 0.5.0 [collection] - meta 1.9.1 - path 1.8.3 - plugin_platform_interface 2.1.6 [meta] - sky_engine 0.0.99 - source_span 1.10.0 [collection path term_glyph] - stack_trace 1.11.0 [path] - stream_channel 2.1.1 [async] - string_scanner 1.2.0 [source_span] - term_glyph 1.2.1 - test_api 0.6.0 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph] - vector_math 2.1.4 - web 0.1.4-beta ```

danagbemava-nc commented 1 year ago

Hi @aliaksei-liavonik, some extra setup is required for you to get this working properly.

Create a firebase-messaging-sw.js file in your web directory and add the following. Replace the placeholder values with the values for your firebase project.

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

firebase.initializeApp({
  apiKey: 'xxx',
  appId: 'xxx,
  messagingSenderId: 'xxx',
  projectId: 'xxx',
  authDomain: 'xxx',
  databaseURL:'xxx',
  storageBucket: 'xxx',
  measurementId: 'xxx',
});
// Necessary to receive background messages:
const messaging = firebase.messaging();

// Optional:
messaging.onBackgroundMessage((m) => {
  console.log("onBackgroundMessage", m);
});

aliaksei-liavonik commented 1 year ago

@danagbemava-nc , I know that this will be working, but what is the point of generation if I still need to provide these things by hand, I have 5 flavors in the app, so doing every change in the Firebase I need to make manual changes to these keys. So why flutterfire config doesn't generate firebase-messaging-sw.js? Also, I didn't find out how to make firebase-messaging-sw.js with flavors, can I specify the path to the firebase-messaging-sw.js file?

P.S. Maybe I'm missing something, but after a couple of days, I didn't find a way to generate this file, firebase is trying to automate all these things by flutterfire but it seems there is still some lack of generated stuff on the web.

danagbemava-nc commented 1 year ago

Hi @aliaksei-liavonik, the cli for generating the files lives in a different repo. There's an issue requesting that it generate the file in https://github.com/invertase/flutterfire_cli/issues/215 and there's also an issue requesting flavor support for the cli in https://github.com/invertase/flutterfire_cli/issues/14.

Kindly follow these issues for updates. For now you'll have to manually make those changes yourself.

I'll be closing this since the cli tool lives in a different repo.

Thank you

firebase / flutterfire