push-notification-tested-on-cra.md

Prerequire

• CRA
• Firebase (Note: Messaging) when i was young

Step by Step

• Goto (https://console.firebase.google.com/u/0/project/PROJECT_ID/settings/cloudmessaging)
• in Cloud Messaging Settings generate key pair in Web Push Certificates
• create push-notification.js wherever you want.

import firebase from 'firebase/app'
import 'firebase/messaging'

const { PUBLIC_URL } = process.env
const initFirebase = () => {
  firebase.initializeApp({
    messagingSenderId: 'YOUR_SENDER_ID',
  })
  navigator.serviceWorker.register(PUBLIC_URL + 'fbm.js').then(registration => {
    firebase.messaging().useServiceWorker(registration)
  })
}

const askForPermissioToReceiveNotifications = async () => {
  try {
    const messaging = firebase.messaging()
    await messaging.requestPermission()
    const token = await messaging.getToken()
    console.log('token: ', token)

    return token
  } catch (error) {
    console.error(error)
  }
}

export { firebase, initFirebase, askForPermissioToReceiveNotifications }

• create fbm.js on public directory

/* global importScripts */
/* global firebase */
/**
 * firebase messaging
 */
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: 'YOU_SENDER_ID',
})

const messaging = firebase.messaging()
messaging.setBackgroundMessageHandler(function(payload) {
  console.log(
    '[firebase-messaging-sw.js] Received background message ',
    payload,
  )
  // Customize notification here
  const notificationTitle = 'Background Message Title'
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png',
  }

  return this.registration.showNotification(
    notificationTitle,
    notificationOptions,
  )
})

• run in index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
// import * as SW from './serviceWorker'

import {
  initFirebase,
  askForPermissioToReceiveNotifications,
} from 'utils/push-notification'

ReactDOM.render(
  <>
    <span style={{ display: 'block' }}>
      <button onClick={askForPermissioToReceiveNotifications}>
        Fuck For Permission 🤪
      </button>
    </span>
    <App />
  </>,
  document.getElementById('root'),
)

initFirebase()
// SW.register()