設定画面のブラウザタブにあるキャッシュ項目の改修

src/components/Modal/Common/ModalFrame.vue

@@ -28,7 +28,7 @@ import { useModalStore } from '/@/store/ui/modal'
 withDefaults(
   defineProps<{
     iconMdi?: boolean
-    iconName: string
+    iconName?: string
     title: string
     subtitle?: string
     returnButton?: boolean

src/components/Modal/Common/ModalHeader.vue

@@ -3,11 +3,17 @@
     <modal-return-button v-if="returnButton" :class="$style.returnButton" />
     <div :class="$style.content">
       <h1 :class="$style.title">
-        <a-icon :class="$style.icon" :name="iconName" :mdi="iconMdi" />{{
-          title
-        }}
+        <a-icon
+          v-if="iconName"
+          :class="$style.icon"
+          :name="iconName"
+          :mdi="iconMdi"
+        />
+        {{ title }}
       </h1>
-      <h2 :class="$style.subtitle"><slot name="subtitle" /></h2>
+      <h2 :class="$style.subtitle" :data-has-icon="$boolAttr(!iconName)">
+        <slot name="subtitle" />
+      </h2>
     </div>
   </div>
 </template>
@@ -19,7 +25,7 @@ import ModalReturnButton from './ModalReturnButton.vue'
 withDefaults(
   defineProps<{
     iconMdi?: boolean
-    iconName: string
+    iconName?: string
     title: string
     subtitle?: string
     returnButton?: boolean
@@ -69,6 +75,9 @@ withDefaults(
     weight: 500;
     size: 0.875rem;
   }
+  &[data-has-icon] {
+    padding-left: 0;
+  }
 }
 .icon {
   margin-right: 16px;

src/components/Modal/GroupCreateModal/GroupCreateModal.vue

@@ -22,8 +22,9 @@
     <form-checkbox
       v-model="addMember"
       :class="[$style.item, $style.memberCheckbox]"
-      label="自分自身をメンバーに追加する"
-    />
+    >
+      自分自身をメンバーに追加する
+    </form-checkbox>
     <div :class="$style.createButtonWrapper">
       <form-button label="作成" @click="create" />
     </div>

src/components/Modal/ModalContainer.vue

@@ -63,6 +63,7 @@ import GroupCreateModal from './GroupCreateModal/GroupCreateModal.vue'
 import GroupMemberEditModal from './GroupMemberEditModal/GroupMemberEditModal.vue'
 import GroupAdminAddModal from './GroupAdminAddModal/GroupAdminAddModal.vue'
 import GroupMemberAddModal from './GroupMemberAddModal/GroupMemberAddModal.vue'
+import SettingsCacheClearModal from './SettingsCacheClearModal/SettingsCacheClearModal.vue'
 
 const { shouldShowModal, currentState } = useModalStore()
 
@@ -96,6 +97,8 @@ const component = computed(() => {
       return GroupAdminAddModal
     case 'group-member-add':
       return GroupMemberAddModal
+    case 'settings-cache-clear':
+      return SettingsCacheClearModal
   }
   // eslint-disable-next-line no-console
   console.error('Unexpected modal type:', currentState.value)

src/components/Modal/SettingsCacheClearModal/SettingsCacheClearModal.vue

@@ -0,0 +1,227 @@
+<template>
+  <modal-frame
+    title="キャッシュの削除"
+    subtitle="キャッシュを削除する項目を選んで下さい。"
+  >
+    <div :class="$style.content">
+      <div :class="$style.checkboxContainer">
+        <form-checkbox
+          v-for="name in cacheCategories"
+          :key="name"
+          v-model="cacheCategoryToIsSelected[name]"
+          :class="$style.checkbox"
+        >
+          <div :class="$style.label">
+            {{ cacheLabel(name) }}
+            <span>{{ cacheSize[name] }}</span>
+          </div>
+        </form-checkbox>
+      </div>
+      <div :class="$style.buttonContainer">
+        <form-button label="キャンセル" type="tertiary" @click="clearModal" />
+        <form-button
+          label="削除する"
+          type="secondary"
+          :disabled="!anyCacheSelected"
+          is-danger
+          @click="clearCache"
+        />
+      </div>
+    </div>
+  </modal-frame>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed } from 'vue'
+import { useToastStore } from '/@/store/ui/toast'
+import { wait } from '/@/lib/basic/timer'
+import ModalFrame from '../Common/ModalFrame.vue'
+import FormButton from '/@/components/UI/FormButton.vue'
+import { useModalStore } from '/@/store/ui/modal'
+import FormCheckbox from '/@/components/UI/FormCheckbox.vue'
+import { prettifyFileSize } from '/@/lib/basic/file'
+
+declare global {
+  interface StorageEstimate {
+    usageDetails: Record<CacheCategory, number>
+  }
+}
+
+const confirmClear = () => window.confirm('本当に削除しますか？')
+
+/* CacheStorageのnameはsw.jsを参照 */
+const clearCacheStorage = (cacheCategory: string) =>
+  window.caches.delete(cacheCategory)
+
+const { addSuccessToast } = useToastStore()
+const showToast = (extraMessage?: string) => {
+  addSuccessToast(
+    `削除に成功しました${extraMessage ? `: ${extraMessage}` : ''}`
+  )
+}
+
+const cacheCategories = [
+  'traQ_S-precache',
+  'files-cache',
+  'thumbnail-cache'
+] as const
+type CacheCategory = (typeof cacheCategories)[number]
+
+const cacheCategoryToIsSelected = ref(
+  Object.fromEntries(cacheCategories.map(name => [name, false]))
+)
+const anyCacheSelected = computed(() => {
+  return Object.values(cacheCategoryToIsSelected).includes(true)
+})
+
+const cacheSize = ref(
+  Object.fromEntries(cacheCategories.map(name => [name, '']))
+)
+
+const cacheNames = async (category: CacheCategory) => {
+  if (!(category === 'traQ_S-precache')) {
+    return [category]
+  }
+  const allNames = await window.caches.keys()
+  return allNames.filter(name => name.startsWith(category))
+}
+
+const updateCacheSize = async () => {
+  await Promise.all(
+    cacheCategories.map(async category => {
+      cacheSize.value[category] = prettifyFileSize(
+        await calculateCacheSizeSum(await cacheNames(category))
+      )
+    })
+  )
+}
+onMounted(updateCacheSize)
+
+const calculateCacheSizeSum = async (cacheNames: string[]) => {
+  let size = 0
+  await Promise.all(
+    cacheNames.map(async cacheName => {
+      size += await calculateEachCacheSize(cacheName)
+    })
+  )
+  return size
+}
+
+const calculateEachCacheSize = async (cacheName: string) => {
+  const cache = await window.caches.open(cacheName)
+  const keys = await cache.keys()
+  let size = 0
+  await Promise.all(
+    keys.map(async key => {
+      const response = await cache.match(key)
+      if (!response) return
+      const blob = await response.blob()
+      size += blob.size
+    })
+  )
+  return size
+}
+
+const cacheLabel = (cacheCategory: CacheCategory) => {
+  switch (cacheCategory) {
+    case 'traQ_S-precache':
+      return 'traQ本体'
+    case 'files-cache':
+      return 'ファイルの本体一覧'
+    case 'thumbnail-cache':
+      return 'ファイルのサムネイル一覧'
+    default:
+      throw new Error(
+        `Unknown cache name: ${cacheCategory satisfies CacheCategory}`
+      )
+  }
+}
+
+const { clearModal } = useModalStore()
+
+const isClearingCache = ref(false)
+
+const clearMainCachePromises = async () => {
+  const names = await cacheNames('traQ_S-precache')
+  return names.map(name => {
+    clearCacheStorage(name)
+  })
+}
+
+const clearCache = async () => {
+  if (isClearingCache.value || !confirmClear()) return
+  isClearingCache.value = true
+  const promises = []
+  if (cacheCategoryToIsSelected.value['traQ_S-precache']) {
+    promises.push(clearMainCachePromises())
+  }
+  if (cacheCategoryToIsSelected.value['files-cache']) {
+    promises.push(clearCacheStorage('files-cache'))
+  }
+  if (cacheCategoryToIsSelected.value['thumbnail-cache']) {
+    promises.push(clearCacheStorage('thumbnail-cache'))
+  }
+  await Promise.all(promises.flat())
+  if (!cacheCategoryToIsSelected.value['traQ_S-precache']) {
+    isClearingCache.value = false
+    clearModal()
+    showToast()
+    return
+  }
+  const registration = await navigator.serviceWorker?.getRegistration()
+  if (!registration) {
+    isClearingCache.value = false
+    clearModal()
+    showToast()
+    return
+  }
+  registration.unregister()
+  isClearingCache.value = false
+  showToast('1秒後にリロードします')
+  await wait(1000)
+  clearModal()
+  window.location.reload()
+}
+</script>
+
+<style lang="scss" module>
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.checkboxContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.checkbox {
+  @include color-ui-secondary;
+  &:has(:checked) {
+    @include color-ui-primary;
+  }
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 8px;
+  align-items: center;
+  cursor: pointer;
+  border: solid 2px transparent;
+  border-radius: 4px;
+  &:focus-within {
+    border-color: $theme-accent-focus-default;
+  }
+}
+.label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 8px 16px;
+}
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+}
+</style>