service worker stuff

frontend/src/App.vue

@@ -16,6 +16,15 @@
 			</option>
 		</select>
 		<label for="lang" style="opacity:0" >Language</label>
+		<div v-if="showUpdateUI" style="position: fixed;bottom: 0;z-index: 1;background: rgba(0,0,0,0.5);padding: 20pt;" class="center-stuff">
+			<p class="update-dialog__content">
+				A new version is available. Refresh to load it?
+			</p>
+			<div class="update-dialog__actions">
+				<button @click="update">Update</button>
+				<button @click="showUpdateUI = false">Cancel</button>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -26,6 +35,7 @@ export default {
 	name: 'App',
 	data: () => ({
 		isConnected: false,
+		c: false,
 	}),
 	computed: {
 	},
@@ -48,12 +58,23 @@ export default {
 	methods: {
 		storeLangPref() {
 			localStorage.setItem('lang', this.$i18n.locale)
+		},
+		async update() {
+			this.showUpdateUI = false;
+			await this.$workbox.messageSW({ type: "SKIP_WAITING" });
 		}
 	},
 	mounted() {
 		if (localStorage.getItem('lang'))
 			this.$i18n.locale = localStorage.getItem('lang')
 	},
+	created() {
+		if (this.$workbox) {
+			this.$workbox.addEventListener("waiting", () => {
+				this.showUpdateUI = true;
+			});
+		}
+	}
 }
 </script>
 

frontend/src/registerServiceWorker.js

@@ -3,15 +3,15 @@ import { Workbox } from "workbox-window";
 let wb;
 
 if ("serviceWorker" in navigator) {
-  wb = new Workbox(`${process.env.BASE_URL}service-worker.js`);
+	wb = new Workbox(`${process.env.BASE_URL}service-worker.js`);
 
-  wb.addEventListener("controlling", () => {
+	wb.addEventListener("controlling", () => {
-    window.location.reload();
+		window.location.reload();
-  });
+	});
 
-  wb.register();
+	wb.register();
 } else {
-  wb = null;
+	wb = null;
 }
 
 export default wb;