Fix FCM in Chrome Extensions (#1597)

Prevents sending messages to Chrome Extension background pages, which are always considered visible in Chrome. That causes our SDK try to send the message to the background page and to not show the notification.

I'll also investigate if background page being considered a visible client is a bug in Chrome itself, and try to get it fixed if I can. But for now this seems like a good workaround.

Author: mmermerkaya

packages/messaging/src/controllers/sw-controller.ts

@@ -333,7 +333,11 @@ export class SwController extends BaseController {
     const clientList = await getClientList();
 
     return clientList.some(
-      (client: WindowClient) => client.visibilityState === 'visible'
+      (client: WindowClient) =>
+        client.visibilityState === 'visible' &&
+        // Ignore chrome-extension clients as that matches the background pages
+        // of extensions, which are always considered visible.
+        !client.url.startsWith('chrome-extension://')
     );
   }
 

packages/messaging/test/sw-controller.test.ts

@@ -400,13 +400,16 @@ describe('Firebase Messaging > *SwController', () => {
 
           return [
             {
-              visibilityState: 'hidden'
+              visibilityState: 'hidden',
+              url: 'https://example.com'
             },
             {
-              visibilityState: 'prerender'
+              visibilityState: 'prerender',
+              url: 'https://firebase.com'
             },
             {
-              visibilityState: 'unloaded'
+              visibilityState: 'unloaded',
+              url: 'https://google.com'
             }
           ];
         }
@@ -428,16 +431,20 @@ describe('Firebase Messaging > *SwController', () => {
 
           return [
             {
-              visibilityState: 'hidden'
+              visibilityState: 'hidden',
+              url: 'https://example.com'
             },
             {
-              visibilityState: 'prerender'
+              visibilityState: 'prerender',
+              url: 'https://firebase.com'
             },
             {
-              visibilityState: 'unloaded'
+              visibilityState: 'unloaded',
+              url: 'https://google.com'
             },
             {
-              visibilityState: 'visible'
+              visibilityState: 'visible',
+              url: 'https://mozilla.org'
             }
           ];
         }
@@ -448,6 +455,29 @@ describe('Firebase Messaging > *SwController', () => {
       const result = await swController.hasVisibleClients_();
       expect(result).to.equal(true);
     });
+
+    it('should return false when a chrome-extension client is visible', async () => {
+      const clients = {
+        matchAll: async (options: Partial<ClientQueryOptions>) => {
+          expect(options).to.deep.equal({
+            type: 'window',
+            includeUncontrolled: true
+          });
+
+          return [
+            {
+              visibilityState: 'visible',
+              url: 'chrome-extension://example.com'
+            }
+          ];
+        }
+      };
+      sandbox.stub(self, 'clients').value(clients);
+
+      const swController = new SwController(app);
+      const result = await swController.hasVisibleClients_();
+      expect(result).to.equal(false);
+    });
   });
 
   describe('getWindowClient_', () => {