Open andynewman10 opened 1 month ago
@andynewman10 Thank you for reporting this issue. I've tested the example app found here: https://github.com/firebase/flutterfire/tree/master/packages/firebase_messaging/firebase_messaging/example, and I found that after clicking on request permissions and refreshing the page, it works without issues. Can you try and see if the example app works for you, or if you still face the same issue?
Your example does not work on my setup when using Safari.
All tests done on macOS Ventura 13.6.7, Safari 17.5
@andynewman10 Thank you for reporting this issue. I've tested the example app found here: https://github.com/firebase/flutterfire/tree/master/packages/firebase_messaging/firebase_messaging/example, and I found that after clicking on request permissions and refreshing the page, it works without issues. Can you try and see if the example app works for you, or if you still face the same issue?
@TarekkMA how do you run the web page on Safari? Flutter for VS code cannot run or start a debug session on Safari, at least not directly. To test the page on Safari, I start a debug session on Chrome (with F5), which starts the development web server on, eg. http://localhost:45502. I then leave the page open in Chrome, and open the page separately with Safari.
Note that no matter how I test the page with Safari (requesting permissions then refreshing the page, like you ; or using a desktop shortcut to validate permissions beforehand, which I prefer to do), I get the same error.
The problem happens even if I change my locale to US english, system-wide.
I tried with Firefox and Chrome and, again, there is no issue with these browsers.
You can reproduce the issue with the example app by running the following command
flutter run --web-port 45502 -d web-server
Now test the page on Safari. Either just surf on the page then refresh it, or create a link on your desktop by dragging the URL from the browser address bar to the desktop.
The Javascript console with display the following errors
- Failed to load resource: the server responded with a status of 400 () - https://fcmregistrations.googleapis.com/v1/projects/flutterfire-e2e-tests/registrations
- Unhandled Promise Rejection: Error - throw core_patch.dart 265
Using Flutter 3.22.2, firebase_core 3.1.1, firebase_messaging 5.1.1.
In the Javascript console, if I click on https://fcmregistrations.googleapis.com/v1/projects/flutterfire-e2e-tests/registrations I get:
Request:
{"web":{"endpoint":"","auth":"","p256dh":"","applicationPubKey":"BNKkaUWxyP_yC_lki1kYazgca0TNhuzt2drsOrL6WrgGbqnMnr8ZMLzg_rSPDm6HKphABS0KzjPfSqCXHXEd06Y"}}
Response:
{
"error:" {
"code": 400,
"message": "Request contains an invalid argument.",
"status", "INVALID_ARGUMENT"
}
}
Full request headers:
:method: POST
:scheme: https
:authority: fcmregistrations.googleapis.com
:path: /v1/projects/flutterfire-e2e-tests/registrations
Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9
Connection: keep-alive
Content-Length: 155
Content-Type: application/json
Host: fcmregistrations.googleapis.com
Origin: http://localhost:49555
Referer: http://localhost:49555/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15
x-goog-api-key: AIzaSyB7wZb2tO1-Fs6GbDADUSTs2Qs3w08Hovw
x-goog-firebase-installations-auth: FIS eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjE6NDA2MDk5Njk2NDk3OndlYjo4N2UyNWU1MWFmZTk4MmNkMzU3NGQwIiwiZXhwIjoxNzIxMTEzMjk2LCJmaWQiOiJkOEpKd0duZ1Yxd08wXzBTVmFCdl85IiwicHJvamVjdE51bWJlciI6NDA2MDk5Njk2NDk3fQ.AB2LPV8wRQIgHlR_4Fc5-U4Tno_hu29HTPX07VKSia4CtJEVwJ5rUs8CIQDYFRLfE_keKW8MF2SpESOu96vXy5ae3gH1aBODFu6ZhQ
I tried disabling CORS restrictions in Safari, didn't make any difference
I see a similar issue has been reported here:
https://github.com/firebase/firebase-js-sdk/issues/6620#issuecomment-2049382148
Thank you for the update
@TarekkMA Can I ask you what macOS version you are using? Are you by chance using macOS Sonoma?
Yes, and this is my macos version: 14.5 (23F79)
Thanks for your quick reply. @andreififiita, like me, is using macOS Ventura 13.6.x. I wonder if this detail plays a role in the problem we observe. We are both using Safari 17.4/17.5.
@TarekkMA @andynewman10 That is correct, i am using macOS Ventura 13.6.7. So we can confirm that this issue appears in Safari on macOS Sonoma as well? I am curious if anyone had managed to make it work properly on Sonoma.
@TarekkMA @andreififiita I suspect the problem might only affect Ventura. It would be a valuable piece of information for the firebase-js-sdk people to know if the problem is Ventura-related. Unfortunately I just have one Mac with Ventura, with no possibility to upgrade (MacBook A1708 from 2017).
Is there an existing issue for this?
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----
flutter create firetestapp --platforms web
. In theweb
folder, add an emptyfirebase-messaging-sw.js
file (I usually add a comment in this file to be on the safe side).pubspec.yaml
file, add the following dependenciesThe same issue can be seen with
firebase_core: ^2.32.0
andfirebase_messaging: ^14.9.4
.dart pub global activate flutterfire_cli
. For my tests, I usedfirebase-tools@13.8.3
firebase login
. Log yourself in if necessary.flutterfire configure
. Select your Firebase project, just select the 'web' target and let the program do its job.Add this at the start of the file:
and change the
_incrementCounter()
function to look like this (do a copy/paste):----Running the code----
[firebase_messaging/permission_blocked] Messaging: The notification permission was not granted and blocked instead
.FirebaseMessaging.instance.requestPermission()
, which does returnAuthorizationStatus.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
Flutter dependencies
Expand
Flutter dependencies
snippet```yaml 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.1 ```
Additional 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.