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

1importScripts(
2  "https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"
3);
4importScripts(
5  "https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js"
6);
7
8let firebaseConfig = null;
9let isInitialized = false;
10let messageHandlerRegistered = false;
11let headersTrackServiceWorker = null;
12let msURL = null;
13
14let campaignId = null;
15let email = null;
16let messageId = null;
17let projectId = null;
18let templateId = null;
19let userId = null;
20
21self.addEventListener("push", (event) => {
22  event.stopImmediatePropagation();
23
24  let payload;
25  try {
26    payload = event.data ? event.data.json() : {};
27  } catch (error) {
28    console.error("Error parsing push data:", error);
29    payload = {};
30  }
31
32  event.waitUntil(showCustomNotification(payload));
33});
34
35
36async function showCustomNotification(payload) {
37  const data = payload.data || {};
38  const notification = payload.notification || {};
39  const platziIcon =
40  "https://static.platzi.com/media/achievements/platzi-bd.png";
41
42  const notificationTitle = data.title || notification.title || "Nueva notificación";
43  const notificationBody = data.body || notification.body || "";
44  const clickAction = data.click_action || notification.click_action || "/";
45
46  const notificationOptions = {
47    body: notificationBody,
48    icon: platziIcon,
49    data: {
50      ...data,
51      url: clickAction,
52    },
53    tag: "notification_" + Date.now(),
54  };
55
56  campaignId = data.campaignId;
57  templateId = data.templateId;
58  email = data.email;
59  userId = data.userId;
60  messageId = data.messageId;
61  projectId = data.projectId;
62
63  return self.registration.showNotification(notificationTitle, notificationOptions);
64}
65
66self.addEventListener("message", (event) => {
67  if (event.data && event.data.type === "FIREBASE_CONFIG") {
68    firebaseConfig = event.data.firebaseConfig;
69    headersTrackServiceWorker = event.data.headers;
70    msURL = event.data.msURL;
71    if (firebaseConfig && !isInitialized) {
72      initializeFirebase();
73    }
74  }
75});
76
77function initializeFirebase() {
78  if (!firebaseConfig) {
79    console.error("Firebase configuration not available");
80    return;
81  }
82
83  try {
84    if (!firebase.apps.length) {
85      firebase.initializeApp(firebaseConfig);
86      isInitialized = true;
87    }
88
89    const messaging = firebase.messaging();
90
91    if (!messageHandlerRegistered) {
92      messaging.onBackgroundMessage((payload) => {
93        return showCustomNotification(payload);
94      });
95
96      messageHandlerRegistered = true;
97    }
98  } catch (error) {
99    console.error("Error initializing Firebase in service worker:", error);
100  }
101}
102
103self.addEventListener("notificationclick", function (event) {
104  event.notification.close();
105
106  const data = event.notification.data || {};
107  const clickAction = data.url || data.click_action || "/";
108  const trackEndpoint = `${data.msURL || ''}/api/v6/iterable/register-webpush-click/`;
109
110  const trackingPayload = {
111    messageId: data.messageId,
112    createdAt: Math.floor(Date.now() / 1000),
113    ...(data.campaignId && { campaignId: Number(data.campaignId) }),
114    ...(data.templateId && { templateId: Number(data.templateId) }),
115    ...(data.email && { email: data.email }),
116    ...(data.userId && { userId: data.userId }),
117  };
118
119  const headers = {
120    'Content-Type': 'application/json',
121    ...(data.headers || {})
122  };
123
124  const trackPromise = data.messageId
125    ? fetch(trackEndpoint, {
126        method: 'POST',
127        headers,
128        body: JSON.stringify(trackingPayload)
129      }).catch(err => {
130        console.error('Error tracking web push click with Iterable:', err);
131      })
132    : Promise.resolve();
133
134  const openPromise = clients.matchAll({ type: "window" }).then((clientList) => {
135    for (const client of clientList) {
136      if (client.url === clickAction && "focus" in client) {
137        return client.focus();
138      }
139    }
140    if (clients.openWindow) {
141      return clients.openWindow(clickAction);
142    }
143  });
144
145  event.waitUntil(Promise.all([trackPromise, openPromise]));
146});
147
148self.addEventListener("install", (event) => {
149  event.waitUntil(self.skipWaiting());
150});
151
152self.addEventListener("activate", (event) => {
153  event.waitUntil(self.clients.claim());
154});