Open
Description
Is there an existing issue for this?
- I have searched the existing issues.
Which plugins are affected?
Messaging
Which platforms are affected?
Web
Description
Firebase Cloud Messaging does not work on Safari, getToken() raises an exception. Works fine with Chrome and Firefox.
Reproducing the issue
You need a valid Firebase account and a vapidKey to replicate this issue with the instructions below.
Please carefully follow the steps described here to replicate the issue.
----Code preparation----
- Create a new Flutter application with
flutter create firetestapp --platforms web. In thewebfolder, add an emptyfirebase-messaging-sw.jsfile (I usually add a comment in this file to be on the safe side). - In the
pubspec.yamlfile, add the following dependencies
firebase_core: ^3.1.1
firebase_messaging: ^15.0.2
The same issue can be seen with firebase_core: ^2.32.0 and firebase_messaging: ^14.9.4.
4. From your prompt do a dart pub global activate flutterfire_cli. For my tests, I used firebase-tools@13.8.3
5. firebase login. Log yourself in if necessary.
6. flutterfire configure. Select your Firebase project, just select the 'web' target and let the program do its job.
7. Modify the main.dart file this way:
Add this at the start of the file:
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
and change the _incrementCounter() function to look like this (do a copy/paste):
void _incrementCounter() async {
try {
setState(() {
_text = "Calling initializeApp";
});
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform);
setState(() {
_text = "Calling getToken";
});
// Wait a bit, this works around a bug whereby the service worker may not be ready yet, see:
// https://github.com/firebase/firebase-js-sdk/issues/7575
// https://github.com/firebase/flutterfire/issues/12415
// https://github.com/firebase/flutterfire/issues/11954
await Future.delayed(const Duration(seconds: 2), () {});
const vapidKey =
'PUT_YOUR_VAPID_KEY_HERE';
// The problem happens here
var token = await FirebaseMessaging.instance.getToken(vapidKey: vapidKey);
setState(() {
_text = token ?? "null";
_counter++;
});
} catch (err) {
setState(() {
_text = err.toString();
});
}
}
----Running the code----
- Run the app on Safari. I use macOS Ventura, Safari 17.5.
- Click the '+' button at the bottom right corner of the page
- When the notification permission popup is displayed, click the 'Authorize' button.
- Surprisingly, even though the 'Authorize' button was clicked, an exception is raised:
[firebase_messaging/permission_blocked] Messaging: The notification permission was not granted and blocked instead. - Refresh the page. Click the '+' button again. This time, the notification permission dialog does not show up, suggesting the permission is granted (as it should be). It can be verified that the permission at this point is indeed granted by calling
FirebaseMessaging.instance.requestPermission(), which does returnAuthorizationStatus.granted. - At this point the authorization is granted.
getToken()now raises the following exception:[firebase_messaging/token-subscribe-failed] Messaging: A problem occurred while subscribing the user to FCM. Request contains an invalid argument.
In the Safari Developer Tools, one can see that service workers are running (both flutter's and firebase's (firebase-messaging-sw.js))
Firebase Core version
3.1.1
Flutter Version
3.22.2
Relevant Log Output
See the exception text in the code above.Flutter dependencies
Expand Flutter dependencies snippet
Dart SDK 3.4.3
Flutter SDK 3.22.2
firetestapp 1.0.0+1
dependencies:
- cupertino_icons 1.0.8
- firebase_auth 5.1.1 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta]
- firebase_core 3.1.1 [firebase_core_platform_interface firebase_core_web flutter meta]
- firebase_messaging 15.0.2 [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 sky_engine]
dev dependencies:
- flutter_lints 3.0.2 [lints]
- flutter_test 0.0.0 [flutter test_api matcher path fake_async clock stack_trace vector_math leak_tracker_flutter_testing async boolean_selector characters collection leak_tracker leak_tracker_testing material_color_utilities meta source_span stream_channel string_scanner term_glyph vm_service]
transitive dependencies:
- _flutterfire_internals 1.3.38 [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.18.0
- fake_async 1.3.1 [clock collection]
- firebase_auth_platform_interface 7.4.1 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface]
- firebase_auth_web 5.12.3 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser meta web]
- firebase_core_platform_interface 5.1.0 [collection flutter flutter_test meta plugin_platform_interface]
- firebase_core_web 2.17.2 [firebase_core_platform_interface flutter flutter_web_plugins meta web]
- firebase_messaging_platform_interface 4.5.40 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface]
- firebase_messaging_web 3.8.10 [_flutterfire_internals firebase_core firebase_core_web firebase_messaging_platform_interface flutter flutter_web_plugins meta web]
- flutter_web_plugins 0.0.0 [flutter characters collection material_color_utilities meta vector_math]
- http_parser 4.0.2 [collection source_span string_scanner typed_data]
- leak_tracker 10.0.4 [clock collection meta path vm_service]
- leak_tracker_flutter_testing 3.0.3 [flutter leak_tracker leak_tracker_testing matcher meta]
- leak_tracker_testing 3.0.1 [leak_tracker matcher meta]
- lints 3.0.0
- matcher 0.12.16+1 [async meta stack_trace term_glyph test_api]
- material_color_utilities 0.8.0 [collection]
- meta 1.12.0
- path 1.9.0
- plugin_platform_interface 2.1.8 [meta]
- sky_engine 0.0.99
- source_span 1.10.0 [collection path term_glyph]
- stack_trace 1.11.1 [path]
- stream_channel 2.1.2 [async]
- string_scanner 1.2.0 [source_span]
- term_glyph 1.2.1
- test_api 0.7.0 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph]
- typed_data 1.3.2 [collection]
- vector_math 2.1.4
- vm_service 14.2.1
- web 0.5.1Additional context and comments
The piece of code given in this issue works fine with both Google Chrome and Mozilla Firefox. Only Safari has a problem.