From 3563b586512023a90991d777d769c676b5cef45d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Mon, 2 Jan 2023 20:18:33 +0100
Subject: [PATCH] fix(pwa): exclude emojis/twemoji from sw precache manifest
 (#706)

---
 config/pwa.ts        |  3 +++
 service-worker/sw.ts | 27 ++++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/config/pwa.ts b/config/pwa.ts
index 1eb7d7d0..895aaf7e 100644
--- a/config/pwa.ts
+++ b/config/pwa.ts
@@ -42,7 +42,10 @@ export const pwa: VitePWANuxtOptions = {
     ],
   },
   injectManifest: {
+    // fonts/seguiemj.ttf is 2.77 MB, and won't be precached
+    maximumFileSizeToCacheInBytes: 3000000,
     globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
+    globIgnores: ['emojis/twemoji/*.svg'],
   },
   devOptions: {
     enabled: process.env.VITE_DEV_PWA === 'true',
diff --git a/service-worker/sw.ts b/service-worker/sw.ts
index 6294655c..5bef64b2 100644
--- a/service-worker/sw.ts
+++ b/service-worker/sw.ts
@@ -2,14 +2,16 @@
 /// <reference types="vite/client" />
 import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
+import { StaleWhileRevalidate } from 'workbox-strategies'
+import { ExpirationPlugin } from 'workbox-expiration'
+// import * as navigationPreload from 'workbox-navigation-preload'
 import { onNotificationClick, onPush } from './web-push-notifications'
 
 declare const self: ServiceWorkerGlobalScope
-/*
-import { CacheableResponsePlugin } from 'workbox-cacheable-response'
-import { NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies'
-import { ExpirationPlugin } from 'workbox-expiration'
-*/
+
+// if (import.meta.env.PROD)
+//   navigationPreload.enable()
 
 self.addEventListener('message', (event) => {
   if (event.data && event.data.type === 'SKIP_WAITING')
@@ -37,6 +39,21 @@ if (import.meta.env.PROD)
 
 // only cache pages and external assets on local build + start or in production
 if (import.meta.env.PROD) {
+  // include emoji/twemoji icons
+  registerRoute(
+    ({ sameOrigin, request, url }) =>
+      sameOrigin
+        && request.destination === 'image'
+        && url.pathname.startsWith('/emojis/twemoji/'),
+    new StaleWhileRevalidate({
+      cacheName: 'elk-emojis',
+      plugins: [
+        new CacheableResponsePlugin({ statuses: [200] }),
+        // 15 days max
+        new ExpirationPlugin({ maxAgeSeconds: 60 * 60 * 24 * 15 }),
+      ],
+    }),
+  )
   // external assets: rn avatars from mas.to
   // requires <img crossorigin="anonymous".../> and http header: Allow-Control-Allow-Origin: *
 /*