We are a PWA

This commit is contained in:
Kasper Rynning-Tønnesen
2020-01-28 15:27:27 +01:00
parent 854d4fd553
commit 59af85bbd1
11 changed files with 101 additions and 19 deletions

View File

@@ -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",

52
public/service-worker.js Normal file
View File

@@ -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()));
}

View File

@@ -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);

View File

@@ -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: {},

View File

@@ -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;

View File

@@ -3,6 +3,10 @@
<head>
<title>Vinlottis</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Knowits ukentlige vinlotteri-statistikk-side."
/>
<link
rel="apple-touch-icon"
sizes="152x152"
@@ -28,8 +32,11 @@
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#dbeede" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<div id="app"></div>

View File

@@ -2,9 +2,7 @@
<div class="highscores" v-if="highscore.length > 0">
<h3>Highscore</h3>
<ol>
<li v-for="person in highscore">
{{ person.name }} - {{ person.wins.length }}
</li>
<li v-for="person in highscore">{{ person.name }} - {{ person.wins.length }}</li>
</ol>
</div>
</template>

View File

@@ -8,20 +8,20 @@
:key="color.name"
>
<div class="number-container">
<span :class="color.name + ' bought-number-span'">{{
<span :class="color.name + ' bought-number-span'">
{{
color.total
}}</span>
<span> kjøpte</span>
}}
</span>
<span>kjøpte</span>
</div>
<div class="inner-text-container">
<div>
{{ color.win }} vinn -
<span class="small">{{ color.totalPercentage }}</span
>%
<span class="small">{{ color.totalPercentage }}</span>%
</div>
<div>
<span :class="color.name + ' small'">{{ color.percentage }}</span
>% vinn
<span :class="color.name + ' small'">{{ color.percentage }}</span>% vinn
</div>
</div>
</div>

View File

@@ -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: {

View File

@@ -79,7 +79,7 @@ export default {
title: {
display: true,
text: "Antall vinn",
fontSize: 20,
fontSize: 20
},
legend: {
labels: {

View File

@@ -13,7 +13,8 @@
v-if="wine.vivinoLink != '' && wine.vivinoLink != null"
@click="wineClick(wine)"
>
<span class="truncate">{{ wine.name }}</span> - {{ wine.rating }} i
<span class="truncate">{{ wine.name }}</span>
- {{ wine.rating }} i
rating - {{ wine.occurences }} gang(er)
</a>
</li>