Implement in-unison reload (#7196)

* Resolve #6804
Implement unison reload

* :v:

* fix

* Update share.vue

fix

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

10 files changed, 32 insertions, 11 deletions

diff --git a/src/client/account.ts b/src/client/account.ts
index 05faeb3220..e5b451cf14 100644
--- a/src/client/account.ts
+++ b/src/client/account.ts
@@ -1,6 +1,7 @@
 import { reactive } from 'vue';
 import { apiUrl } from '@/config';
 import { waiting } from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
 
 // TODO: 他のタブと永続化されたstateを同期
 
@@ -75,7 +76,7 @@ export async function login(token: Account['token']) {
 	const me = await fetchAccount(token);
 	localStorage.setItem('account', JSON.stringify(me));
 	addAccount(me.id, token);
-	location.reload();
+	unisonReload();
 }
 
 // このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
diff --git a/src/client/init.ts b/src/client/init.ts
index 146c54fa62..c60b25359b 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -59,6 +59,7 @@ import { search } from '@/scripts/search';
 import { isMobile } from '@/scripts/is-mobile';
 import { getThemes } from '@/theme-store';
 import { initializeSw } from '@/scripts/initialize-sw';
+import { reloadChannel } from '@/scripts/unison-reload';
 
 console.info(`Misskey v${version}`);
 
@@ -106,6 +107,9 @@ if (defaultStore.state.reportError && !_DEV_) {
 // タッチデバイスでCSSの:hoverを機能させる
 document.addEventListener('touchend', () => {}, { passive: true });
 
+// 一斉リロード
+reloadChannel.addEventListener('message', () => location.reload());
+
 //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 // TODO: いつの日にか消したい
 const vh = window.innerHeight * 0.01;
diff --git a/src/client/pages/settings/deck.vue b/src/client/pages/settings/deck.vue
index 30d36d4a06..cbc5edca94 100644
--- a/src/client/pages/settings/deck.vue
+++ b/src/client/pages/settings/deck.vue
@@ -40,6 +40,7 @@ import FormBase from '@/components/form/base.vue';
 import FormGroup from '@/components/form/group.vue';
 import { deckStore } from '@/ui/deck/deck-store';
 import * as os from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
 
 export default defineComponent({
 	components: {
@@ -81,7 +82,7 @@ export default defineComponent({
 			});
 			if (canceled) return;
 
-			location.reload();
+			unisonReload();
 		}
 	},
 
@@ -99,7 +100,7 @@ export default defineComponent({
 			});
 			if (canceled) return;
 			this.profile = name;
-			location.reload();
+			unisonReload();
 		}
 	}
 });
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 9314e14dab..0e741d474c 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -96,6 +96,7 @@ import { langs } from '@/config';
 import { defaultStore } from '@/store';
 import { ColdDeviceStorage } from '@/store';
 import * as os from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
 
 export default defineComponent({
 	components: {
@@ -200,7 +201,7 @@ export default defineComponent({
 			});
 			if (canceled) return;
 
-			location.reload();
+			unisonReload();
 		}
 	}
 });
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index 54bf56930d..1b4aa70eca 100644
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@@ -52,6 +52,7 @@ import FormBase from '@/components/form/base.vue';
 import FormButton from '@/components/form/button.vue';
 import { scroll } from '@/scripts/scroll';
 import { signout } from '@/account';
+import { unisonReload } from '@/scripts/unison-reload';
 
 export default defineComponent({
 	components: {
@@ -160,7 +161,7 @@ export default defineComponent({
 			clear: () => {
 				localStorage.removeItem('locale');
 				localStorage.removeItem('theme');
-				location.reload();
+				unisonReload();
 			},
 			faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faEnvelope, faCloud,
 		};
diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue
index c6ec9f6c0a..c0b9625098 100644
--- a/src/client/pages/settings/other.vue
+++ b/src/client/pages/settings/other.vue
@@ -40,6 +40,7 @@ import * as os from '@/os';
 import { debug } from '@/config';
 import { defaultStore } from '@/store';
 import { signout } from '@/account';
+import { unisonReload } from '@/scripts/unison-reload';
 
 export default defineComponent({
 	components: {
@@ -76,7 +77,7 @@ export default defineComponent({
 		changeDebug(v) {
 			console.log(v);
 			localStorage.setItem('debug', v.toString());
-			location.reload();
+			unisonReload();
 		},
 
 		onChangeInjectFeaturedNote(v) {
diff --git a/src/client/pages/settings/plugin.install.vue b/src/client/pages/settings/plugin.install.vue
index 0873f28d23..0f6393f73c 100644
--- a/src/client/pages/settings/plugin.install.vue
+++ b/src/client/pages/settings/plugin.install.vue
@@ -28,6 +28,7 @@ import FormButton from '@/components/form/button.vue';
 import MkInfo from '@/components/ui/info.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
+import { unisonReload } from '@/scripts/unison-reload';
 
 export default defineComponent({
 	components: {
@@ -138,7 +139,7 @@ export default defineComponent({
 			os.success();
 
 			this.$nextTick(() => {
-				location.reload();
+				unisonReload();
 			});
 		},
 	}
diff --git a/src/client/pages/settings/plugin.manage.vue b/src/client/pages/settings/plugin.manage.vue
index 88eeef2bb2..5fd93d8b72 100644
--- a/src/client/pages/settings/plugin.manage.vue
+++ b/src/client/pages/settings/plugin.manage.vue
@@ -76,7 +76,7 @@ export default defineComponent({
 			ColdDeviceStorage.set('plugins', this.plugins.filter(x => x.id !== plugin.id));
 			os.success();
 			this.$nextTick(() => {
-				location.reload();
+				unisonReload();
 			});
 		},
 
diff --git a/src/client/scripts/unison-reload.ts b/src/client/scripts/unison-reload.ts
new file mode 100644
index 0000000000..92556aefaa
--- /dev/null
+++ b/src/client/scripts/unison-reload.ts
@@ -0,0 +1,10 @@
+// SafariがBroadcastChannel未実装なのでライブラリを使う
+import { BroadcastChannel } from 'broadcast-channel';
+
+export const reloadChannel = new BroadcastChannel<'reload'>('reload');
+
+// BroadcastChannelを用いて、クライアントが一斉にreloadするようにします。
+export function unisonReload() {
+	reloadChannel.postMessage('reload');
+	location.reload();
+}
diff --git a/src/client/sidebar.ts b/src/client/sidebar.ts
index d7822e9e02..3d23d2f1ce 100644
--- a/src/client/sidebar.ts
+++ b/src/client/sidebar.ts
@@ -5,6 +5,7 @@ import { search } from '@/scripts/search';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { $i } from './account';
+import { unisonReload } from '@/scripts/unison-reload';
 
 export const sidebarDef = {
 	notifications: {
@@ -133,13 +134,13 @@ export const sidebarDef = {
 				text: i18n.locale.default,
 				action: () => {
 					localStorage.setItem('ui', 'default');
-					location.reload();
+					unisonReload();
 				}
 			}, {
 				text: i18n.locale.deck,
 				action: () => {
 					localStorage.setItem('ui', 'deck');
-					location.reload();
+					unisonReload();
 				}
 			}, {
 				text: 'Chat (β)',
@@ -151,7 +152,7 @@ export const sidebarDef = {
 				text: i18n.locale.desktop + ' (β)',
 				action: () => {
 					localStorage.setItem('ui', 'desktop');
-					location.reload();
+					unisonReload();
 				}
 			}], ev.currentTarget || ev.target);
 		},