Set 1s timeout for onBackgroundMessage Hook (#3780)

* await onBackgroundMessage hook

* Create fluffy-panthers-hide.md

* block in onPush to let onBackgroundMessage to execute

* polish wording

* Update changeset

to be more specific

* Update fluffy-panthers-hide.md

* Clarify PR is about a bug fix

* Update fluffy-panthers-hide.md

Author: zwu52

.changeset/fluffy-panthers-hide.md

@@ -0,0 +1,6 @@
+---
+'@firebase/messaging': patch
+---
+
+Adds a timeout for `onBackgroundMessage` hook so that silent-push warnings won't show if `showNotification` is called inside the hook within 1s.
+This fixes the issue where the silent-push warning is displayed along with the message shown with [ServiceWorkerRegistration.showNotification](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification). 

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

@@ -15,7 +15,13 @@
  * limitations under the License.
  */
 
-import { DEFAULT_VAPID_KEY, FCM_MSG, TAG } from '../util/constants';
+import {
+  BACKGROUND_HANDLE_EXECUTION_TIME_LIMIT_MS,
+  DEFAULT_VAPID_KEY,
+  FCM_MSG,
+  FOREGROUND_HANDLE_PREPARATION_TIME_MS,
+  TAG
+} from '../util/constants';
 import { ERROR_FACTORY, ErrorCode } from '../util/errors';
 import { FirebaseMessaging, MessagePayload } from '@firebase/messaging-types';
 import {
@@ -47,8 +53,8 @@ export class SwController implements FirebaseMessaging, FirebaseService {
   private isOnBackgroundMessageUsed: boolean | null = null;
   private vapidKey: string | null = null;
   private bgMessageHandler:
-    | BgMessageHandler
     | null
+    | BgMessageHandler
     | NextFn<MessagePayload>
     | Observer<MessagePayload> = null;
 
@@ -211,6 +217,9 @@ export class SwController implements FirebaseMessaging, FirebaseService {
         this.bgMessageHandler.next(payload);
       }
     }
+
+    // wait briefly to allow onBackgroundMessage to complete
+    await sleep(BACKGROUND_HANDLE_EXECUTION_TIME_LIMIT_MS);
   }
 
   async onSubChange(event: PushSubscriptionChangeEvent): Promise<void> {
@@ -267,7 +276,7 @@ export class SwController implements FirebaseMessaging, FirebaseService {
 
       // Wait three seconds for the client to initialize and set up the message handler so that it
       // can receive the message.
-      await sleep(3000);
+      await sleep(FOREGROUND_HANDLE_PREPARATION_TIME_MS);
     } else {
       client = await client.focus();
     }

packages/messaging/src/util/constants.ts

@@ -23,12 +23,21 @@ export const DEFAULT_VAPID_KEY =
 
 export const ENDPOINT = 'https://fcmregistrations.googleapis.com/v1';
 
-/** Key of FCM Payload in Notification's data field. */
+// Key of FCM Payload in Notification's data field.
 export const FCM_MSG = 'FCM_MSG';
+export const TAG = 'FirebaseMessaging: ';
 
+// Set to '1' if Analytics is enabled for the campaign
+export const CONSOLE_CAMPAIGN_ANALYTICS_ENABLED = 'google.c.a.e';
 export const CONSOLE_CAMPAIGN_ID = 'google.c.a.c_id';
-export const CONSOLE_CAMPAIGN_NAME = 'google.c.a.c_l';
 export const CONSOLE_CAMPAIGN_TIME = 'google.c.a.ts';
-/** Set to '1' if Analytics is enabled for the campaign */
-export const CONSOLE_CAMPAIGN_ANALYTICS_ENABLED = 'google.c.a.e';
-export const TAG = 'FirebaseMessaging: ';
+export const CONSOLE_CAMPAIGN_NAME = 'google.c.a.c_l';
+
+// Due to the fact that onBackgroundMessage can't be awaited (to support rxjs), a silent push
+// warning might be shown by the browser if the callback fails to completes by the end of onPush.
+// Experiments were ran to determine the majority onBackground message clock time. This brief
+// blocking time would allow majority of the onBackgroundMessage callback to finish.
+export const BACKGROUND_HANDLE_EXECUTION_TIME_LIMIT_MS = 1000;
+
+// Preparation time for client to initialize and set up the message handler.
+export const FOREGROUND_HANDLE_PREPARATION_TIME_MS = 3000;