fix(pwa): exclude emojis/twemoji from sw precache manifest (#706)

zio/stable
Joaquín Sánchez 2023-01-02 20:18:33 +01:00 committed by GitHub
parent 75f1a6b16e
commit 3563b58651
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 5 deletions

View File

@ -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',

View File

@ -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: *
/*