Merge branch 'from/develop/tusooa/sw-cache-assets' into 'develop'

Service worker: cache assets

See merge request pleroma/pleroma-fe!1437

src/App.js

@@ -14,6 +14,7 @@ import DesktopNav from './components/desktop_nav/desktop_nav.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
+import { getOrCreateServiceWorker } from './services/push/push'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
 import { mapGetters } from 'vuex'
 
@@ -45,6 +46,7 @@ export default {
     const val = this.$store.getters.mergedConfig.interfaceLanguage
     this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
     window.addEventListener('resize', this.updateMobileState)
+    getOrCreateServiceWorker()
   },
   unmounted () {
     window.removeEventListener('resize', this.updateMobileState)

src/services/push/push.js

@@ -109,3 +109,5 @@ export function unregisterPushNotifications (token) {
     ]).catch((e) => console.warn(`Failed to disable Web Push Notifications: ${e.message}`))
   }
 }
+
+export { getOrCreateServiceWorker }

src/sw.js

@@ -47,6 +47,44 @@ const maybeShowNotification = async (event) => {
   }
 }
 
+const shouldCache = process.env.NODE_ENV === 'production'
+const cacheKey = 'pleroma-fe'
+const cacheFiles = self.serviceWorkerOption.assets
+const emojiCacheKey = 'pleroma-fe-emoji'
+const isEmoji = req => {
+  if (req.method !== 'GET') {
+    return false
+  }
+  const url = new URL(req.url)
+
+  return url.pathname.startsWith('/emoji/')
+}
+
+self.addEventListener('install', async (event) => {
+  if (shouldCache) {
+    event.waitUntil((async () => {
+      const cache = await caches.open(cacheKey)
+      await cache.addAll(cacheFiles)
+    })())
+  }
+})
+
+self.addEventListener('activate', async (event) => {
+  if (shouldCache) {
+    event.waitUntil((async () => {
+      const cache = await caches.open(cacheKey)
+      const keys = await cache.keys()
+      await Promise.all(
+        keys.filter(request => {
+          const url = new URL(request.url)
+          const shouldKeep = cacheFiles.includes(url.pathname)
+          return !shouldKeep
+        }).map(k => cache.delete(k))
+      )
+    })())
+  }
+})
+
 self.addEventListener('push', async (event) => {
   if (event.data) {
     event.waitUntil(maybeShowNotification(event))
@@ -65,3 +103,28 @@ self.addEventListener('notificationclick', (event) => {
     if (clients.openWindow) return clients.openWindow('/')
   }))
 })
+
+self.addEventListener('fetch', (event) => {
+  // Do not mess up with remote things
+  const isSameOrigin = (new URL(event.request.url)).origin === self.location.origin
+  if (shouldCache && event.request.method === 'GET' && isSameOrigin) {
+    event.respondWith((async () => {
+      const r = await caches.match(event.request)
+
+      if (r) {
+        return r
+      }
+
+      try {
+        const response = await fetch(event.request)
+        if (response.ok && isEmoji(event.request)) {
+          const cache = await caches.open(emojiCacheKey)
+          await cache.put(event.request.clone(), response.clone())
+        }
+        return response
+      } catch (e) {
+        throw e
+      }
+    })())
+  }
+})