Skip to content

Instantly share code, notes, and snippets.

@jgcmarins
Forked from sibelius/useSWReg.tsx
Created May 26, 2020 12:32
Show Gist options
  • Save jgcmarins/1e9deabe1e35ef24684ecee22c0b8ee1 to your computer and use it in GitHub Desktop.
Save jgcmarins/1e9deabe1e35ef24684ecee22c0b8ee1 to your computer and use it in GitHub Desktop.
use Service Worker Registration hook
import firebase from 'firebase/app';
import 'firebase/messaging';
import { useEffect, useRef } from 'react';
import config from '../config';
import firebaseConfig from './firebaseConfig';
import { PushTokenAddMutation } from './__generated__/PushTokenAddMutation.graphql';
import { PushTokenAdd, USER_PUSHENDPOINT_TYPE } from './PushTokenAddMutation';
export const useSWReg = () => {
const onTokenRefresh = useRef<firebase.Unsubscribe>(null);
const onMessage = useRef<firebase.Unsubscribe>(null);
const [pushTokenAdd] = useMutation<PushTokenAddMutation>(PushTokenAdd);
useEffect(() => {
const registerSW = async () => {
if (!firebase.messaging.isSupported()) {
return;
}
if ('serviceWorker' in navigator) {
const registration = await navigator.serviceWorker.getRegistration('/home/sw.js');
if (!registration) {
return;
}
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
const messaging = firebase.messaging();
messaging.usePublicVapidKey(config.FIREBASE_VAPID);
messaging.useServiceWorker(registration);
try {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
const token = await messaging.getToken();
const config = {
variables: {
input: {
token,
os: USER_PUSHENDPOINT_TYPE.WEB,
},
},
};
pushTokenAdd(config);
}
} catch (err) {
if (err.code === 'messaging/permission-blocked') {
// eslint-disable-next-line
console.log('Please Unblock Notification Request Manually: ', err);
} else {
// eslint-disable-next-line
console.log('getToken err: ', err);
}
}
onTokenRefresh.current = messaging.onTokenRefresh(async () => {
const token = await messaging.getToken();
const config = {
variables: {
input: {
token,
os: USER_PUSHENDPOINT_TYPE.WEB,
},
},
};
pushTokenAdd(config);
});
onMessage.current = messaging.onMessage((payload) => {
const { data } = payload;
registration.showNotification(data.title, {
vibrate: [200],
body: data.body,
title: data.title,
data,
});
});
navigator.serviceWorker.addEventListener('message', (event) => {
});
}
};
registerSW();
return () => {
if (onTokenRefresh.current) {
onTokenRefresh.current();
}
if (onMessage.current) {
onMessage.current();
}
};
}, []);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment