Separate image cache

src/components/ServiceWorker.svelte

@@ -16,14 +16,16 @@
     }
   });
 
-  async function refreshUpdate() {
+  async function refreshUpdate(changelog) {
     open(
       UpdateModal,
       {
         close,
+        changelog,
       },
       {
         closeButton: false,
+        closeOnOuterClick: false,
         styleWindow: { background: '#25294A', width: '500px' },
       },
     );
@@ -33,7 +35,7 @@
     if ('serviceWorker' in navigator && import.meta.env.PROD) {
       broadcastChannel = new BroadcastChannel('paimonmoe-sw');
       broadcastChannel.addEventListener('message', (event) => {
-        if (event.data.type === 'update') refreshUpdate();
+        if (event.data.type === 'update') refreshUpdate(event.data.changelog);
       });
 
       navigator.serviceWorker.register('/service-worker.js').then(

src/components/UpdateModal.svelte

@@ -4,6 +4,7 @@
   import Button from '../components/Button.svelte';
 
   export let close;
+  export let changelog;
 
   function reload() {
     window.location.reload();
@@ -16,7 +17,9 @@
   <div class="rounded-xl bg-background p-4 mb-4">
     <p class="text-gray-200">{$t('update.whatsNew')}</p>
     <ul class="list-disc text-white list-inside">
-      <li>Bug Fixes</li>
+      {#each changelog as c}
+        <li>{c}</li>
+      {/each}
     </ul>
   </div>
   <div class="flex justify-end space-x-2">

src/service-worker.js

@@ -1,10 +1,18 @@
 import { version } from '$service-worker';
 
 const CACHE = `cache${version}`;
+
+const IMAGE_CACHE_VER = '2';
+const IMAGE_CACHE = `cacheimg${IMAGE_CACHE_VER}`;
+
+const IMAGE_URL = `${self.location.origin}/images/`;
+
+const changelog = ['Update timeline', 'Update locales'];
+
 const channel = new BroadcastChannel('paimonmoe-sw');
 
-self.addEventListener('install', (event) => {
-  event.waitUntil(self.skipWaiting());
+self.addEventListener('install', () => {
+  self.skipWaiting();
 });
 
 async function fetchAddCache(url) {
@@ -27,7 +35,7 @@ self.addEventListener('activate', (event) => {
       let needUpdate = false;
       // delete old caches
       for (const key of keys) {
-        if (key !== CACHE) {
+        if (key !== CACHE && key !== IMAGE_CACHE) {
           await caches.delete(key);
           needUpdate = true;
         }
@@ -38,7 +46,7 @@ self.addEventListener('activate', (event) => {
       if (needUpdate) {
         channel.postMessage({
           type: 'update',
-          version,
+          changelog,
         });
       }
 
@@ -53,11 +61,12 @@ self.addEventListener('activate', (event) => {
 });
 
 self.addEventListener('fetch', async (event) => {
-  if (!event.request.url.startsWith(self.location.origin) || event.request.method !== 'GET') return;
+  if (event.request.url.indexOf(self.location.origin) !== 0 || event.request.method !== 'GET') return;
 
   event.respondWith(
     (async () => {
-      const cache = await caches.open(CACHE);
+      const cachePath = event.request.url.indexOf(IMAGE_URL) === 0 ? IMAGE_CACHE : CACHE;
+      const cache = await caches.open(cachePath);
       const cachedRes = await cache.match(event.request);
 
       if (cachedRes) {