Skip to content

Commit 4d16a9c

Browse files
committed
Update: add update notification
1 parent 33eeb55 commit 4d16a9c

File tree

3 files changed

+32
-15
lines changed

3 files changed

+32
-15
lines changed

src/app.vue

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
</div>
3737
</div>
3838
<div class="app__footer">
39+
<div class="app__footer-message"/>
3940
<div
4041
class="app__version-item"
4142
v-for="(version, name) in versions"
@@ -65,7 +66,7 @@ export default {
6566
},
6667
6768
data() {
68-
return deserializeState(location.hash.slice(1))
69+
return deserializeState(window.location.hash.slice(1))
6970
},
7071
7172
computed: {
@@ -129,24 +130,23 @@ export default {
129130
},
130131
131132
onEditorInitialize() {
132-
this.$emit("initialize")
133+
window.MainContent.show()
133134
},
134135
135136
onConfigChange() {
136137
this.applyUrlHash()
137138
},
138139
139140
onUrlHashChange() {
140-
const newSerializedState = location.hash.slice(1)
141+
const newSerializedState = window.location.hash.slice(1)
141142
const oldSerializedState = serializeState(this.$data)
142-
143143
if (newSerializedState !== oldSerializedState) {
144144
Object.assign(this.$data, deserializeState(newSerializedState))
145145
}
146146
},
147147
148148
applyUrlHash() {
149-
location.hash = `#${serializeState(this.$data)}`
149+
window.location.hash = `#${serializeState(this.$data)}`
150150
},
151151
},
152152
}
@@ -216,9 +216,12 @@ a:hover {
216216
217217
.app__footer {
218218
display: flex;
219-
justify-content: flex-end;
220219
border-top: 1px solid #CCC;
221220
}
221+
.app__footer-message {
222+
flex-grow: 1;
223+
color: #B71C1C;
224+
}
222225
.app__version-item {
223226
margin-right: 8px;
224227
}

src/index.html

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,29 @@
143143
SplashScreen = undefined
144144
MainContent = undefined
145145
}
146-
})(window.SplashScreen, window.MainContent)
146+
})(SplashScreen, MainContent)
147+
148+
// Check update.
149+
window.addEventListener("load", function() {
150+
applicationCache.addEventListener("updateready", function() {
151+
if (applicationCache.status == applicationCache.UPDATEREADY) {
152+
applicationCache.swapCache()
153+
154+
var footer = document.querySelector(".app__footer-message")
155+
if (footer) {
156+
footer.textContent = "Please reload because a new version of this site is available."
157+
}
158+
}
159+
})
160+
})
161+
162+
// Show loading error.
163+
function onLoadError() {
164+
MainContent.innerHTML = "Failed to load. Please ensure you are using the browser which supports ES2015."
165+
MainContent.show()
166+
}
147167
</script>
148-
<script src="index.js" async></script>
168+
<script src="index.js" async onerror="onLoadError"></script>
149169
</body>
150170

151171
</html>

src/index.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,5 @@ import Vue from "vue"
22
import App from "./app.vue"
33

44
new Vue({
5-
render: (h) => h(App, {
6-
on: {
7-
initialize() {
8-
window.MainContent.show()
9-
},
10-
},
11-
}),
5+
render: (h) => h(App),
126
}).$mount("#main")

0 commit comments

Comments
 (0)