From 59af85bbd1c475509fd98518381081d9e948dcc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Tue, 28 Jan 2020 15:27:27 +0100 Subject: [PATCH] We are a PWA --- public/assets/manifest.json | 5 +++- public/service-worker.js | 52 +++++++++++++++++++++++++++++++++++++ server.js | 5 ++++ src/Vinlottis.vue | 12 +++++++++ src/styles/global.scss | 3 ++- src/templates/Create.html | 11 ++++++-- src/ui/Highscore.vue | 4 +-- src/ui/TotalBought.vue | 14 +++++----- src/ui/Vipps.vue | 9 ++++--- src/ui/WinGraph.vue | 2 +- src/ui/Wines.vue | 3 ++- 11 files changed, 101 insertions(+), 19 deletions(-) create mode 100644 public/service-worker.js diff --git a/public/assets/manifest.json b/public/assets/manifest.json index 73ee899..667ed02 100644 --- a/public/assets/manifest.json +++ b/public/assets/manifest.json @@ -1,8 +1,11 @@ { "author": "Kasper Rynning-Tønnesen og Kevin Midbøe", "name": "Vinlotteri Knowit", + "description": "Knowits ukentlige vinlotteri-statistikk-side.", "short_name": "Vinlottis", - "start_url": "/#/", + "start_url": "/", + "dir": "ltr", + "lang": "nb-NO", "icons": [ { "src": "/public/assets/images/android-chrome-144x144.png", diff --git a/public/service-worker.js b/public/service-worker.js new file mode 100644 index 0000000..f9decdc --- /dev/null +++ b/public/service-worker.js @@ -0,0 +1,52 @@ +var version = "v1.0"; +var cacheName = "::vinlottis"; +var CACHE_NAME = version + cacheName; +var STATIC_CACHE_URLS = ["/"]; + +self.addEventListener("activate", event => { + event.waitUntil( + caches + .keys() + .then(keys => keys.filter(key => key !== CACHE_NAME)) + .then(keys => + Promise.all( + keys.map(key => { + console.log(`Deleting cache ${key}`); + return caches.delete(key); + }) + ) + ) + ); +}); + +self.addEventListener("install", event => { + console.log("Service Worker installing."); + event.waitUntil( + caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_CACHE_URLS)) + ); +}); + +self.addEventListener("fetch", event => { + event.respondWith( + fetch(event.request).catch(function() { + return caches.match(event.request); + }) + ); + event.waitUntil( + fetch(event.request) + .then(function(response) { + cache(event.request, response); + }) + .catch(error => {}) + ); +}); + +function cache(request, response) { + if (response.type === "error" || response.type === "opaque") { + return Promise.resolve(); // do not put in cache network errors + } + + return caches + .open(CACHE_NAME) + .then(cache => cache.put(request, response.clone())); +} diff --git a/server.js b/server.js index 6937cfa..4e97681 100644 --- a/server.js +++ b/server.js @@ -48,10 +48,15 @@ passport.use(new LocalStrategy(User.authenticate())); // use static serialize and deserialize of model for passport session support passport.serializeUser(User.serializeUser()); passport.deserializeUser(User.deserializeUser()); + app.use("/public", express.static(path.join(__dirname, "public"))); app.use("/dist", express.static(path.join(__dirname, "public/dist"))); app.use("/", loginApi); app.use("/api/", updateApi); app.use("/api/", retrieveApi); +app.use("/service-worker.js", function(req, res) { + res.sendFile(path.join(__dirname, "public/service-worker.js")); +}); + app.listen(30030); diff --git a/src/Vinlottis.vue b/src/Vinlottis.vue index 30105c2..8098b27 100644 --- a/src/Vinlottis.vue +++ b/src/Vinlottis.vue @@ -16,6 +16,18 @@ export default { }, mounted() { console.log("SNEAKY PETE!"); + if ("serviceWorker" in navigator) { + navigator.serviceWorker + .register("/service-worker.js") + .then(serviceWorker => { + console.log( + "Arbeids arbeideren din er installert. Du kan nå gå offline frem til neste trekning." + ); + }) + .catch(error => { + console.error("Arbeids arbeideren klarer ikke arbeide.", error); + }); + } }, computed: {}, diff --git a/src/styles/global.scss b/src/styles/global.scss index 95d03ff..243222a 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -19,7 +19,8 @@ body { .title { text-align: center; - width: 100vw; + width: fit-content; + margin: 2rem auto; text-align: center; font-family: knowit; margin-top: 3.8rem; diff --git a/src/templates/Create.html b/src/templates/Create.html index 5638b52..e37075d 100644 --- a/src/templates/Create.html +++ b/src/templates/Create.html @@ -3,6 +3,10 @@ Vinlottis + - - + +
diff --git a/src/ui/Highscore.vue b/src/ui/Highscore.vue index f57fff0..fb24bd4 100644 --- a/src/ui/Highscore.vue +++ b/src/ui/Highscore.vue @@ -2,9 +2,7 @@

Highscore

    -
  1. - {{ person.name }} - {{ person.wins.length }} -
    2. +
  2. {{ person.name }} - {{ person.wins.length }}
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue index 07e7682..9981bcf 100644 --- a/src/ui/TotalBought.vue +++ b/src/ui/TotalBought.vue @@ -8,20 +8,20 @@ :key="color.name" >
- {{ + + {{ color.total - }} - kjøpte + }} + + kjøpte
{{ color.win }} vinn - - {{ color.totalPercentage }}% + {{ color.totalPercentage }}%
- {{ color.percentage }}% vinn + {{ color.percentage }}% vinn
diff --git a/src/ui/Vipps.vue b/src/ui/Vipps.vue index 52f4503..0a1d151 100644 --- a/src/ui/Vipps.vue +++ b/src/ui/Vipps.vue @@ -43,11 +43,14 @@ export default { return this.amount * 1000; }, vippsUrlBasedOnUserAgent: function() { - if (navigator.userAgent.includes('iPhone')) { - return "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾&a=" + this.price + if (navigator.userAgent.includes("iPhone")) { + return ( + "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾&a=" + + this.price + ); } - return vippsUrl = "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾" + return "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾"; } }, methods: { diff --git a/src/ui/WinGraph.vue b/src/ui/WinGraph.vue index d1d09da..1fa7a5b 100644 --- a/src/ui/WinGraph.vue +++ b/src/ui/WinGraph.vue @@ -79,7 +79,7 @@ export default { title: { display: true, text: "Antall vinn", - fontSize: 20, + fontSize: 20 }, legend: { labels: { diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue index c476fd8..ad5bb06 100644 --- a/src/ui/Wines.vue +++ b/src/ui/Wines.vue @@ -13,7 +13,8 @@ v-if="wine.vivinoLink != '' && wine.vivinoLink != null" @click="wineClick(wine)" > - {{ wine.name }} - {{ wine.rating }} i + {{ wine.name }} + - {{ wine.rating }} i rating - {{ wine.occurences }} gang(er)