feat: intercept iconify api requests (#136)

.gitignore

@@ -13,3 +13,4 @@ collections-info.json
 collections-meta.json
 
 dist-electron
+dev-dist

package.json

@@ -19,6 +19,7 @@
     "postbuild": "esno scripts/postbuild.ts",
     "lint": "eslint .",
     "dev": "vite --port 3333 --open",
+    "dev-pwa": "SW_DEV=true vite --port 3333",
     "typecheck": "vue-tsc --noEmit",
     "dev:electron": "npm -C ./electron run dev",
     "build": "NODE_ENV=production vite build",

src/main.ts

@@ -1,15 +1,20 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { disableCache } from 'iconify-icon'
 import App from './App.vue'
 import '@unocss/reset/tailwind.css'
 import './utils/electron'
 import './main.css'
 import 'uno.css'
-import 'iconify-icon'
 
 import { basePath, isElectron } from './env'
 import routes from '~pages'
 
+// disable local storage cache when there is PWA:
+// we need to keep local storage when running dev server without PWA
+if (!isElectron && PWA)
+  disableCache('all')
+
 const app = createApp(App)
 
 const router = createRouter({

src/shims.d.ts

@@ -9,6 +9,7 @@ interface Window {
 
 declare const vscode: any
 declare const __BUILD_TIME__: string
+declare const PWA: boolean
 
 declare module '*.vue' {
   import type { defineComponent } from './vue'

src/sw.ts

@@ -0,0 +1,42 @@
+import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
+import { clientsClaim } from 'workbox-core'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { getIcons } from '@iconify/utils'
+
+declare let self: ServiceWorkerGlobalScope
+
+// self.__WB_MANIFEST is default injection point
+precacheAndRoute(self.__WB_MANIFEST)
+
+// clean old assets
+cleanupOutdatedCaches()
+
+// to allow work offline
+registerRoute(new NavigationRoute(
+  createHandlerBoundToURL('index.html'),
+))
+
+self.skipWaiting()
+clientsClaim()
+
+self.addEventListener('fetch', (e) => {
+  const url = e.request.url
+  const match = url.match(/^https:\/\/(api\.iconify\.design|api\.simplesvg\.com|api\.unisvg\.com)\/(.*)\.json\?icons=(.*)?/)
+  if (match) {
+    e.respondWith(
+      fetch(`/collections/${match[2]}-raw.json`)
+        .then((response) => {
+          return response.json()
+        }).then((collection) => {
+          return new Response(JSON.stringify(getIcons(
+            collection,
+            match[3].replaceAll('%2C', ',').split(','),
+          )), {
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          })
+        }),
+    )
+  }
+})

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "esnext",
     "target": "esnext",
-    "lib": ["DOM", "ESNext"],
+    "lib": ["DOM", "ESNext", "WebWorker"],
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,

vite.config.ts

@@ -62,6 +62,10 @@ export default defineConfig(({ mode }) => {
         dts: 'src/auto-imports.d.ts',
       }),
       !isElectron && VitePWA({
+        strategies: 'injectManifest',
+        srcDir: 'src',
+        filename: 'sw.ts',
+        registerType: 'autoUpdate',
         manifest: {
           name: 'Icônes',
           short_name: 'Icônes',
@@ -84,11 +88,18 @@ export default defineConfig(({ mode }) => {
               options.includeAssets = fg.sync('**/*.*', { cwd: join(process.cwd(), 'public'), onlyFiles: true })
           },
         },
+        devOptions: {
+          enabled: process.env.SW_DEV === 'true',
+          /* when using generateSW the PWA plugin will switch to classic */
+          type: 'module',
+          navigateFallback: 'index.html',
+        },
       }),
       UnoCSS(),
     ],
     define: {
       __BUILD_TIME__: JSON.stringify(dayjs().format('YYYY/MM/DD HH:mm')),
+      PWA: !isElectron && (process.env.NODE_ENV === 'production' || process.env.SW_DEV === 'true'),
     },
     resolve: {
       alias: {