Skip to content

Instantly share code, notes, and snippets.

@EnetoJara
Last active March 20, 2021 00:31
Show Gist options
  • Save EnetoJara/9d9a2d219bf1dfb788e57e5bf02273d8 to your computer and use it in GitHub Desktop.
Save EnetoJara/9d9a2d219bf1dfb788e57e5bf02273d8 to your computer and use it in GitHub Desktop.
importScripts(
"https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js"
);
// Note: Ignore the error that Glitch raises about workbox being undefined.
workbox.setConfig({
debug: true,
});
self.skipWaiting();
workbox.core.clientsClaim();
var CacheableResponsePlugin = workbox.cacheableResponse.CacheableResponsePlugin;
var WorkboxBackgroundSync = workbox.backgroundSync.BackgroundSyncPlugin;
var CacheFirst = workbox.strategies.CacheFirst;
var ExpirationPlugin = workbox.expiration.ExpirationPlugin;
var NavigationRoute = workbox.routing.NavigationRoute;
var precacheAndRoute = workbox.precaching.precacheAndRoute;
var registerRoute = workbox.routing.registerRoute;
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload.
const showNotification = () => {
self.registration.showNotification('Background sync success!', {
body: '🎉`🎉`🎉`'
});
};
const bgSyncPlugin = new WorkboxBackgroundSync(
'proyect-queue',
{
maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes),
callbacks: {
queueDidReplay: showNotification
// other types of callbacks could go here
}
}
);
const networkWithBackgroundSync = new workbox.strategies.NetworkOnly({
plugins: [bgSyncPlugin],
});
registerRoute(
/\/api\/.*\/*.json/,
networkWithBackgroundSync,
'POST'
);
registerRoute(
/\/api\/.+/,
new CacheFirst({
cacheName: "short-cache",
matchOptions: {
ignoreVary: true,
},
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 300,
purgeOnQuotaError: true,
}),
new CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
registerRoute(
/.*\.(css|js|eot|ico|svg|ttg|woff|woff2|png|jpg|jpeg|gif)/,
new CacheFirst({
cacheName: "max-cache",
matchOptions: {
ignoreVary: true,
},
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 63072e3,
purgeOnQuotaError: true,
}),
new CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
self.addEventListener("push", function (event) {
event.waitUntil(
self.registration.showNotification("ServiceWorker Cookbook", {
body: "Push Notification Subscription Management",
})
);
});
self.addEventListener("pushsubscriptionchange", function (event) {
event.waitUntil(
self.registration.pushManager
.subscribe({ userVisibleOnly: true })
.then(function (subscription) {
return fetch("register", {
method: "post",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify({
endpoint: subscription.endpoint,
}),
});
})
);
});
self.addEventListener("notificationclose", (event) => {
const notification = event.notification;
const primaryKey = notification.data.primaryKey;
console.log("Closed notification: " + primaryKey);
});
self.addEventListener("notificationclick", (event) => {
const notification = event.notification;
const primaryKey = notification.data.primaryKey;
const action = event.action;
if (action === "close") {
notification.close();
} else {
event.waitUntil(
clients.matchAll().then((clis) => {
const client = clis.find((c) => {
return c.visibilityState === "visible";
});
if (client !== undefined) {
client.navigate("samples/page" + primaryKey + ".html");
client.focus();
} else {
// there are no visible windows. Open one.
clients.openWindow("samples/page" + primaryKey + ".html");
notification.close();
}
})
);
}
self.registration.getNotifications().then((notifications) => {
notifications.forEach((notification) => {
notification.close();
});
});
});
self.addEventListener("push", (event) => {
let body;
if (event.data) {
body = event.data.text();
} else {
body = "Default body";
}
const options = {
body: body,
icon: "/public/images/ico/ms-icon-512x512.png",
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
},
actions: [
{
action: "explore",
title: "Go to the site",
icon: "/public/images/ok.png",
},
{
action: "close",
title: "Close the notification",
icon: "/public/images/xmark.png",
},
],
};
event.waitUntil(
clients.matchAll().then((c) => {
console.log(c);
if (c.length === 0) {
// Show notification
self.registration.showNotification("Push Notification", options);
} else {
// Send a message to the page to update the UI
console.log("Application is already open!");
}
})
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment