Show in-app notification when an update is availble
Change-Id: Ia27addc67f70adf654846ef1a0d2bf9bd9d8024f
diff --git a/css/styles.css b/css/styles.css
index d9bf932..435b652 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -94,6 +94,16 @@
text-decoration: underline;
}
+.update-available {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 16px;
+ background: black;
+ color: white;
+}
+
/* DARK THEME */
@media screen {
.dark-theme {
@@ -114,6 +124,11 @@
.dark-theme .song {
box-shadow: none;
}
+
+ .dark-theme .update-available {
+ background: white;
+ color: black;
+ }
}
@media print {
diff --git a/index.html b/index.html
index 083aada..9e280e7 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,9 @@
</div>
</section>
</div>
+ <div id="update-available" class="update-available" hidden>
+ Hi ha una actualització disponible. <a href="/">Recarrega la pàgina</a> per veure els darrers canvis.
+ </div>
<script src="js/script.js"></script>
</body>
</html>
diff --git a/js/script.js b/js/script.js
index 0a3eef0..1c2ff15 100644
--- a/js/script.js
+++ b/js/script.js
@@ -82,10 +82,18 @@
}
}
+function showUpdateFooter() {
+ document.getElementById('update-available').removeAttribute('hidden');
+}
+
window.addEventListener('load', _ => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
- .then(_ => {
+ .then(reg => {
+ reg.addEventListener('updatefound', _ => {
+ showUpdateFooter();
+ });
+
var promises = [];
bookletNames.forEach(name => {
var p = fetch('concerts/' + name + '.json').then(res => res.json());
diff --git a/sw.js b/sw.js
index 53519f3..403b19e 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-// Version: 1.0.3
+// Version: 1.0.4
var CACHE_NAME = 'all-v1';
var urlsToCache = [
'/',