Improve flush (#7328)

src/server/web/views/flush.pug

@@ -4,35 +4,44 @@ html
 	#msg
 	script.
 		const msg = document.getElementById('msg');
+		const successText = `\nSuccess Flush! <a href="/">Back to Misskey</a>\n成功しました。<a href="/">Misskeyを開き直してください。</a>`;
 
+		message('Start flushing.');
+
+		(async function() {
 			try {
 				localStorage.clear();
-			message('localStorage cleared');
+				message('localStorage cleared.');
 
-			const delidb = indexedDB.deleteDatabase('MisskeyClient');
+				const idbPromises = ['MisskeyClient', 'keyval-store'].map((name, i, arr) => new Promise((res, rej) => {
-			delidb.onsuccess = () => message('indexedDB cleared');
+					const delidb = indexedDB.deleteDatabase(name);
+					delidb.onsuccess = () => res(message(`indexedDB "${name}" cleared. (${i + 1}/${arr.length})`));
+					delidb.onerror = e => rej(e)
+				}));
+
+				await Promise.all(idbPromises);
 
 				if (navigator.serviceWorker.controller) {
 					navigator.serviceWorker.controller.postMessage('clear');
-				navigator.serviceWorker.getRegistrations()
+					await navigator.serviceWorker.getRegistrations()
 						.then(registrations => {
 							return Promise.all(registrations.map(registration => registration.unregister()));
 						})
-					.then(() => {
-						message('Success Flush! Please reopen Misskey.\n成功しました。Misskeyを開き直してください。');
-					})
 						.catch(e => { throw Error(e) });
-			} else {
-				message('Success Flush! Please reopen Misskey.\n成功しました。Misskeyを開き直してください。');
 				}
+
+				message(successText);
 			} catch (e) {
+				message(`\n${e}\n\nFlush Failed. <a href="/flush">Please retry.</a>\n失敗しました。<a href="/flush">もう一度試してみてください。</a>`);
+				message(`\nIf you retry more than 3 times, clear the browser cache or contact to instance admin.\n3回以上試しても失敗する場合、ブラウザのキャッシュを消去し、それでもだめならインスタンス管理者に連絡してみてください。\n`)
+
 				console.error(e);
-			message(`${e}¥n¥nFlush Failed. Please reopen Misskey.\n失敗しました。Misskeyを開き直してください。`);
 				setTimeout(() => {
 					location = '/';
 				}, 10000)
 			}
+		})();
 
 		function message(text) {
-			msg.insertAdjacentHTML('beforeend', `<p>[${(new Date()).toString()}] ${text.replace(/¥n/g,'<br>')}</p>`)
+			msg.insertAdjacentHTML('beforeend', `<p>[${(new Date()).toString()}] ${text.replace(/\n/g,'<br>')}</p>`)
 		}