Implement clearing caches in settings

src/components/settings_modal/tabs/general_tab.js

@@ -8,6 +8,7 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+import { clearCache, cacheKey, emojiCacheKey } from 'src/services/sw/sw.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faGlobe
@@ -98,6 +99,21 @@ const GeneralTab = {
   methods: {
     changeDefaultScope (value) {
       this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
+    },
+    clearCache (key) {
+      clearCache(key)
+        .then((v) => {
+          this.$store.dispatch('settingsSaved', { success: true })
+        })
+        .catch(error => {
+          this.$store.dispatch('settingsSaved', { error })
+        })
+    },
+    clearAssetCache () {
+      this.clearCache(cacheKey)
+    },
+    clearEmojiCache () {
+      this.clearCache(emojiCacheKey)
     }
   }
 }

src/components/settings_modal/tabs/general_tab.vue

@@ -509,6 +509,29 @@
         </li>
       </ul>
     </div>
+    <div
+      class="setting-item"
+    >
+      <h2>{{ $t('settings.cache') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <button
+            class="btn button-default"
+            @click="clearAssetCache"
+          >
+            {{ $t('settings.clear_asset_cache') }}
+          </button>
+        </li>
+        <li>
+          <button
+            class="btn button-default"
+            @click="clearEmojiCache"
+          >
+            {{ $t('settings.clear_emoji_cache') }}
+          </button>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 

src/i18n/en.json

@@ -1049,7 +1049,10 @@
     "reset_value": "Reset",
     "reset_value_tooltip": "Reset draft",
     "hard_reset_value": "Hard reset",
-    "hard_reset_value_tooltip": "Remove setting from storage, forcing use of default value"
+    "hard_reset_value_tooltip": "Remove setting from storage, forcing use of default value",
+    "cache": "Cache",
+    "clear_asset_cache": "Clear asset cache",
+    "clear_emoji_cache": "Clear emoji cache"
   },
   "admin_dash": {
     "window_title": "Administration",

src/services/sw/sw.js

@@ -147,4 +147,10 @@ export function unregisterPushNotifications (token) {
   }
 }
 
+export const shouldCache = process.env.NODE_ENV === 'production'
+export const cacheKey = 'pleroma-fe'
+export const emojiCacheKey = 'pleroma-fe-emoji'
+
+export const clearCache = (key) => caches.delete(key)
+
 export { getOrCreateServiceWorker }

src/sw.js

@@ -3,6 +3,7 @@
 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'
+import { shouldCache, cacheKey, emojiCacheKey } from './services/sw/sw.js'
 import { createI18n } from 'vue-i18n'
 // Collects all messages for service workers
 // Needed because service workers cannot use dynamic imports
@@ -85,10 +86,7 @@ const showPushNotification = async (event) => {
   return Promise.resolve()
 }
 
-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