101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
import { registerRoute } from "workbox-routing";
|
|
import {
|
|
NetworkFirst,
|
|
StaleWhileRevalidate,
|
|
CacheFirst,
|
|
} from "workbox-strategies";
|
|
|
|
// Used for filtering matches based on status code, header, or both
|
|
import { CacheableResponsePlugin } from "workbox-cacheable-response";
|
|
// Used to limit entries in cache, remove entries after a certain period of time
|
|
import { ExpirationPlugin } from "workbox-expiration";
|
|
|
|
import { precacheAndRoute } from "workbox-precaching";
|
|
import { IPushNotification } from "./types/push-notification";
|
|
|
|
// Use with precache injection
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
// eslint-disable-next-line no-underscore-dangle
|
|
precacheAndRoute(self.__WB_MANIFEST);
|
|
|
|
registerRoute(
|
|
// Check to see if the request is a navigation to a new page
|
|
({ request }) => request.mode === "navigate",
|
|
// Use a Network First caching strategy
|
|
new NetworkFirst({
|
|
// Put all cached files in a cache named 'pages'
|
|
cacheName: "pages",
|
|
plugins: [
|
|
// Ensure that only requests that result in a 200 status are cached
|
|
new CacheableResponsePlugin({
|
|
statuses: [200],
|
|
}),
|
|
],
|
|
})
|
|
);
|
|
|
|
// Cache CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
|
|
registerRoute(
|
|
// Check to see if the request's destination is style for stylesheets, script for JavaScript, or worker for web worker
|
|
({ request }) =>
|
|
request.destination === "style" ||
|
|
request.destination === "script" ||
|
|
request.destination === "worker",
|
|
// Use a Stale While Revalidate caching strategy
|
|
new StaleWhileRevalidate({
|
|
// Put all cached files in a cache named 'assets'
|
|
cacheName: "assets",
|
|
plugins: [
|
|
// Ensure that only requests that result in a 200 status are cached
|
|
new CacheableResponsePlugin({
|
|
statuses: [200],
|
|
}),
|
|
],
|
|
})
|
|
);
|
|
|
|
// Cache images with a Cache First strategy
|
|
registerRoute(
|
|
// Check to see if the request's destination is style for an image
|
|
({ request }) => request.destination === "image",
|
|
// Use a Cache First caching strategy
|
|
new CacheFirst({
|
|
// Put all cached files in a cache named 'images'
|
|
cacheName: "images",
|
|
plugins: [
|
|
// Ensure that only requests that result in a 200 status are cached
|
|
new CacheableResponsePlugin({
|
|
statuses: [200],
|
|
}),
|
|
// Don't cache more than 50 items, and expire them after 30 days
|
|
new ExpirationPlugin({
|
|
maxEntries: 50,
|
|
maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days
|
|
}),
|
|
],
|
|
})
|
|
);
|
|
|
|
self.addEventListener("push", async (event: any) => {
|
|
const payload = event.data.json() as IPushNotification;
|
|
console.log("received push", payload);
|
|
const options = {
|
|
title: payload.title,
|
|
body: payload.body,
|
|
icon: "/img/icons/android-chrome-512x512.png",
|
|
badge: "/img/icons/badge-128x128.png",
|
|
timestamp: new Date(payload.timestamp),
|
|
lang: payload.locale,
|
|
data: {
|
|
dateOfArrival: Date.now(),
|
|
},
|
|
};
|
|
|
|
event.waitUntil(
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
self.registration.showNotification(payload.title, options)
|
|
);
|
|
});
|