firebase cloud messaging example (#5689)

examples/with-firebase-cloud-messaging/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.next

examples/with-firebase-cloud-messaging/README.md

@@ -0,0 +1,29 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-firebase-cloud-messaging)
+
+## How to run
+
+Install it and run:
+
+```bash
+npm install
+npm run build
+npm run dev
+```
+
+## Set your send id
+
+set your `messagingSenderId` in `static/firebase-messaging-sw.js` and `utils/webPush.js`
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## How to send a notification
+
+https://firebase.google.com/docs/cloud-messaging/js/first-message,
+
+## The idea behind the example
+
+To demo how to implement firebase cloud messaging to send web push notification in next.js.

examples/with-firebase-cloud-messaging/next.config.js

@@ -0,0 +1,6 @@
+const withOffline = require('next-offline')
+
+const nextConfig = {
+  // your nextjs config
+}
+module.exports = withOffline(nextConfig)

examples/with-firebase-cloud-messaging/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "with-firebase-cloud-messaging",
+	"version": "1.0.0",
+	"scripts": {
+		"dev": "node server.js",
+		"build": "next build",
+		"start": "NODE_ENV=production node server.js"
+	},
+	"dependencies": {
+		"express": "^4.14.0",
+		"firebase": "^5.5.8",
+		"localforage": "^1.7.3",
+		"next": "latest",
+		"react": "^16.0.0",
+		"react-dom": "^16.0.0"
+	},
+	"devDependencies": {
+		"next-offline": "^3.0.10"
+	}
+}

examples/with-firebase-cloud-messaging/pages/index.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+import { firebaseCloudMessaging } from '../utils/webPush'
+
+class Index extends Component {
+  componentDidMount () {
+    firebaseCloudMessaging.init()
+  }
+  render () {
+    return <div>Next.js with firebase cloud messaging.</div>
+  }
+}
+
+export default Index

examples/with-firebase-cloud-messaging/server.js

@@ -0,0 +1,41 @@
+const express = require('express')
+const next = require('next')
+
+const port = parseInt(process.env.PORT, 10) || 3000
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+  const server = express()
+
+  server.get('/service-worker.js', (req, res) => {
+    app.serveStatic(req, res, './.next/service-worker.js')
+  })
+
+  const serviceWorkers = [
+    {
+      filename: 'service-worker.js',
+      path: './.next/service-worker.js'
+    },
+    {
+      filename: 'firebase-messaging-sw.js',
+      path: './static/firebase-messaging-sw.js'
+    }
+  ]
+
+  serviceWorkers.forEach(({ filename, path }) => {
+    server.get(`/${filename}`, (req, res) => {
+      app.serveStatic(req, res, path)
+    })
+  })
+
+  server.get('*', (req, res) => {
+    return handle(req, res)
+  })
+
+  server.listen(port, err => {
+    if (err) throw err
+    console.log(`> Ready on http://localhost:${port}`)
+  })
+})

examples/with-firebase-cloud-messaging/static/firebase-messaging-sw.js

@@ -0,0 +1,9 @@
+/* global importScripts, firebase */
+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 sender id'
+})
+
+firebase.messaging()

examples/with-firebase-cloud-messaging/utils/webPush.js

@@ -0,0 +1,32 @@
+import 'firebase/messaging'
+import firebase from 'firebase/app'
+import localforage from 'localforage'
+
+const firebaseCloudMessaging = {
+  tokenInlocalforage: async () => {
+    return localforage.getItem('fcm_token')
+  },
+
+  init: async function () {
+    firebase.initializeApp({
+      messagingSenderId: 'your sender id'
+    })
+
+    try {
+      if ((await this.tokenInlocalforage()) !== null) {
+        return false
+      }
+
+      const messaging = firebase.messaging()
+      await messaging.requestPermission()
+      const token = await messaging.getToken()
+
+      localforage.setItem('fcm_token', token)
+      console.log('fcm_token', token)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+export { firebaseCloudMessaging }