@quintype/framework 7.3.3-node16-with-amp-custom-labels.2 → 7.3.3-saam-tv-issue.2

package/README.md

@@ -145,30 +145,23 @@ startApp(renderApplication, CUSTOM_REDUCERS, {
 
 Steps to Integrate FCM in your project
 
-1. app/client/app.js While executing startApp in your project send the firebaseConfig via opts. `firebaseConfig` can either be an object or a function that returns the firebase config object
+1. While executing startApp in your project set enableFCM to true.
 
-Example:
+An Example
 
-```js
+```
 startApp(renderApplication,
   CUSTOM_REDUCERS,
   {
   enableServiceWorker: process.env.NODE_ENV === "production",
-  firebaseConfig: {
-    messagingSenderId: --YOUR KEY-- ,
-    projectId: --YOUR KEY--,
-    apiKey: --YOUR KEY--,
-    storageBucket: --YOUR KEY--,
-    authDomain: --YOUR KEY--,
-    appId: --YOUR KEY--,
-  }
+  fcmMessagingSenderId: (page) => <MessageSenderId> || fcmMessagingSenderId: <MessageSenderId> {(function|string)}
   ...
 })
 ```
 
 2. app/server/app.js should have the fcm configuration as below:
 
-```js
+```
 isomorphicRoutes(app, {
   ...
   fcmServerKey: (config) => <ServerKey> || fcmServerKey: <ServerKey> {(function|string)}
@@ -181,45 +174,28 @@ isomorphicRoutes(app, {
 
    Example of the script:
 
-   ```js
-    importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
-    importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");
-
-    firebase.initializeApp({
-      messagingSenderId: --YOUR KEY-- ,
-      projectId: --YOUR KEY--,
-      apiKey: --YOUR KEY--,
-      storageBucket: --YOUR KEY--,
-      authDomain: --YOUR KEY--,
-      appId: --YOUR KEY--,
-    });
-    self.addEventListener('notificationclick', (event) => {
-
-      const url = event.notification.data.url;
-      if(url) {
-        clients.openWindow(url);
-      }
-      clients.openWindow(-- YOUR Sketches Host --);
-    }, false);
-
-    const messaging = firebase.messaging();
-
-    messaging.onBackgroundMessage(function(payload) {
-      const data = payload["data"];
-      const notificationTitle = data.title || ""
-      const notificationOptions = {
-        body: data.body,
-        icon: data["hero_image_s3_url"],
-        image: data["hero_image_s3_url"],
-        data: {
-          url: data["click_action"],
-        }
-      };
-
-      self.registration.showNotification(notificationTitle,
-        notificationOptions);
-    });
-
+   ```
+       importScripts("https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js");
+       importScripts("https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js");
+       firebase.initializeApp({
+         messagingSenderId: <your message sender Id>
+       });
+       const messaging = firebase.messaging();
+       function messageHandler(payload) {
+         const data = payload["data"];
+
+         var notificationTitle = data.title;
+         var notificationOptions = {
+           body: data.body,
+           icon: data["hero_image_s3_url"],
+           image: data["hero_image_s3_url"],
+           data: data
+         };
+
+         return self.registration.showNotification(notificationTitle,
+           notificationOptions);
+       }
+       messaging.setBackgroundMessageHandler(messageHandler);
    ```
 
 4. Make sure that the page data should have config with key fcmMessageSenderId refer doStartApp function in app/client/start.js.

package/client/impl/fcm.js

@@ -1,26 +1,39 @@
-export function initializeFCM(firebaseConfig) {
+export function initializeFCM(messageSenderId) {
+  if (!messageSenderId) {
+    console.log("messageSenderId is required");
+    return false;
+  }
   Promise.all([
     import(/* webpackChunkName: "firebase-app" */ "firebase/app"),
     import(/* webpackChunkName: "firebase-messaging" */ "firebase/messaging"),
-  ])
-    .then(([firebase, m]) => {
-      const app = firebase.initializeApp({
-        messagingSenderId: firebaseConfig.messagingSenderId.toString(),
-        projectId: firebaseConfig.projectId,
-        apiKey: firebaseConfig.apiKey,
-        storageBucket: firebaseConfig.storageBucket,
-        authDomain: firebaseConfig.authDomain,
-        appId: firebaseConfig.appId,
+  ]).then(([firebase, m]) => {
+    try {
+      firebase.initializeApp({
+        messagingSenderId: messageSenderId.toString(),
       });
-      const messaging = m.getMessaging(app);
-      return m.getToken(messaging);
-      // No need to refresh token https://github.com/firebase/firebase-js-sdk/issues/4132
-    })
+      const messaging = firebase.messaging();
+      messaging.requestPermission().then(() => {
+        updateToken(firebase)
+          .then(() => {
+            messaging.onTokenRefresh(() => updateToken(firebase));
+          })
+          .catch(console.error);
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  });
+}
+
+function updateToken(firebaseInstance) {
+  return firebaseInstance
+    .messaging()
+    .getToken()
     .then((token) => {
       return registerFCMTopic(token);
     })
     .catch((err) => {
-      console.error(err);
+      throw new Error(err);
     });
 }
 

package/client/start.js

@@ -282,14 +282,10 @@ export function startApp(renderApplication, reducers, opts) {
 
     store.dispatch({ type: NAVIGATE_TO_PAGE, page, currentPath: path });
 
-    if (opts.firebaseConfig) {
-      const fcm = typeof opts.firebaseConfig === "function" ? opts.firebaseConfig(page) : opts.firebaseConfig;
-      if (fcm) {
-        const mssgSenderId = fcm.messagingSenderId;
-        const projectId = fcm.projectId;
-        const apiKey = fcm.apiKey;
-        if (mssgSenderId && projectId && apiKey) initializeFCM(fcm);
-      }
+    if (opts.fcmMessagingSenderId) {
+      const mssgSenderId =
+        typeof opts.fcmMessagingSenderId === "function" ? opts.fcmMessagingSenderId(page) : opts.fcmMessagingSenderId;
+      mssgSenderId && initializeFCM(mssgSenderId);
     }
 
     const { config: { "theme-attributes": pageThemeAttributes = {} } = {} } = page;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.3.3-node16-with-amp-custom-labels.2",
+  "version": "7.3.3-saam-tv-issue.2",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "scripts": {
@@ -27,19 +27,18 @@
   "homepage": "https://github.com/quintype/quintype-node-framework#readme",
   "dependencies": {
     "@ampproject/toolbox-optimizer": "2.8.3",
-    "@quintype/amp": "2.4.20-amp-date-translation.4",
+    "@quintype/amp": "^2.4.21-saam-tv-issue.1",
     "@quintype/backend": "^2.3.1",
     "@quintype/components": "^3.0.0",
     "@quintype/prerender-node": "^3.2.24",
     "@quintype/seo": "^1.39.0",
     "atob": "^2.1.2",
-    "babel-plugin-react-css-modules": "^5.2.6",
     "chalk": "^4.1.2",
     "cluster": "^0.7.7",
     "compression": "^1.7.4",
     "ejs": "^3.1.6",
     "express": "^4.17.1",
-    "firebase": "^9.6.10",
+    "firebase": "^6.0.2",
     "get-youtube-id": "^1.0.1",
     "grpc": "^1.21.1",
     "http-proxy": "^1.18.1",
@@ -63,6 +62,7 @@
     "@loadable/server": "^5.15.1",
     "@quintype/build": "^3.13.1",
     "babel-plugin-quintype-assets": "^1.1.1",
+    "babel-plugin-react-css-modules": "^5.2.6",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",