diff --git a/examples/with-firebase-cloud-messaging/.gitignore b/examples/with-firebase-cloud-messaging/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..1380c2e74b6272d36ccac357b69eee67c44fd58e --- /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 0000000000000000000000000000000000000000..e2abeba9de9ed0f74ca3f8dcc4a5dd9f39a1d3e1 --- /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 0000000000000000000000000000000000000000..5ab2ef2f28db4fd57cfbc4a96cccc81479657bdd --- /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 0000000000000000000000000000000000000000..14171924498b355cd6e8a08b350f438b82b8b31c --- /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 0000000000000000000000000000000000000000..e0341cc9e138437b2afc077b2943f0f7c0c5144e --- /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 0000000000000000000000000000000000000000..5dbe4a81833f3f3cea827850d44d3c42bcdc8b53 --- /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 0000000000000000000000000000000000000000..b498f10ffbb11ab539e5c974a98153e6eeb68e22 --- /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 0000000000000000000000000000000000000000..41686b0625ea70bb54ddc1f4d926a2897ef7c373 --- /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 }