test(messaging): update tests app for messaging web (#12332)

russellwheatley · web-flow · commit c42b57cedbaf · 2024-02-15T10:10:09.000Z
diff --git a/tests/integration_test/firebase_messaging/firebase_messaging_e2e_test.dart b/tests/integration_test/firebase_messaging/firebase_messaging_e2e_test.dart
@@ -12,7 +12,7 @@ import 'package:integration_test/integration_test.dart';
 import 'package:tests/firebase_options.dart';
 
 // ignore: do_not_use_environment
-const bool skipManualTests = bool.fromEnvironment('CI');
+const bool skipTestsOnCI = bool.fromEnvironment('CI');
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -110,7 +110,8 @@ void main() {
               AuthorizationStatus.notDetermined,
             );
           },
-          skip: !kIsWeb,
+          // This requires interaction with the browser's permission dialog, it no longer returns `notDetermined` on web
+          skip: true,
         );
       });
 
@@ -146,7 +147,7 @@ void main() {
               expect(result, isA<String>());
           });
         },
-        skip: skipManualTests,
+        skip: skipTestsOnCI,
       ); // only run for manual testing
 
       group('deleteToken()', () {
@@ -162,7 +163,7 @@ void main() {
               expect(token2, isA<String>());
               expect(token1, isNot(token2));
           },
-          skip: skipManualTests,
+          skip: skipTestsOnCI,
         ); // only run for manual testing
       });
 
diff --git a/tests/web/firebase-messaging-sw.js b/tests/web/firebase-messaging-sw.js
@@ -0,0 +1,21 @@
+importScripts("https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js");
+importScripts("https://www.gstatic.com/firebasejs/10.7.0/firebase-messaging-compat.js");
+
+firebase.initializeApp({
+  apiKey: 'AIzaSyB7wZb2tO1-Fs6GbDADUSTs2Qs3w08Hovw',
+  appId: '1:406099696497:web:87e25e51afe982cd3574d0',
+  messagingSenderId: '406099696497',
+  projectId: 'flutterfire-e2e-tests',
+  authDomain: 'flutterfire-e2e-tests.firebaseapp.com',
+  databaseURL:
+      'https://flutterfire-e2e-tests-default-rtdb.europe-west1.firebasedatabase.app',
+  storageBucket: 'flutterfire-e2e-tests.appspot.com',
+  measurementId: 'G-JN95N1JV2E',
+});
+// Necessary to receive background messages:
+const messaging = firebase.messaging();
+
+// Optional:
+messaging.onBackgroundMessage((m) => {
+  console.log("onBackgroundMessage", m);
+});
diff --git a/tests/web/index.html b/tests/web/index.html
@@ -33,32 +33,33 @@
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
-  <!-- This script installs service_worker.js to provide PWA functionality to
-       application. For more information, see:
-       https://developers.google.com/web/fundamentals/primers/service-workers -->
-  <script>
-    var serviceWorkerVersion = null;
-    var scriptLoaded = false;
-    function loadMainDartJs() {
-      if (scriptLoaded) {
-        return;
+<script>
+      var serviceWorkerVersion = null;
+      var scriptLoaded = false;
+      function loadMainDartJs() {
+        if (scriptLoaded) {
+          return;
+        }
+        scriptLoaded = true;
+        var scriptTag = document.createElement('script');
+        scriptTag.src = 'main.dart.js';
+        scriptTag.type = 'application/javascript';
+        document.body.append(scriptTag);
       }
-      scriptLoaded = true;
-      var scriptTag = document.createElement('script');
-      scriptTag.src = 'main.dart.js';
-      scriptTag.type = 'application/javascript';
-      document.body.append(scriptTag);
-    }
 
-    if ('serviceWorker' in navigator) {
-      // Service workers are supported. Use them.
-      window.addEventListener('load', function () {
-        // Wait for registration to finish before dropping the <script> tag.
-        // Otherwise, the browser will load the script multiple times,
-        // potentially different versions.
-        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
-        navigator.serviceWorker.register(serviceWorkerUrl)
-          .then((reg) => {
+      if ('serviceWorker' in navigator) {
+        // Service workers are supported. Use them.
+        window.addEventListener('load', function () {
+          // Register Firebase Messaging service worker.
+          navigator.serviceWorker.register('firebase-messaging-sw.js');
+
+          // Wait for registration to finish before dropping the <script> tag.
+          // Otherwise, the browser will load the script multiple times,
+          // potentially different versions.
+          var serviceWorkerUrl =
+            'flutter_service_worker.js?v=' + serviceWorkerVersion;
+
+          navigator.serviceWorker.register(serviceWorkerUrl).then((reg) => {
             function waitForActivation(serviceWorker) {
               serviceWorker.addEventListener('statechange', () => {
                 if (serviceWorker.state == 'activated') {
@@ -70,7 +71,7 @@
             if (!reg.active && (reg.installing || reg.waiting)) {
               // No active web worker and we have installed or are installing
               // one for the first time. Simply wait for it to activate.
-              waitForActivation(reg.installing || reg.waiting);
+              waitForActivation(reg.installing ?? reg.waiting);
             } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
               // When the app updates the serviceWorkerVersion changes, so we
               // need to ask the service worker to update.
@@ -84,21 +85,21 @@
             }
           });
 
-        // If service worker doesn't succeed in a reasonable amount of time,
-        // fallback to plaint <script> tag.
-        setTimeout(() => {
-          if (!scriptLoaded) {
-            console.warn(
-              'Failed to load app from service worker. Falling back to plain <script> tag.',
-            );
-            loadMainDartJs();
-          }
-        }, 4000);
-      });
-    } else {
-      // Service workers not supported. Just drop the <script> tag.
-      loadMainDartJs();
-    }
+          // If service worker doesn't succeed in a reasonable amount of time,
+          // fallback to plaint <script> tag.
+          setTimeout(() => {
+            if (!scriptLoaded) {
+              console.warn(
+                'Failed to load app from service worker. Falling back to plain <script> tag.'
+              );
+              loadMainDartJs();
+            }
+          }, 4000);
+        });
+      } else {
+        // Service workers not supported. Just drop the <script> tag.
+        loadMainDartJs();
+      }
   </script>
 </body>
 </html>
