https://galepress.com/firebase-messaging-sw.js

1importScripts('https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js');
2importScripts('https://www.gstatic.com/firebasejs/8.5.0/firebase-messaging.js');
3
4if (firebase.apps.length === 0) {
5    firebase.initializeApp({
6        apiKey: 'AIzaSyCHsHsqjOndMPf9aQbcnTkQqfOBbRUlSPE',
7        authDomain: 'api-project-151896860923.firebaseapp.com',
8        databaseURL: 'https://api-project-151896860923.firebaseio.com/',
9        projectId: 'api-project-151896860923',
10        storageBucket: 'api-project-151896860923.appspot.com',
11        messagingSenderId: '151896860923',
12        appId: '1:151896860923:web:36766032cd3e3bf98d685e',
13        measurementId: 'G-9ELR5HTDW5'
14    });
15}
16
17class CustomPushEvent extends Event {
18    constructor(data) {
19        super('push');
20
21        Object.assign(this, data);
22        this.custom = true;
23    }
24}
25
26/*
27 * Overrides push notification data, to avoid having 'notification' key and firebase blocking
28 * the message handler from being called
29 */
30self.addEventListener('push', (e) => {
31    // Skip if event is our own custom event
32    if (e.custom) return;
33
34    // Kep old event data to override
35    const oldData = e.data;
36
37    // Create a new event to dispatch, pull values from notification key and put it in data key,
38    // and then remove notification key
39    const newEvent = new CustomPushEvent({
40        data: {
41            old: oldData.json(),
42            json() {
43                const newData = oldData.json();
44                newData.data = {
45                    ...newData.data,
46                    ...newData.notification
47                };
48                delete newData.notification;
49                return newData;
50            }
51        },
52        waitUntil: e.waitUntil.bind(e)
53    });
54
55    // Stop event propagation
56    e.stopImmediatePropagation();
57
58    // Dispatch the new wrapped event
59    dispatchEvent(newEvent);
60});
61
62const messaging = firebase.messaging();
63
64self.addEventListener('notificationclick', (event) => {
65    event.notification.close();
66
67    const notificationData = event.notification.data;
68    if (!notificationData || !notificationData.url) return;
69
70    event.waitUntil(
71        clients.matchAll({ includeUncontrolled: true, type: 'window' }).then((windowClients) => {
72            const url = notificationData.url;
73
74            for (let i = 0; i < windowClients.length; i++) {
75                const client = windowClients[i];
76                if (client.url === url && 'focus' in client) {
77                    return client.focus();
78                }
79            }
80
81            if (clients.openWindow) {
82                return clients.openWindow(url);
83            }
84        })
85    );
86});
87
88messaging.onBackgroundMessage((message) => {
89    if (Notification.permission === 'granted') {
90        let messageData = {
91            title: message.data.title,
92            body: message.data.body,
93            image: message.data.image,
94            icon: message.data.image,
95            data: {
96                url: message.data.url
97            }
98        };
99
100        return self.registration.showNotification(messageData.title, messageData);
101    }
102});