Make asset caching work with vite

build/sw_plugin.js

@@ -11,6 +11,11 @@ const getSWMessagesAsText = async () => {
 }
 const projectRoot = dirname(dirname(fileURLToPath(import.meta.url)))
 
+const swEnvName = 'virtual:pleroma-fe/service_worker_env'
+const swEnvNameResolved = '\0' + swEnvName
+const getDevSwEnv = () => `self.serviceWorkerOption = { assets: [] };`
+const getProdSwEnv = ({ assets }) => `self.serviceWorkerOption = { assets: ${JSON.stringify(assets)} };`
+
 export const devSwPlugin = ({
   swSrc,
   swDest,
@@ -32,12 +37,16 @@ export const devSwPlugin = ({
       const name = id.startsWith('/') ? id.slice(1) : id
       if (name === swDest) {
         return swFullSrc
+      } else if (name === swEnvName) {
+        return swEnvNameResolved
       }
       return null
     },
     async load (id) {
       if (id === swFullSrc) {
         return readFile(swFullSrc, 'utf-8')
+      } else if (id === swEnvNameResolved) {
+        return getDevSwEnv()
       }
       return null
     },
@@ -79,6 +88,21 @@ export const devSwPlugin = ({
                   contents: await getSWMessagesAsText()
                 }))
             }
+          }, {
+            name: 'sw-env',
+            setup (b) {
+              b.onResolve(
+                { filter: new RegExp('^' + swEnvName + '$') },
+                args => ({
+                  path: args.path,
+                  namespace: 'sw-env'
+                }))
+              b.onLoad(
+                { filter: /.*/, namespace: 'sw-env' },
+                () => ({
+                  contents: getDevSwEnv()
+                }))
+            }
           }]
         })
         const text = res.outputFiles[0].text
@@ -126,6 +150,30 @@ export const buildSwPlugin = ({
         configFile: false
       }
     },
+    generateBundle: {
+      order: 'post',
+      sequential: true,
+      async handler (_, bundle) {
+        const assets = Object.keys(bundle)
+              .filter(name => !/\.map$/.test(name))
+              .map(name => '/' + name)
+        config.plugins.push({
+          name: 'build-sw-env-plugin',
+          resolveId (id) {
+            if (id === swEnvName) {
+              return swEnvNameResolved
+            }
+            return null
+          },
+          load (id) {
+            if (id === swEnvNameResolved) {
+              return getProdSwEnv({ assets })
+            }
+            return null
+          }
+        })
+      }
+    },
     closeBundle: {
       order: 'post',
       sequential: true,

src/sw.js

@@ -1,5 +1,6 @@
 /* eslint-env serviceworker */
 
+import 'virtual:pleroma-fe/service_worker_env'
 import { storage } from 'src/lib/storage.js'
 import { parseNotification } from './services/entity_normalizer/entity_normalizer.service.js'
 import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'

vite.config.js

@@ -165,7 +165,14 @@ export default defineConfig(async ({ mode, command }) => {
               return 'static/js/[name].[hash].js'
             }
           },
-          chunkFileNames () {
+          chunkFileNames (chunkInfo) {
+            if (chunkInfo.facadeModuleId) {
+              if (chunkInfo.facadeModuleId.includes('node_modules/@kazvmoe-infra/unicode-emoji-json/annotations/')) {
+                return 'static/js/emoji-annotations/[name].[hash].js'
+              } else if (chunkInfo.facadeModuleId.includes('src/i18n/')) {
+                return 'static/js/i18n/[name].[hash].js'
+              }
+            }
             return 'static/js/[name].[hash].js'
           },
           assetFileNames (assetInfo) {