mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
firebase cloud messaging example (#5689)
This commit is contained in:
parent
21d5aebd53
commit
e3c7d3fdb8
2
examples/with-firebase-cloud-messaging/.gitignore
vendored
Normal file
2
examples/with-firebase-cloud-messaging/.gitignore
vendored
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules
|
||||||
|
.next
|
29
examples/with-firebase-cloud-messaging/README.md
Normal file
29
examples/with-firebase-cloud-messaging/README.md
Normal file
|
@ -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.
|
6
examples/with-firebase-cloud-messaging/next.config.js
Normal file
6
examples/with-firebase-cloud-messaging/next.config.js
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
const withOffline = require('next-offline')
|
||||||
|
|
||||||
|
const nextConfig = {
|
||||||
|
// your nextjs config
|
||||||
|
}
|
||||||
|
module.exports = withOffline(nextConfig)
|
20
examples/with-firebase-cloud-messaging/package.json
Normal file
20
examples/with-firebase-cloud-messaging/package.json
Normal file
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
13
examples/with-firebase-cloud-messaging/pages/index.js
Normal file
13
examples/with-firebase-cloud-messaging/pages/index.js
Normal file
|
@ -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
|
41
examples/with-firebase-cloud-messaging/server.js
Normal file
41
examples/with-firebase-cloud-messaging/server.js
Normal file
|
@ -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}`)
|
||||||
|
})
|
||||||
|
})
|
|
@ -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()
|
32
examples/with-firebase-cloud-messaging/utils/webPush.js
Normal file
32
examples/with-firebase-cloud-messaging/utils/webPush.js
Normal file
|
@ -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 }
|
Loading…
Reference in a new issue