Skip to content

Commit 38e6168

Browse files
reiroopreiroop
committed
CacheClearモーダルの中に入れるロジックを仮作成(動作未確認)
1 parent b078edb commit 38e6168

File tree

2 files changed

+137
-37
lines changed

2 files changed

+137
-37
lines changed

‎src/components/Settings/BrowserTab/CacheManager.vue

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,17 @@
1010
label="削除する"
1111
type="secondary"
1212
is-danger
13-
@click="clearCache"
13+
@click="openClearCacheModal"
1414
/>
1515
</div>
16+
<clear-cache />
1617
</div>
1718
</template>
1819

1920
<script lang="ts">
2021
import { onMounted, ref } from 'vue'
21-
import { useToastStore } from '/@/store/ui/toast'
22-
import { wait } from '/@/lib/basic/timer'
2322
import { checkStorageManagerSupport } from '/@/lib/dom/browser'
2423
import { prettifyFileSize } from '/@/lib/basic/file'
25-
import { useStampsStore } from '/@/store/entities/stamps'
2624
2725
declare global {
2826
interface StorageEstimate {
@@ -36,50 +34,20 @@ const getStorageUsage = async () => {
3634
3735
return navigator.storage.estimate()
3836
}
39-
40-
const confirmClear = () => window.confirm('本当に削除しますか？')
41-
42-
/* CacheStorageのnameはsw.jsを参照 */
43-
const clearCacheStorage = (cacheName: string) => window.caches.delete(cacheName)
4437
</script>
4538

4639
<script lang="ts" setup>
4740
import FormButton from '/@/components/UI/FormButton.vue'
48-
49-
const { fetchStamps } = useStampsStore()
50-
const { addSuccessToast } = useToastStore()
51-
const showToast = (extraMesage?: string) => {
52-
addSuccessToast(`削除に成功しました${extraMesage ? `: ${extraMesage}` : ''}`)
53-
}
41+
import ClearCache from './ClearCache.vue'
5442
5543
const cacheData = ref<StorageEstimate | null>(null)
5644
const setCacheData = async () => {
5745
cacheData.value = await getStorageUsage()
5846
}
5947
onMounted(setCacheData)
6048
61-
const clearCache = async () => {
62-
if (!confirmClear()) return
63-
64-
const names = await window.caches.keys()
65-
await Promise.all(
66-
names
67-
.filter(name => name.startsWith('traQ_S-precache'))
68-
.map(name => clearCacheStorage(name))
69-
)
70-
await clearCacheStorage('files-cache')
71-
await clearCacheStorage('thumbnail-cache')
72-
73-
const registration = await navigator.serviceWorker?.getRegistration()
74-
if (registration) {
75-
registration.unregister()
76-
showToast('1秒後にリロードします')
77-
setCacheData()
78-
await wait(1000)
79-
window.location.reload()
80-
} else {
81-
showToast()
82-
}
49+
const openClearCacheModal = async () => {
50+
return
8351
}
8452
</script>
8553

‎src/components/Settings/BrowserTab/ClearCache.vue

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<template>
2+
<div>
3+
<h3 :class="$style.header">キャッシュの削除</h3>
4+
<div :class="$style.content">
5+
<p v-if="cacheData && cacheData.usage" :class="$style.usage">
6+
<template v-if="cacheData.usageDetails">
7+
<label v-for="(usage, key) in cacheData.usageDetails" :key="key">
8+
<input v-model="selectedCaches" type="checkbox" :value="key" />
9+
{{ key }} {{ prettifyFileSize(usage) }}
10+
</label>
11+
</template>
12+
<template v-else>
13+
{{ prettifyFileSize(cacheData.usage) }}
14+
</template>
15+
</p>
16+
<div v-for="(cache, index) in selectedCaches" :key="index">
17+
{{ cache }}
18+
</div>
19+
<form-button
20+
:class="$style.button"
21+
label="キャンセル"
22+
@click="closeModal"
23+
/>
24+
<form-button
25+
:class="$style.button"
26+
label="削除する"
27+
is-danger
28+
@click="clearCache"
29+
/>
30+
</div>
31+
</div>
32+
</template>
33+
34+
<script lang="ts">
35+
import { onMounted, ref } from 'vue'
36+
import { useToastStore } from '/@/store/ui/toast'
37+
import { wait } from '/@/lib/basic/timer'
38+
import { checkStorageManagerSupport } from '/@/lib/dom/browser'
39+
import { prettifyFileSize } from '/@/lib/basic/file'
40+
import { useStampsStore } from '/@/store/entities/stamps'
41+
42+
declare global {
43+
interface StorageEstimate {
44+
usageDetails: Record<string, number>
45+
}
46+
}
47+
48+
const isStorageManagerSupported = checkStorageManagerSupport()
49+
const getStorageUsage = async () => {
50+
if (!isStorageManagerSupported) return null
51+
52+
return navigator.storage.estimate()
53+
}
54+
55+
const confirmClear = () => window.confirm('本当に削除しますか？')
56+
57+
/* CacheStorageのnameはsw.jsを参照 */
58+
const clearCacheStorage = (cacheName: string) => window.caches.delete(cacheName)
59+
</script>
60+
61+
<script lang="ts" setup>
62+
import FormButton from '/@/components/UI/FormButton.vue'
63+
64+
const { fetchStamps } = useStampsStore()
65+
const { addSuccessToast } = useToastStore()
66+
const showToast = (extraMesage?: string) => {
67+
addSuccessToast(`削除に成功しました${extraMesage ? `: ${extraMesage}` : ''}`)
68+
}
69+
70+
const cacheData = ref<StorageEstimate | null>(null)
71+
const setCacheData = async () => {
72+
cacheData.value = await getStorageUsage()
73+
}
74+
onMounted(setCacheData)
75+
76+
const selectedCaches = ref<Array<string>>([])
77+
78+
const closeModal = () => {
79+
return
80+
}
81+
82+
const clearCache = async () => {
83+
if (!confirmClear()) return
84+
for (const key of selectedCaches.value) {
85+
switch (key) {
86+
case 'caches': {
87+
const names = await window.caches.keys()
88+
await Promise.all(
89+
names
90+
.filter(name => name.startsWith('traQ_S-precache'))
91+
.map(name => clearCacheStorage(name))
92+
)
93+
break
94+
}
95+
case 'indexedDB': {
96+
await clearCacheStorage('files-cache')
97+
break
98+
}
99+
case 'serviceWorkerRegistrations': {
100+
await clearCacheStorage('thumbnail-cache')
101+
break
102+
}
103+
}
104+
}
105+
const registration = await navigator.serviceWorker?.getRegistration()
106+
if (registration) {
107+
registration.unregister()
108+
showToast('1秒後にリロードします')
109+
setCacheData()
110+
await wait(1000)
111+
window.location.reload()
112+
} else {
113+
showToast()
114+
}
115+
}
116+
</script>
117+
118+
<style lang="scss" module>
119+
.header {
120+
margin-bottom: 8px;
121+
}
122+
.content {
123+
margin-left: 12px;
124+
}
125+
.usage {
126+
margin-bottom: 8px;
127+
}
128+
.button {
129+
margin-top: 8px;
130+
margin-right: 8px;
131+
}
132+
</style>

0 commit comments

Comments
 (0)