diff --git a/web/firebase-messaging-sw.js b/web/firebase-messaging-sw.js
index 83f438981..f28471b41 100644
--- a/web/firebase-messaging-sw.js
+++ b/web/firebase-messaging-sw.js
@@ -1,6 +1,6 @@
 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");
-
+// Initialize the Firebase app in the service worker by passing in the messagingSenderId.
 firebase.initializeApp({
     apiKey: "...",
     authDomain: "...",
@@ -9,4 +9,6 @@ firebase.initializeApp({
     storageBucket: "...",
     messagingSenderId: "...",
     appId: "...",
-});
\ No newline at end of file
+});
+// Retrieve an instance of Firebase Messaging so that it can handle background messages.
+const messaging = firebase.messaging();
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 1954fb9a1..87b007f78 100644
--- a/web/index.html
+++ b/web/index.html
@@ -58,7 +58,12 @@
         // Wait for registration to finish before dropping the <script> tag.
         // Otherwise, the browser will load the script multiple times,
         // potentially different versions.
-        navigator.serviceWorker.register('firebase-messaging-sw.js');
+        navigator.serviceWorker.register('firebase-messaging-sw.js').then(serviceWorkerRegistration => {
+          console.info('Service worker firebase-messaging was registered.');
+        }).catch(error => {
+          console.error('An error occurred while registering the service worker firebase-messaging.');
+          console.error(error);
+        });
         var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
         navigator.serviceWorker.register(serviceWorkerUrl)
           .then((reg) => {