Implement in-unison reload (#7196)

* Resolve #6804
Implement unison reload

* ✌️

* fix

* Update share.vue

fix

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

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が認識しない

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;

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();
 		}
 	}
 });

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();
 		}
 	}
 });

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,
 		};

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) {

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();
 			});
 		},
 	}

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();
 			});
 		},
 

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();
+}

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);
 		},