[firebase_messaging]: Firebase service worker gets re-registered with default URL even though previous, custom registration took place

[andynewman10]

Is there an existing issue for this?

• I have searched the existing issues.

Which plugins are affected?

Messaging

Which platforms are affected?

Web

Context

From what I understand of the web service worker documentation, even after flutter_service_worker.js has been registered with the top level scope /, firebase-messaging-sw.js, which is the default service worker URL of the Firebase JS SDK and Flutterfire, will not be downloaded through flutter_service_worker.js. I understand that all service workers are downloaded either regularly or through the browser cache. Because of this, firebase-messaging-sw.js may be cached and updated versions may be ignored by web clients. And because of this, the developer needs to append a version number to force the browser to fetch the updated version : firebase-messaging-sw.js?v=VERSION.

Expected results

Flutterfire automatically registers firebase-messaging-sw.js for the developer.

The following documentation explains how to perform custom registration of the Firebase service worker:

https://firebase.google.com/docs/cloud-messaging/flutter/receive#web

From there, it is theoretically possible to append a v=VERSION query string parameter to the URL.

Actual results

Even though the following code is executed:

<script src="flutter_bootstrap.js" async>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('firebase-messaging-sw.js?v=VERSION', {
        scope: '/firebase-cloud-messaging-push-scope',
      });
    });
  }
</script>

Flutterfire and/or the Firebase JS SDK seems to re-register 'firebase-messaging-sw.js' afterwards, with the same scope. Therefore, the previous registration is lost and of no use.

Reproducing the issue

• create a Flutter application and set up Flutterfire
• make sure you create a firebase-messaging-sw.js in your web folder (even an empty file)
• open your browser dev tools, Network pane, and run your application.
• firebase-messaging-sw.js is either downloaded or obtained from the browser cache. It is not obtained from flutter_service_worker.js.
• now perform custom registration. as indicated above. You will see that the custom registration code is executed successfully, the Firebase JS SDK seems to override things and re-register the service worker with the default URL 'firebase-messaging-sw.js', with no appended version number.

Firebase Core version

3.2.0

Flutter Version

3.24.3

[SelaseKay]

Hi @andynewman10, thanks for the report. However, I need some clarification. I couldn't find any reference in the documentation about attaching version numbers to firebase-messaging-sw.js. If I missed something, could you please provide more context?

[andynewman10]

@SelaseKay as the Flutter application gets updated on its web site, resources need to be re-downloaded by web browsers. The Flutter service worker handles all the caching except for its own URL, flutter_service_worker.js. To make sure the latest flutter_service_worker.js file gets retrieved by the browser clients, a version number is typically appended to the URL. This way, there is no need for cumbersome server-side no-caching directives.

For Firebase and Flutterfire, this also remains true : the browser client needs to make sure the latest version of firebase-messaging-sw.js is retrieved. For this to happen, the client typically wants to append a version number to the URL here as well. That's what I'm doing in the registration code above, but Flutterfire overrides that registration and does it again.