accountsストアはindexedDBで保持するように

src/client/account.ts

@@ -1,7 +1,8 @@
+import { get, set } from '@client/scripts/idb-proxy';
 import { reactive } from 'vue';
 import { apiUrl } from '@client/config';
 import { waiting } from '@client/os';
-import { unisonReload } from '@client/scripts/unison-reload';
+import { unisonReload, reloadChannel } from '@client/scripts/unison-reload';
 
 // TODO: 他のタブと永続化されたstateを同期
 
@@ -17,22 +18,44 @@ const data = localStorage.getItem('account');
 // TODO: 外部からはreadonlyに
 export const $i = data ? reactive(JSON.parse(data) as Account) : null;
 
-export function signout() {
+export async function signout() {
+	waiting();
 	localStorage.removeItem('account');
+
+	//#region Remove account
+	const accounts = await getAccounts();
+	accounts.splice(accounts.findIndex(x => x.id === $i.id), 1);
+	set('accounts', accounts);
+	//#endregion
+
+	//#region Remove push notification registration
+	await navigator.serviceWorker.ready.then(async r => {
+		const push = await r.pushManager.getSubscription();
+		if (!push) return;
+		return fetch(`${apiUrl}/sw/unregister`, {
+			method: 'POST',
+			body: JSON.stringify({
+				i: $i.token,
+				endpoint: push.endpoint,
+			}),
+		});
+	});
+	//#endregion
+
 	document.cookie = `igi=; path=/`;
-	location.href = '/';
+
+	if (accounts.length > 0) login(accounts[0].token);
+	else unisonReload(true);
 }
 
-export function getAccounts() {
+export async function getAccounts(): Promise<{ id: Account['id'], token: Account['token'] }[]> {
-	const accountsData = localStorage.getItem('accounts');
+	return (await get('accounts')) || [];
-	const accounts: { id: Account['id'], token: Account['token'] }[] = accountsData ? JSON.parse(accountsData) : [];
-	return accounts;
 }
 
-export function addAccount(id: Account['id'], token: Account['token']) {
+export async function addAccount(id: Account['id'], token: Account['token']) {
-	const accounts = getAccounts();
+	const accounts = await getAccounts();
 	if (!accounts.some(x => x.id === id)) {
-		localStorage.setItem('accounts', JSON.stringify(accounts.concat([{ id, token }])));
+		await set('accounts', accounts.concat([{ id, token }]));
 	}
 }
 
@@ -47,7 +70,7 @@ function fetchAccount(token): Promise<Account> {
 		})
 		.then(res => {
 			// When failed to authenticate user
-			if (res.status >= 400 && res.status < 500) {
+			if (res.status !== 200 && res.status < 500) {
 				return signout();
 			}
 
@@ -69,15 +92,22 @@ export function updateAccount(data) {
 }
 
 export function refreshAccount() {
-	fetchAccount($i.token).then(updateAccount);
+	return fetchAccount($i.token).then(updateAccount);
 }
 
-export async function login(token: Account['token']) {
+export async function login(token: Account['token'], redirect?: string) {
 	waiting();
 	if (_DEV_) console.log('logging as token ', token);
 	const me = await fetchAccount(token);
 	localStorage.setItem('account', JSON.stringify(me));
-	addAccount(me.id, token);
+	await addAccount(me.id, token);
+
+	if (redirect) {
+		reloadChannel.postMessage('reload');
+		location.href = redirect;
+		return;
+	}
+
 	unisonReload();
 }
 

src/client/init.ts

@@ -4,6 +4,15 @@
 
 import '@client/style.scss';
 
+//#region account indexedDB migration 
+import { set } from '@client/scripts/idb-proxy';
+
+if (localStorage.getItem('accounts') != null) {
+	set('accounts', JSON.parse(localStorage.getItem('accounts')));
+	localStorage.removeItem('accounts');
+}
+//#endregion
+
 import * as Sentry from '@sentry/browser';
 import { Integrations } from '@sentry/tracing';
 import { computed, createApp, watch } from 'vue';

src/client/scripts/get-account-from-id.ts

@@ -0,0 +1,7 @@
+import { get } from '@client/scripts/idb-proxy';
+
+export async function getAccountFromId(id: string) {
+	const accounts = await get('accounts') as { token: string; id: string; }[];
+	if (!accounts) console.log('Accounts are not recorded');
+	return accounts.find(e => e.id === id);
+}

src/client/scripts/idb-proxy.ts

@@ -0,0 +1,35 @@
+// FirefoxのプライベートモードなどではindexedDBが使用不可能なので、
+// indexedDBが使えない環境ではlocalStorageを使う
+import {
+	get as iget,
+	set as iset,
+	del as idel,
+} from 'idb-keyval';
+
+const fallbackName = (key: string) => `idbfallback::${key}`;
+
+let idbAvailable = typeof window !== 'undefined' ? !!window.indexedDB : true;
+
+if (idbAvailable) {
+	try {
+		const request = indexedDB.open('keyval-store');
+		if (request.error) idbAvailable = false;
+	} catch (e) {
+		idbAvailable = false;
+	}
+}
+
+export async function get(key: string) {
+	if (idbAvailable) return iget(key);
+	return JSON.parse(localStorage.getItem(fallbackName(key)));
+}
+
+export async function set(key: string, val: any) {
+	if (idbAvailable) return iset(key, val);
+	return localStorage.setItem(fallbackName(key), JSON.stringify(val));
+}
+
+export async function del(key: string) {
+	if (idbAvailable) return idel(key);
+	return localStorage.removeItem(fallbackName(key));
+}