jcreek/EstimationPoker
1
0
Fork 0
mirror of https://github.com/jcreek/EstimationPoker.git synced 2026-07-12 18:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(*): Add service worker

Browse Source
This commit is contained in:
Josh Creek
2023-07-12 11:49:11 +00:00
parent 5b9bd29382
commit 6dc835f4c9
4 changed files with 67 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.html
+41 -4
View File
@@ -3,14 +3,51 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon-32x32.png" /> <link rel="icon" href="%sveltekit.assets%/favicon-32x32.png" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="manifest" href="/site.webmanifest" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>Estimation Poker</title> <title>Estimation Poker</title>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" style="margin: 0; font-family: Arial, sans-serif;"> <body data-sveltekit-preload-data="hover" style="margin: 0; font-family: Arial, sans-serif">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
<script>
let deferredPrompt;
const installButton = document.getElementById('install-app-btn-container');
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
installButton.style.display = 'block';
});
installButton.addEventListener('click', async (e) => {
// Hide our user interface that shows our A2HS button
installButton.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
if (outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
window.addEventListener('appinstalled', (evt) => {
console.log('a2hs', 'appinstalled', evt);
});
</script>
</body> </body>
</html> </html>
src/routes/+layout.svelte
+5 -5
View File
@@ -2,7 +2,7 @@
<div class="topbar-items"><h1><a href="/">Estimation Poker</a></h1></div> <div class="topbar-items"><h1><a href="/">Estimation Poker</a></h1></div>
<p id="install-app-btn-container" class="topbar-items"> <p id="install-app-btn-container" class="topbar-items">
<button id="install-offline-app" class="button button-black"> <button id="install-offline-app" class="button button-black">
<span>Install the app (you can even use it offline!)</span> <span>Install the app</span>
</button> </button>
</p> </p>
</header> </header>
@@ -118,7 +118,7 @@
color: #81796c; color: #81796c;
} }
/* .button { .button {
appearance: none; appearance: none;
border: 1px solid rgba(27, 31, 35, 0.15); border: 1px solid rgba(27, 31, 35, 0.15);
border-radius: 6px; border-radius: 6px;
@@ -158,7 +158,7 @@
outline: none; outline: none;
} }
.button-green { /* .button-green {
background-color: #2ea44f; background-color: #2ea44f;
} }
@@ -178,7 +178,7 @@
.button-green:active { .button-green:active {
background-color: #298e46; background-color: #298e46;
box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset; box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
} } */
.button-black { .button-black {
background-color: #423e37; background-color: #423e37;
@@ -188,7 +188,7 @@
background-color: #2e2b26; background-color: #2e2b26;
} }
.button-blue { /* .button-blue {
background-color: #388697; background-color: #388697;
} }
static/service-worker.js
+8
View File
@@ -0,0 +1,8 @@
self.addEventListener('install', (event) => {
console.log('[Service Worker] Installing Service Worker ...', event);
});
self.addEventListener('activate', (event) => {
console.log('[Service Worker] Activating Service Worker ...', event);
return self.clients.claim();
});
static/site.webmanifest
+13 -1
View File
@@ -1 +1,13 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#8D6A9F","background_color":"#ffffff","display":"standalone"} {
"name": "Estimation Poker",
"short_name": "Estimation Poker",
"description": "A cool estimation poker app",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"start_url": "/",
"theme_color": "#8D6A9F",
"background_color": "#ffffff",
"display": "standalone"
}