🐛 [Firebase messaging] Firebase messaging does not work on flutter web unless app is in foreground

[titombagwu]

Bug report

Describe the bug
Firebase messaging does not work on web unless the app is in the foreground.

Steps to reproduce

Steps to reproduce the behavior:

1. Create flutter web app, including service worker with background handler, and setup appropriate handlers in dart code (onMessage, onFirebaseAppOpened)
2. Send notification to web app while it is backgrounded. (e.g. moved to a different tab, different desktop etc)
3. Notification appears, but on click does not call any handlers whatsoever. The app cannot access data from the notification, and therefore cannot perform routing, persistence, etc.

Expected behavior

Clicking the notification should behave similarly to mobile clients and trigger (onFirebaseAppOpened, getInitialMessage, etc), so the client can handle the data appropriately. As of now, notifications are fairly useless.

---

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

[✓] Flutter (Channel stable, 2.0.5, on macOS 11.1 20C69 darwin-arm, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.55.2)
[✓] Connected device (1 available)

• No issues found!

---

Flutter dependencies

Run flutter pub deps -- --style=compact and paste the output below:

Click To Expand

Dart SDK 2.12.3
Flutter SDK 2.0.5
buffr 1.0.7+20

dependencies:
- async 2.5.0 [collection]
- auto_size_text 2.1.0 [flutter]
- bot_toast 3.0.5 [flutter]
- buffr_gen 0.0.0 [http requester]
- cached_network_image 2.5.1 [flutter flutter_cache_manager octo_image]
- characters 1.1.0
- cupertino_icons 1.0.2
- english_words 3.1.5 [string_scanner]
- ext_video_player 0.0.6 [meta video_player_platform_interface video_player_web flutter http youtube_explode_dart]
- file_picker 3.0.1 [flutter flutter_web_plugins flutter_plugin_android_lifecycle plugin_platform_interface]
- firebase_analytics 7.1.1 [firebase_analytics_platform_interface firebase_analytics_web firebase_core flutter meta]
- firebase_core 1.1.0 [firebase_core_platform_interface firebase_core_web flutter meta]
- firebase_messaging 9.1.3 [firebase_core firebase_core_platform_interface firebase_messaging_platform_interface firebase_messaging_web flutter meta]
- flutter 0.0.0 [characters collection meta typed_data vector_math sky_engine]
- flutter_app_badger 1.2.0 [flutter]
- flutter_color 1.2.0 [flutter]
- flutter_contacts 0.3.3+1 [flutter]
- flutter_inappwebview 5.3.2 [flutter]
- flutter_local_notifications 5.0.0+3 [flutter flutter_local_notifications_platform_interface platform timezone]
- font_awesome_flutter 8.12.0 [flutter]
- html 0.15.0 [csslib source_span]
- http 0.13.1 [http_parser meta path pedantic]
- image 3.0.2 [archive meta xml]
- image_gallery_saver 1.6.9 [flutter]
- intl 0.17.0 [clock path]
- intl_phone_number_input 0.7.0+2 [flutter meta libphonenumber_plugin equatable collection]
- jwt_decoder 1.0.4 [flutter]
- metadata_fetch 0.3.5 [http string_validator html]
- moor 4.2.1 [async convert collection meta pedantic stream_channel sqlite3]
- moor_flutter 4.0.0 [moor sqflite path flutter]
- package_info 2.0.0 [flutter]
- path 1.8.0
- path_provider 2.0.1 [flutter path_provider_platform_interface path_provider_macos path_provider_linux path_provider_windows]
- permission_handler 6.1.3 [flutter meta permission_handler_platform_interface]
- photo_view 0.11.1 [flutter]
- progress_indicators 0.1.5 [flutter]
- provider 4.3.3 [collection flutter nested]
- receive_sharing_intent 1.4.5 [flutter]
- rxdart 0.25.0
- scrollable_positioned_list 0.1.10 [flutter meta]
- shared_preferences 2.0.5 [meta flutter shared_preferences_platform_interface shared_preferences_linux shared_preferences_macos shared_preferences_web shared_preferences_windows]
- skeleton_loader 1.0.2+3 [flutter shimmer]
- slugid 1.1.0 [convert meta]
- sqlite3_flutter_libs 0.4.1 [flutter]
- string_validator 0.1.4
- supercharged 1.12.0 [supercharged_dart flutter]
- twirp_dart_core 1.0.0+2 [http requester]
- url_launcher 6.0.3 [flutter url_launcher_platform_interface url_launcher_linux url_launcher_macos url_launcher_windows url_launcher_web]
- url_strategy 0.2.0 [flutter_web_plugins]
- wakelock 0.1.4+2 [flutter]
- webview_flutter 1.0.7 [flutter]

dev dependencies:
- build_runner 2.0.1 [args async analyzer build build_config build_daemon build_resolvers build_runner_core code_builder collection crypto dart_style glob graphs http_multi_server io js logging meta mime package_config path pedantic pool pub_semver pubspec_parse shelf shelf_web_socket stack_trace stream_transform timing watcher web_socket_channel yaml]
- flutter_test 0.0.0 [flutter test_api path fake_async clock stack_trace vector_math async boolean_selector characters charcode collection matcher meta source_span stream_channel string_scanner term_glyph typed_data]
- moor_generator 4.2.2 [charcode collection recase meta path json_annotation stream_transform args logging cli_util moor sqlite3 sqlparser analyzer analyzer_plugin_fork source_span build build_resolvers build_config dart_style source_gen]

dependency overrides:
- http 0.13.1 [http_parser meta path pedantic]

transitive dependencies:
- _fe_analyzer_shared 21.0.0 [meta]
- analyzer 1.5.0 [_fe_analyzer_shared cli_util collection convert crypto glob meta package_config path pub_semver source_span watcher yaml pedantic]
- analyzer_plugin_fork 0.5.1 [analyzer dart_style meta pub_semver]
- archive 3.1.2 [crypto path]
- args 2.1.0
- boolean_selector 2.1.0 [source_span string_scanner]
- build 2.0.1 [analyzer async convert crypto glob logging meta path]
- build_config 1.0.0 [checked_yaml json_annotation path pubspec_parse yaml]
- build_daemon 3.0.0 [built_collection built_value http_multi_server logging pedantic path pool shelf shelf_web_socket stream_transform watcher web_socket_channel]
- build_resolvers 2.0.1 [analyzer build crypto graphs logging path package_config pool pub_semver stream_transform]
- build_runner_core 7.0.0 [async build build_config build_resolvers collection convert crypto glob graphs json_annotation logging meta path package_config pedantic pool timing watcher yaml]
- built_collection 5.0.0
- built_value 8.0.5 [built_collection collection fixnum]
- charcode 1.2.0
- checked_yaml 2.0.1 [json_annotation source_span yaml]
- cli_util 0.3.0 [meta path]
- clock 1.1.0
- code_builder 4.0.0 [built_collection built_value collection matcher meta]
- collection 1.15.0
- convert 3.0.0 [typed_data]
- crypto 3.0.1 [collection typed_data]
- csslib 0.17.0 [source_span]
- dart_style 2.0.1 [analyzer args path pub_semver source_span]
- equatable 2.0.0 [collection meta]
- fake_async 1.2.0 [clock collection]
- ffi 1.0.0
- file 6.1.0 [meta path]
- firebase 9.0.1 [http http_parser js]
- firebase_analytics_platform_interface 1.1.0 [flutter meta]
- firebase_analytics_web 0.2.0+1 [firebase firebase_analytics_platform_interface flutter flutter_web_plugins meta]
- firebase_core_platform_interface 4.0.0 [flutter meta plugin_platform_interface]
- firebase_core_web 1.0.2 [firebase_core_platform_interface flutter flutter_web_plugins js meta]
- firebase_messaging_platform_interface 2.1.3 [firebase_core flutter meta plugin_platform_interface]
- firebase_messaging_web 1.0.6 [firebase_core firebase_core_web firebase_messaging_platform_interface flutter flutter_web_plugins js meta]
- fixnum 1.0.0
- flutter_blurhash 0.5.0 [flutter meta]
- flutter_cache_manager 2.1.2 [flutter path_provider uuid http path sqflite pedantic clock file rxdart image]
- flutter_local_notifications_platform_interface 3.0.0 [flutter plugin_platform_interface]
- flutter_plugin_android_lifecycle 2.0.1 [flutter]
- flutter_web_plugins 0.0.0 [flutter js characters collection meta typed_data vector_math]
- glob 2.0.1 [async collection file path pedantic string_scanner]
- graphs 2.0.0
- http_multi_server 3.0.1 [async]
- http_parser 4.0.0 [charcode collection source_span string_scanner typed_data]
- io 1.0.0 [meta path string_scanner]
- js 0.6.3
- json_annotation 4.0.1
- libphonenumber 2.0.0 [flutter meta]
- libphonenumber_platform_interface 0.3.1 [flutter plugin_platform_interface]
- libphonenumber_plugin 0.2.3 [flutter flutter_web_plugins libphonenumber_platform_interface libphonenumber_web libphonenumber]
- libphonenumber_web 0.2.0+1 [flutter flutter_web_plugins js libphonenumber_platform_interface]
- logging 1.0.1
- matcher 0.12.10 [stack_trace]
- meta 1.3.0
- mime 1.0.0
- nested 1.0.0 [flutter]
- octo_image 0.3.0 [flutter flutter_blurhash]
- package_config 2.0.0 [path]
- path_provider_linux 2.0.0 [path xdg_directories path_provider_platform_interface flutter]
- path_provider_macos 2.0.0 [flutter]
- path_provider_platform_interface 2.0.1 [flutter meta platform plugin_platform_interface]
- path_provider_windows 2.0.1 [path_provider_platform_interface meta path flutter ffi win32]
- pedantic 1.11.0
- permission_handler_platform_interface 3.3.0 [flutter meta plugin_platform_interface]
- petitparser 4.1.0 [meta]
- platform 3.0.0
- plugin_platform_interface 2.0.0 [meta]
- pool 1.5.0 [async stack_trace]
- process 4.2.1 [file path platform]
- pub_semver 2.0.0 [collection]
- pubspec_parse 1.0.0 [checked_yaml collection json_annotation pub_semver yaml]
- recase 4.0.0
- requester 1.0.0 [http]
- shared_preferences_linux 2.0.0 [flutter file meta path path_provider_linux shared_preferences_platform_interface]
- shared_preferences_macos 2.0.0 [shared_preferences_platform_interface flutter]
- shared_preferences_platform_interface 2.0.0 [flutter]
- shared_preferences_web 2.0.0 [shared_preferences_platform_interface flutter flutter_web_plugins meta]
- shared_preferences_windows 2.0.0 [shared_preferences_platform_interface flutter file meta path path_provider_platform_interface path_provider_windows]
- shelf 1.1.1 [async collection http_parser path stack_trace stream_channel]
- shelf_web_socket 1.0.1 [shelf stream_channel web_socket_channel]
- shimmer 1.1.2 [flutter]
- sky_engine 0.0.99
- source_gen 1.0.0 [analyzer async build dart_style glob meta path pedantic source_span]
- source_span 1.8.0 [charcode collection path term_glyph]
- sqflite 2.0.0+3 [flutter sqflite_common path]
- sqflite_common 2.0.0+2 [synchronized path meta]
- sqlite3 1.1.1 [collection ffi meta]
- sqlparser 0.15.0 [meta collection source_span charcode]
- stack_trace 1.10.0 [path]
- stream_channel 2.1.0 [async]
- stream_transform 2.0.0
- string_scanner 1.1.0 [charcode source_span]
- supercharged_dart 1.4.0
- synchronized 3.0.0
- term_glyph 1.2.0
- test_api 0.2.19 [async boolean_selector collection meta path source_span stack_trace stream_channel string_scanner term_glyph matcher]
- timezone 0.7.0 [path]
- timing 1.0.0 [json_annotation]
- typed_data 1.3.0 [collection]
- url_launcher_linux 2.0.0 [flutter]
- url_launcher_macos 2.0.0 [flutter]
- url_launcher_platform_interface 2.0.2 [flutter plugin_platform_interface]
- url_launcher_web 2.0.0 [url_launcher_platform_interface meta flutter flutter_web_plugins]
- url_launcher_windows 2.0.0 [flutter]
- uuid 3.0.4 [crypto]
- vector_math 2.1.0
- video_player_platform_interface 2.2.0 [flutter meta]
- video_player_web 0.1.4+1 [flutter flutter_web_plugins meta video_player_platform_interface]
- watcher 1.0.0 [async path pedantic]
- web_socket_channel 2.0.0 [async crypto stream_channel]
- win32 2.0.5 [ffi]
- xdg_directories 0.2.0 [meta path process]
- xml 5.1.0 [collection meta petitparser]
- yaml 3.1.0 [collection source_span string_scanner]
- youtube_explode_dart 1.9.3+2 [collection equatable html http http_parser json_annotation meta xml]```

</details>

---

[markusaksli-nc]

Reproducible with

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.1.1
  firebase_messaging: ^9.1.4

  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>

flutter doctor -v

[√] Flutter (Channel master, 2.3.0-2.0.pre.240, on Microsoft Windows [Version 10.0.19041.985], locale et-EE)
    • Flutter version 2.3.0-2.0.pre.240 at C:\Development\flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e364e30c90 (10 hours ago), 2021-05-16 19:40:00 -0700
    • Engine revision 193be59942
    • Dart version 2.14.0 (build 2.14.0-edge.a527411e5100a0a4f48c4009087a1b988aa784af)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at C:\Users\marku\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: C:\Users\marku\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\202.7351085\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\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.7)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.7.30621.155
    • Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 4.2.0)
    • Android Studio at C:\Users\marku\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\202.7351085
    • Flutter plugin version 56.0.2
    • Dart plugin version 202.8488
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] Connected device (4 available)
    • SM G950F (mobile) • ce12171c51cc001c03 • android-arm64  • Android 9 (API 28)
    • Windows (desktop) • windows            • windows-x64    • Microsoft Windows [Version 10.0.19041.985]
    • Chrome (web)      • chrome             • web-javascript • Google Chrome 90.0.4430.212
    • Edge (web)        • edge               • web-javascript • Microsoft Edge 90.0.818.62

• No issues found!

[titombagwu]

Hi, any updates on this issue?

[russellwheatley]

Hey @titombagwu, we have not found a way to communicate with the Flutter app from the background. We have documented the workaround here for web applications, and we will update the documentation once we have a solution 🙏