Better recovery system

2 files changed, 98 insertions, 84 deletions

diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 12b0d220a9..a0709842b9 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -18,6 +18,8 @@
 // ブロック内に入れてスコープを非グローバル化するとそれが防げます
 // (Chrome以外のブラウザでは検証していません)
 {
+	if (localStorage.getItem('shouldFlush') == 'true') refresh();
+
 	// Get the current url information
 	const url = new URL(location.href);
 
@@ -103,19 +105,25 @@
 				'\n\n' +
 				'New version of Misskey available. The page will be reloaded.');
 
-			// Clear cache (serive worker)
-			try {
-				navigator.serviceWorker.controller.postMessage('clear');
+			refresh();
+		}
+	}, 3000);
+
+	function refresh() {
+		localStorage.setItem('shouldFlush', 'false');
 
-				navigator.serviceWorker.getRegistrations().then(registrations => {
-					registrations.forEach(registration => registration.unregister());
-				});
-			} catch (e) {
-				console.error(e);
-			}
+		// Clear cache (serive worker)
+		try {
+			navigator.serviceWorker.controller.postMessage('clear');
 
-			// Force reload
-			location.reload(true);
+			navigator.serviceWorker.getRegistrations().then(registrations => {
+				registrations.forEach(registration => registration.unregister());
+			});
+		} catch (e) {
+			console.error(e);
 		}
-	}, 3000);
+
+		// Force reload
+		location.reload(true);
+	}
 }
diff --git a/src/client/app/common/views/components/connect-failed.troubleshooter.vue b/src/client/app/common/views/components/connect-failed.troubleshooter.vue
index fffabe5a30..2ee5f67c89 100644
--- a/src/client/app/common/views/components/connect-failed.troubleshooter.vue
+++ b/src/client/app/common/views/components/connect-failed.troubleshooter.vue
@@ -1,34 +1,39 @@
 <template>
 <div class="troubleshooter">
-	<h1>%fa:wrench%%i18n:@title%</h1>
-	<div>
-		<p :data-wip="network == null">
-			<template v-if="network != null">
-				<template v-if="network">%fa:check%</template>
-				<template v-if="!network">%fa:times%</template>
-			</template>
-			{{ network == null ? '%i18n:!@checking-network%' : '%i18n:!@network%' }}<mk-ellipsis v-if="network == null"/>
-		</p>
-		<p v-if="network == true" :data-wip="internet == null">
-			<template v-if="internet != null">
-				<template v-if="internet">%fa:check%</template>
-				<template v-if="!internet">%fa:times%</template>
-			</template>
-			{{ internet == null ? '%i18n:!@checking-internet%' : '%i18n:!@internet%' }}<mk-ellipsis v-if="internet == null"/>
-		</p>
-		<p v-if="internet == true" :data-wip="server == null">
-			<template v-if="server != null">
-				<template v-if="server">%fa:check%</template>
-				<template v-if="!server">%fa:times%</template>
-			</template>
-			{{ server == null ? '%i18n:!@checking-server%' : '%i18n:!@server%' }}<mk-ellipsis v-if="server == null"/>
-		</p>
+	<div class="body">
+		<h1>%fa:wrench%%i18n:@title%</h1>
+		<div>
+			<p :data-wip="network == null">
+				<template v-if="network != null">
+					<template v-if="network">%fa:check%</template>
+					<template v-if="!network">%fa:times%</template>
+				</template>
+				{{ network == null ? '%i18n:!@checking-network%' : '%i18n:!@network%' }}<mk-ellipsis v-if="network == null"/>
+			</p>
+			<p v-if="network == true" :data-wip="internet == null">
+				<template v-if="internet != null">
+					<template v-if="internet">%fa:check%</template>
+					<template v-if="!internet">%fa:times%</template>
+				</template>
+				{{ internet == null ? '%i18n:!@checking-internet%' : '%i18n:!@internet%' }}<mk-ellipsis v-if="internet == null"/>
+			</p>
+			<p v-if="internet == true" :data-wip="server == null">
+				<template v-if="server != null">
+					<template v-if="server">%fa:check%</template>
+					<template v-if="!server">%fa:times%</template>
+				</template>
+				{{ server == null ? '%i18n:!@checking-server%' : '%i18n:!@server%' }}<mk-ellipsis v-if="server == null"/>
+			</p>
+		</div>
+		<p v-if="!end">%i18n:@finding%<mk-ellipsis/></p>
+		<p v-if="network === false"><b>%fa:exclamation-triangle%%i18n:@no-network%</b><br>%i18n:@no-network-desc%</p>
+		<p v-if="internet === false"><b>%fa:exclamation-triangle%%i18n:@no-internet%</b><br>%i18n:@no-internet-desc%</p>
+		<p v-if="server === false"><b>%fa:exclamation-triangle%%i18n:@no-server%</b><br>%i18n:@no-server-desc%</p>
+		<p v-if="server === true" class="success"><b>%fa:info-circle%%i18n:@success%</b><br>%i18n:@success-desc%</p>
 	</div>
-	<p v-if="!end">%i18n:@finding%<mk-ellipsis/></p>
-	<p v-if="network === false"><b>%fa:exclamation-triangle%%i18n:@no-network%</b><br>%i18n:@no-network-desc%</p>
-	<p v-if="internet === false"><b>%fa:exclamation-triangle%%i18n:@no-internet%</b><br>%i18n:@no-internet-desc%</p>
-	<p v-if="server === false"><b>%fa:exclamation-triangle%%i18n:@no-server%</b><br>%i18n:@no-server-desc%</p>
-	<p v-if="server === true" class="success"><b>%fa:info-circle%%i18n:@success%</b><br>%i18n:@success-desc%</p>
+	<footer>
+		<a href="/assets/flush.html">%i18n:@flush%</a> | <a href="/assets/version.html">%i18n:@set-version%</a>
+	</footer>
 </div>
 </template>
 
@@ -77,61 +82,62 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .troubleshooter
-	width 100%
-	max-width 500px
-	text-align left
-	background #fff
-	border-radius 8px
-	border solid 1px #ddd
+	> .body
+		width 100%
+		max-width 500px
+		text-align left
+		background #fff
+		border-radius 8px
+		border solid 1px #ddd
 
-	> h1
-		margin 0
-		padding 0.6em 1.2em
-		font-size 1em
-		color #444
-		border-bottom solid 1px #eee
-
-		> [data-fa]
-			margin-right 0.25em
-
-	> div
-		overflow hidden
-		padding 0.6em 1.2em
-
-		> p
-			margin 0.5em 0
-			font-size 0.9em
+		> h1
+			margin 0
+			padding 0.6em 1.2em
+			font-size 1em
 			color #444
-
-			&[data-wip]
-				color #888
+			border-bottom solid 1px #eee
 
 			> [data-fa]
 				margin-right 0.25em
 
-				&.times
-					color #e03524
+		> div
+			overflow hidden
+			padding 0.6em 1.2em
 
-				&.check
-					color #84c32f
+			> p
+				margin 0.5em 0
+				font-size 0.9em
+				color #444
 
-	> p
-		margin 0
-		padding 0.7em 1.2em
-		font-size 1em
-		color #444
-		border-top solid 1px #eee
+				&[data-wip]
+					color #888
 
-		> b
-			> [data-fa]
-				margin-right 0.25em
+				> [data-fa]
+					margin-right 0.25em
 
-		&.success
-			> b
-				color #39adad
+					&.times
+						color #e03524
+
+					&.check
+						color #84c32f
+
+		> p
+			margin 0
+			padding 0.7em 1.2em
+			font-size 1em
+			color #444
+			border-top solid 1px #eee
 
-		&:not(.success)
 			> b
-				color #ad4339
+				> [data-fa]
+					margin-right 0.25em
+
+			&.success
+				> b
+					color #39adad
+
+			&:not(.success)
+				> b
+					color #ad4339
 
 </style>