Add messaging sw snippet (#199)

Author: samtstern

messaging-next/service-worker.js

@@ -40,6 +40,21 @@ function initInSw() {
 
 function onBackgroundMessage() {
   // [START messaging_on_background_message]
-  // TODO(snippet): This snippet is not yet translated to the @exp SDK
+  const { getMessaging } = require("firebase/messaging");
+  const { onBackgroundMessage } = require("firebase/messaging/sw");
+
+  const messaging = getMessaging();
+  onBackgroundMessage(messaging, (payload) => {
+    console.log('[firebase-messaging-sw.js] Received background message ', payload);
+    // Customize notification here
+    const notificationTitle = 'Background Message Title';
+    const notificationOptions = {
+      body: 'Background Message body.',
+      icon: '/firebase-logo.png'
+    };
+   
+    self.registration.showNotification(notificationTitle,
+      notificationOptions);
+  });
   // [END messaging_on_background_message]
 }

snippets/messaging-next/service-worker/messaging_on_background_message.js

@@ -4,5 +4,20 @@
 // To make edits to the snippets in this file, please edit the source
 
 // [START messaging_on_background_message_modular]
-// TODO(snippet): This snippet is not yet translated to the @exp SDK
+import { getMessaging } from "firebase/messaging";
+import { onBackgroundMessage } from "firebase/messaging/sw";
+
+const messaging = getMessaging();
+onBackgroundMessage(messaging, (payload) => {
+  console.log('[firebase-messaging-sw.js] Received background message ', payload);
+  // Customize notification here
+  const notificationTitle = 'Background Message Title';
+  const notificationOptions = {
+    body: 'Background Message body.',
+    icon: '/firebase-logo.png'
+  };
+
+  self.registration.showNotification(notificationTitle,
+    notificationOptions);
+});
 // [END messaging_on_background_message_modular]