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