Update: improve update-ready display

Author: mysticatea

.eslintrc.json

@@ -15,6 +15,7 @@
         "browser": false
     },
     "globals": {
+        "applicationCache": false,
         "atob": false,
         "btoa": false,
         "console": false,

src/app-state.js

@@ -24,6 +24,7 @@ export default class PlaygroundState {
         this.messages = []
         this.fixedCode = code
         this.fixedMessages = []
+        this.showUpdateReadyToast = false
 
         const deserialized =
             typeof serializedString === "string" &&

src/app.vue

@@ -49,7 +49,6 @@
             </div>
         </div>
         <div class="app__footer">
-            <div class="app__footer-message"/>
             <div
                 class="app__version-item"
                 v-for="(v, name) in versions"
@@ -59,6 +58,10 @@
                 v{{ v.version }}
             </div>
         </div>
+        <div class="app__update-ready-toast" v-if="showUpdateReadyToast">
+            <div>Please reload because a new version of this site is available.</div>
+            <button @click="reload">Reload</button>
+        </div>
     </div>
 </template>
 
@@ -79,7 +82,7 @@ export default {
     },
 
     data() {
-        return new AppState(window.location.hash.slice(1))
+        return new AppState(location.hash.slice(1))
     },
 
     computed: {
@@ -140,11 +143,15 @@ export default {
         },
 
         onUrlHashChange() {
-            this.$data.deserialize(window.location.hash.slice(1))
+            this.$data.deserialize(location.hash.slice(1))
         },
 
         applyUrlHash() {
-            window.location.replace(`#${this.$data.serialize()}`)
+            location.replace(`#${this.$data.serialize()}`)
+        },
+
+        reload() {
+            location.reload(false)
         },
     },
 }
@@ -234,15 +241,44 @@ a:hover {
     flex-shrink: 0;
     border-top: 1px solid #CCC;
 }
-.app__footer-message {
-    flex-grow: 1;
-    color: #B71C1C;
-}
 .app__version-item {
     flex-shrink: 0;
     margin-right: 8px;
 }
 .app__version-item:not(:last-child)::after {
     content: ","
 }
+
+.app__update-ready-toast {
+    display: block;
+    position: absolute;
+    right: 24px;
+    bottom: 32px;
+    width: 320px;
+    padding: 8px;
+    border: 1px solid #4CAF50;
+    border-radius: 3px;
+    background: white;
+    box-shadow: 0 4px 16px rgba(0,0,0, 0.5);
+    text-align: center;
+    animation: AppToastIn 0.333s;
+}
+.app__update-ready-toast > div {
+    text-align: left;
+}
+.app__update-ready-toast > button {
+    margin-top: 8px;
+    padding: 4px 32px;
+}
+
+@keyframes AppToastIn {
+    0% {
+        opacity: 0;
+        transform: translate(0, 50%) scale(0.5);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
 </style>

src/index.html

@@ -146,20 +146,6 @@
             }
         })(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.
         window.onerror = function onLoadError() {
             MainContent.innerHTML = "Failed to load. Please ensure you are using a browser which supports ES2015."

src/index.js

@@ -1,6 +1,26 @@
 import Vue from "vue"
 import App from "./app.vue"
 
-new Vue({
-    render: (h) => h(App),
-}).$mount("#main")
+const app = new Vue({
+    computed: {
+        updateReady: {
+            get() {
+                return this.$refs.app.showUpdateReadyToast
+            },
+            set(value) {
+                this.$refs.app.showUpdateReadyToast = value
+            },
+        },
+    },
+    render: (h) => h(App, { ref: "app" }),
+})
+app.$mount("#main")
+
+// Check update.
+window.addEventListener("load", () => {
+    applicationCache.addEventListener("updateready", () => {
+        if (applicationCache.status === applicationCache.UPDATEREADY) {
+            app.updateReady = true
+        }
+    })
+})