Merge pull request #56 from lupas/simplifyFirebaseMessagingInit

Simplify firebase messaging init

Author: lupas

docs/getting-started/README.md

@@ -65,7 +65,9 @@ modules: [
             'welcome_message': 'Welcome'
           }
         },
-        initAuth: null
+        // Experimental Features - use with caution:
+        initAuth: null,
+        initMessaging: false
       }
     ]
   ],

docs/options/README.md

@@ -108,7 +108,7 @@ You can customize how remoteConfig should be initialized with the following sett
 ## initAuth (EXPERIMENTAL)
 
 ::: warning
-This feature has not been fully tested for all cases, use it with care. It might get changed completely in future updates. If you have any issues with the initAuth feature please let us know [here](https://github.com/lupas/nuxt-fire/issues/53) and help us improve it.
+EXPERIMENTAL FEATURE: This feature has not been fully tested for all cases, use it with care. It might get changed completely in future updates. Please only use it for test purposes. If you have any issues with the initAuth feature please let us know [here](https://github.com/lupas/nuxt-fire/issues/53) and help us improve it.
 :::
 
 Set up SSR-ready onAuthStateChanged() without any effort.
@@ -131,3 +131,26 @@ When onAuthStateChanged() gets triggered by Firebase, the mutations/actions defi
 
 **onErrorMutation & onErrorAction:**  
 (error)
+
+## initMessaging (EXPERIMENTAL)
+
+::: warning
+EXPERIMENTAL FEATURE: This feature has not been fully tested for all cases, use it with care. It might get changed completely in future updates. Please only use it for test purposes. If you have any issues with the initAuth feature please let us know [here](https://github.com/lupas/nuxt-fire/issues) and help us improve it.
+:::
+
+Set up Firebase Messaging without any boilerplate code.
+
+```js
+initMessaging: true
+```
+
+Setting the \__initMessaging_ flag to true automatically creates a service worker called `firebase-messaging-sw.js` i nyour static folder. The service worker is fully configured for FCM with the newest Firebase scripts.
+
+The option does so far:
+
+- Create a service worker.
+
+Planned features:
+
+- Create a plugin that initializes messaging & listeners.
+- Maybe add helper functions that make the implementation as easy as possible.

index.js

@@ -74,6 +74,21 @@ export default function nuxtFire(moduleOptions) {
     )
   }
 
+  // Add Messaging Service Worker
+  if (options.initMessaging) {
+    this.addTemplate({
+      src: path.resolve(__dirname, 'templates/firebase-messaging-sw.js'),
+      fileName: path.resolve(
+        this.options.dir.static,
+        'firebase-messaging-sw.js'
+      ),
+      options: {
+        firebaseVersion: '7.3.0',
+        messagingSenderId: options.config[options.currentEnv].messagingSenderId
+      }
+    })
+  }
+
   // Add Helper File
   this.addTemplate({
     src: path.resolve(__dirname, 'helpers/index.js'),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-fire",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "license": "MIT",
   "description": "Intergrate Firebase into your Nuxt project.",
   "main": "index.js",

templates/firebase-messaging-sw.js

@@ -0,0 +1,60 @@
+const options = <%= serialize(options) %>
+const version = options.firebaseVersion
+const messagingSenderId = options.messagingSenderId
+
+// Get ENV && set messagingSenderId
+if (this.location.hostname === 'localhost') {
+  importScripts(
+    'https://www.gstatic.com/firebasejs/' + version + '/firebase-app.js'
+  )
+  importScripts(
+    'https://www.gstatic.com/firebasejs/' + version + '/firebase-messaging.js'
+  )
+  firebase.initializeApp({
+    messagingSenderId: messagingSenderId
+  })
+} else {
+  // Only works on Firebase hosting!
+  // other option, add PRD messagingSenderId = '337088779183' and do the same
+  importScripts('/__/firebase/' + version + '/firebase-app.js')
+  importScripts('/__/firebase/' + version + '/firebase-messaging.js')
+  importScripts('/__/firebase/init.js')
+}
+
+// Retrieve an instance of Firebase Messaging so that it can handle background
+// messages.
+const messaging = firebase.messaging()
+
+messaging.setBackgroundMessageHandler(function(payload) {
+  const data = payload.data
+  const notificationTitle = data.title
+  const notificationOptions = {
+    body: data.message,
+    icon: data.iconPath,
+    vibrate: [200, 100, 200, 100, 200, 100, 200],
+    actions: [
+      // See MARK 1 -> First item is always taken as click action
+      {
+        title: 'Visit',
+        action: data.clickPath
+      }
+    ]
+  }
+  return self.registration.showNotification(
+    notificationTitle,
+    notificationOptions
+  )
+})
+
+self.addEventListener('notificationclick', function(e) {
+  const notification = e.notification
+  // MARK 1 -> always takes first item
+  const clickAction = notification.actions[0].action
+  const action = e.action
+  if (action === 'close') {
+    notification.close()
+  } else {
+    clients.openWindow(clickAction)
+    notification.close()
+  }
+})