Commit aa4fb11f authored by Guus Hoekman's avatar Guus Hoekman

make it a pwa

parent 5cc6823a
Pipeline #76879057 passed with stage
in 1 minute and 36 seconds
......@@ -3,6 +3,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Progressive web app -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#007749">
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<title>{{ site.title }}{% if page.layout == 'season' %} | Seasons | {{ page.season }}{% elsif page.layout == 'league' %} | Leagues | {{ page.competition }} | {{ page.season }}{% elsif page.title %} | {{ page.title }}{% endif %}</title>
......
......@@ -110,3 +110,26 @@ title: Home
var lastUpdated = new Date(2015, 11, 20);
</script>
<script src="js/seasonTable.js"></script>
<!-- Progressive web app -->
<script>
// This is the "Offline page" service worker
// Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
// Check compatibility for the browser we're running this in
if ("serviceWorker" in navigator) {
if (navigator.serviceWorker.controller) {
console.log("[PWA Builder] active service worker found, no need to register");
} else {
// Register the service worker
navigator.serviceWorker
.register("serviceWorker.js", {
scope: "/"
})
.then(function (reg) {
console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
});
}
}
</script>
{
"short_name": "Cann Tables",
"name": "Cann Tables",
"description" : "An alternative way to display the traditional league table",
"icons": [
{
"src": "/img/icon-32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/img/icon-64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "/img/icon-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/img/icon-256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/img/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/img/icon-1024.png",
"sizes": "1024x1024",
"type": "image/png"
}
],
"start_url": "/",
"background_color": "#f5f5f5",
"display": "standalone",
"scope": "/",
"theme_color": "#f5f5f5"
}
\ No newline at end of file
---
layout: base
title: Offline
---
<article class="offline">
<section class="hero is-light">
<div class="hero-body">
<div class="container">
<h1 class="title">
You're offline :(
</h1>
<h2 class="subtitle">
Please reconnect to the internet
</h2>
</div>
</div>
</section>
</article>
\ No newline at end of file
// This is the "Offline page" service worker
const CACHE = "pwabuilder-page";
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
const offlineFallbackPage = "/offline.html";
// Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener("install", function (event) {
console.log("[PWA Builder] Install Event processing");
event.waitUntil(
caches.open(CACHE).then(function (cache) {
console.log("[PWA Builder] Cached offline page during install");
if (offlineFallbackPage === "ToDo-replace-this-name.html") {
return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
}
return cache.add(offlineFallbackPage);
})
);
});
// If any fetch fails, it will show the offline page.
self.addEventListener("fetch", function (event) {
if (event.request.method !== "GET") return;
event.respondWith(
fetch(event.request).catch(function (error) {
// The following validates that the request was for a navigation to a new document
if (
event.request.destination !== "document" ||
event.request.mode !== "navigate"
) {
return;
}
console.error("[PWA Builder] Network request Failed. Serving offline page " + error);
return caches.open(CACHE).then(function (cache) {
return cache.match(offlineFallbackPage);
});
})
);
});
// This is an event that can be fired from your page to tell the SW to update the offline page
self.addEventListener("refreshOffline", function () {
const offlinePageRequest = new Request(offlineFallbackPage);
return fetch(offlineFallbackPage).then(function (response) {
return caches.open(CACHE).then(function (cache) {
console.log("[PWA Builder] Offline page updated from refreshOffline event: " + response.url);
return cache.put(offlinePageRequest, response);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment