Update: add update notification

Author: mysticatea

src/app.vue

@@ -36,6 +36,7 @@
             </div>
         </div>
         <div class="app__footer">
+            <div class="app__footer-message"/>
             <div
                 class="app__version-item"
                 v-for="(version, name) in versions"
@@ -65,7 +66,7 @@ export default {
     },
 
     data() {
-        return deserializeState(location.hash.slice(1))
+        return deserializeState(window.location.hash.slice(1))
     },
 
     computed: {
@@ -129,24 +130,23 @@ export default {
         },
 
         onEditorInitialize() {
-            this.$emit("initialize")
+            window.MainContent.show()
         },
 
         onConfigChange() {
             this.applyUrlHash()
         },
 
         onUrlHashChange() {
-            const newSerializedState = location.hash.slice(1)
+            const newSerializedState = window.location.hash.slice(1)
             const oldSerializedState = serializeState(this.$data)
-
             if (newSerializedState !== oldSerializedState) {
                 Object.assign(this.$data, deserializeState(newSerializedState))
             }
         },
 
         applyUrlHash() {
-            location.hash = `#${serializeState(this.$data)}`
+            window.location.hash = `#${serializeState(this.$data)}`
         },
     },
 }
@@ -216,9 +216,12 @@ a:hover {
 
 .app__footer {
     display: flex;
-    justify-content: flex-end;
     border-top: 1px solid #CCC;
 }
+.app__footer-message {
+    flex-grow: 1;
+    color: #B71C1C;
+}
 .app__version-item {
     margin-right: 8px;
 }

src/index.html

@@ -143,9 +143,29 @@
                 SplashScreen = undefined
                 MainContent = undefined
             }
-        })(window.SplashScreen, window.MainContent)
+        })(SplashScreen, MainContent)
+
+        // Check update.
+        window.addEventListener("load", function() {
+            applicationCache.addEventListener("updateready", function() {
+                if (applicationCache.status == applicationCache.UPDATEREADY) {
+                    applicationCache.swapCache()
+
+                    var footer = document.querySelector(".app__footer-message")
+                    if (footer) {
+                        footer.textContent = "Please reload because a new version of this site is available."
+                    }
+                }
+            })
+        })
+
+        // Show loading error.
+        function onLoadError() {
+            MainContent.innerHTML = "Failed to load. Please ensure you are using the browser which supports ES2015."
+            MainContent.show()
+        }
     </script>
-    <script src="index.js" async></script>
+    <script src="index.js" async onerror="onLoadError"></script>
 </body>
 
 </html>

src/index.js

@@ -2,11 +2,5 @@ import Vue from "vue"
 import App from "./app.vue"
 
 new Vue({
-    render: (h) => h(App, {
-        on: {
-            initialize() {
-                window.MainContent.show()
-            },
-        },
-    }),
+    render: (h) => h(App),
 }).$mount("#main")