From e3c7d3fdb8ea9ef80e84a573efd2e4032d3f7eeb Mon Sep 17 00:00:00 2001 From: Voon Ming Hann Date: Sun, 25 Nov 2018 23:37:34 +0800 Subject: [PATCH] firebase cloud messaging example (#5689) --- .../with-firebase-cloud-messaging/.gitignore | 2 + .../with-firebase-cloud-messaging/README.md | 29 +++++++++++++ .../next.config.js | 6 +++ .../package.json | 20 +++++++++ .../pages/index.js | 13 ++++++ .../with-firebase-cloud-messaging/server.js | 41 +++++++++++++++++++ .../static/firebase-messaging-sw.js | 9 ++++ .../utils/webPush.js | 32 +++++++++++++++ 8 files changed, 152 insertions(+) create mode 100644 examples/with-firebase-cloud-messaging/.gitignore create mode 100644 examples/with-firebase-cloud-messaging/README.md create mode 100644 examples/with-firebase-cloud-messaging/next.config.js create mode 100644 examples/with-firebase-cloud-messaging/package.json create mode 100644 examples/with-firebase-cloud-messaging/pages/index.js create mode 100644 examples/with-firebase-cloud-messaging/server.js create mode 100644 examples/with-firebase-cloud-messaging/static/firebase-messaging-sw.js create mode 100644 examples/with-firebase-cloud-messaging/utils/webPush.js diff --git a/examples/with-firebase-cloud-messaging/.gitignore b/examples/with-firebase-cloud-messaging/.gitignore new file mode 100644 index 00000000..1380c2e7 --- /dev/null +++ b/examples/with-firebase-cloud-messaging/.gitignore @@ -0,0 +1,2 @@ +node_modules +.next \ No newline at end of file diff --git a/examples/with-firebase-cloud-messaging/README.md b/examples/with-firebase-cloud-messaging/README.md new file mode 100644 index 00000000..e2abeba9 --- /dev/null +++ b/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. diff --git a/examples/with-firebase-cloud-messaging/next.config.js b/examples/with-firebase-cloud-messaging/next.config.js new file mode 100644 index 00000000..5ab2ef2f --- /dev/null +++ b/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) diff --git a/examples/with-firebase-cloud-messaging/package.json b/examples/with-firebase-cloud-messaging/package.json new file mode 100644 index 00000000..14171924 --- /dev/null +++ b/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" + } +} diff --git a/examples/with-firebase-cloud-messaging/pages/index.js b/examples/with-firebase-cloud-messaging/pages/index.js new file mode 100644 index 00000000..e0341cc9 --- /dev/null +++ b/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
Next.js with firebase cloud messaging.
+ } +} + +export default Index diff --git a/examples/with-firebase-cloud-messaging/server.js b/examples/with-firebase-cloud-messaging/server.js new file mode 100644 index 00000000..5dbe4a81 --- /dev/null +++ b/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}`) + }) +}) diff --git a/examples/with-firebase-cloud-messaging/static/firebase-messaging-sw.js b/examples/with-firebase-cloud-messaging/static/firebase-messaging-sw.js new file mode 100644 index 00000000..b498f10f --- /dev/null +++ b/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() diff --git a/examples/with-firebase-cloud-messaging/utils/webPush.js b/examples/with-firebase-cloud-messaging/utils/webPush.js new file mode 100644 index 00000000..41686b06 --- /dev/null +++ b/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 }