Compare commits

..

11 Commits

29 changed files with 152 additions and 200 deletions

20
TODO.md
View File

@ -106,15 +106,26 @@
- schien die gleiche Sache zu sein wie mit dem hidden.bs.modal event
- jetzt kommt es aber trotzdem manchmal wieder
- vllt. ein timeout-Problem?
- x custom validation not triggering error message nor visible styles
- x außerdem bleiben nichtvalid. Werte stehen, wenn man das modal mit ESC schließt und dann mit edit wieder öffnet
- x warum sind im dist/-Folder immer zwei Versionen der gleichen Datei? -> lag an parcel-reporter-static-file-copy
- x revamp Act-icon
- alternative to "-10"?
- at least recreate Electrolize characters in SVG (with fontforge)
- x on KO/Dead soll nur der act-button disabled werden, nicht take damage oder more actions
- muss die property disabled richtig verwenden
- x action-buttons nicht vertically centered
- x color scheme beim Favicon anpassen
- https://realfavicongenerator.net/
- see also here: https://github.com/audreyfeldroy/favicon-cheat-sheet
### open
- custom validation not triggering error message nor visible styles
- außerdem bleiben nichtvalid. Werte stehen, wenn man das modal mit ESC schließt und dann mit edit wieder öffnet
- color scheme beim Favicon anpassen
- favicon checken: https://realfavicongenerator.net/favicon_checker
- Mauszeiger soll Finger werden, wenn er über combatant-name/ini/dice-and-rea hovert
- actions-menu erscheint nicht direkt unter dem Button
- Deployment: use minified libraries (aug-ui, bs, jq)
- focus-related stuff
- after pressing damage button, focus moves to first table row act button
@ -137,7 +148,6 @@
- mal sehen …
- Animationen? Transitions?
- deployment: dist/* soll direkt auf hermes hochgeladen werden
- x warum sind im dist/-Folder immer zwei Versionen der gleichen Datei? -> lag an parcel-reporter-static-file-copy
- HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus
- bootstrap, jquery, font auch lokal vorhalten
- x font

21
icons/README.md Normal file
View File

@ -0,0 +1,21 @@
# Your Favicon Package
This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16)
## Install instructions
To install this package:
Extract this package in the root of your web site. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/favicon.ico</code>.
Insert the following code in the `head` section of your pages:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#004aa5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -2,7 +2,7 @@
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/icons/mstile-150x150.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#004aa5</TileColor>
</tile>
</msapplication>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

7
icons/html_code.html Normal file
View File

@ -0,0 +1,7 @@
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#004aa5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

View File

@ -0,0 +1,13 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="740.000000pt" height="740.000000pt" viewBox="0 0 740.000000 740.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,740.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
</g>
</svg>

After

Width:  |  Height:  |  Size: 521 B

View File

@ -1,9 +1,6 @@
{
"name": "Shadowrun 2e Ini Tracker",
"short_name": "sr2ini",
"start_url": "/",
"description": "A simple Initiative tracker for Shadowrun 2e",
"orientation": "portrait",
"name": "",
"short_name": "",
"icons": [
{
"src": "/icons/android-chrome-192x192.png",
@ -16,7 +13,7 @@
"type": "image/png"
}
],
"theme_color": "deeppink",
"theme_color": "gold",
"background_color": "#004aa5",
"display": "standalone"
}

View File

@ -307,6 +307,7 @@ header.navbar {
color: $fg;
font-weight: bold;
text-align: center;
vertical-align: middle;
.sr2-button {
height: 1.3rem;
@ -330,7 +331,13 @@ header.navbar {
.combatant-actions {
--aug-border-right: 2px;
display: flex;
min-height: 2rem;
min-width: 5rem;
> div {
display: flex;
align-items: center;
}
}
.actions-menu {
@ -345,22 +352,14 @@ header.navbar {
}
}
.max-ini td {
text-shadow: 0 0 .15rem $fg;
}
.max-ini td { text-shadow: 0 0 .15rem $fg; }
.zero-ini td {
color: $fg-dark;
svg { fill: $fg-dark; }
}
.zero-ini td { color: $fg-dark; }
.ko-or-dead td {
background-color: rgba(0, 0, 0, .5);
color: $fg-dark;
text-decoration: line-through .1rem $fg;
.sr2-button svg { fill: $fg-dark; }
}
.badge.bg-warning {
@ -379,12 +378,6 @@ header.navbar {
top: .3rem;
}
.damage-dropdown,
.actions-dropdown {
display: inline-block;
position: relative; // required in order to center dropdowns vertically
}
.damage-monitor,
.actions-menu {
@include aug;

Binary file not shown.

View File

@ -8,11 +8,7 @@
<title>Shadowrun 2e Ini Tracker</title>
<meta name="description" content="A simple Initiative tracker for Shadowrun 2e" />
<meta name="author" content="Eclipse729" />
<!-- <meta name="theme-color" content="" />-->
<link rel="manifest" href="/icons/sr2ini.webmanifest">
<!-- <link type="text/css" rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" > -->
<link type="text/css" rel="stylesheet" href="../node_modules/augmented-ui/augmented-ui.css">
<link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
@ -21,11 +17,11 @@
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/icons/sr2ini.webmanifest">
<link rel="manifest" href="/icons/sr2ini.iconmanifest">
<link rel="shortcut icon" href="/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#004aa5">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
<!-- <meta name="theme-color" content="#004aa5">-->
<meta name="theme-color" content="gold">
</head>
<body>
@ -148,9 +144,9 @@
</symbol>
<!-- act (-10) -->
<symbol id="act" >
<rect x="0" y="272" height="64" width="96" />
<path d="M 160 64 h 64 v 384 h -64 v -296 l -64 64 l -40 -40 Z" />
<path d="M 352 64 h 96 l 64 64 v 256 l -64 64 h -96 l -64 -64 v -256 l 64 -64 l 32 64 h 32 l 32 32 v 192 l -32 32 h -32 l -32 -32 v -192 l 32 -32" fill-rule="evenodd" />
<path d="M 96 228 q 6 2 8 8 v 40 q -2 6 -8 8 h -88 q -6 -2 -8 -8 v -40 q 2 -6 8 -8 z" />
<path d="M 84 178 q -5.5 4.5 -11 0 l -24 -24 q -4.5 -5.5 0 -11 l 76 -76 q 9 -3 12 -4 h 68 q 6 2 8 8 v 368 q -2 6 -8 8 h -44 q -6 -2 -8 -8 v -324 q -0 -8 -5.5 -2.5 z" />
<path d="M 295 444 h 174 q 11 0 21 -11 l 11 -11 q 11 -11 11 -27 v -285 q 0 -16 -11 -27 l -11 -11 q -11 -11 -21 -11 h -174 q -11 0 -21 11 l -11 11 q -11 11 -11 27 v 285 q 0 16 11 27 l 11 11 q 11 11 21 11 z M 452 144 v 216 q 0 8 -1 11 t -5 6 t -6 5 t -10 1 h -96 q -8 0 -10 -1 t -6 -5 t -5 -6 t -1 -11 v -216 q 0 -8 1 -11 t 5 -6 t 6 -5 t 10 -1 h 96 q 8 0 10 1 t 6 5 t 5 6 t 1 11 z" />
</symbol>
<!-- take damage -->
<symbol id="take-damage" >
@ -193,7 +189,7 @@
<!-- footer -->
<div class="footer-container container">
<footer data-augmented-ui="tl-clip br-clip both">
<p><a href="https://git.unterdemradar.de/tobias/sr2ini" tabindex="-1" title="sr2ini">sr2ini</a> | Copyright (C) 2023 by Tobias P | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
<p><a href="https://git.unterdemradar.de/tobias/sr2ini" tabindex="-1" title="sr2ini">sr2ini</a> | Copyright (C) 2023 by Eclipse | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
</footer>
</div>
</body>

View File

@ -36,7 +36,9 @@ const COMBATANT_TABLE_ROW = [
'<td class="combatant-ini" title="Effective initiative (w/ wound penalties)" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="both"></td>\n',
'<td class="combatant-dice-and-rea" title="Iniative dice and reaction" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="both"><span class="combatant-dice"></span>D+<span class="combatant-rea"></span></td>\n',
'<td class="combatant-actions" data-augmented-ui="both">\n',
'<button type="button" class="sr2-button act-button" title="Act and reduce ini by 10"><svg viewbox="0 0 512 512"><use href="#act" /></svg></button>\n',
'<div>\n',
'<button type="button" class="sr2-button act-button" title="Act and reduce ini by 10"><svg viewbox="0 0 512 512"><use href="#act" /></svg></button>\n',
'</div>\n',
'<div class="damage-dropdown">\n',
'<button type="button" class="sr2-button damage-button" title="Take damage"><svg viewbox="0 0 512 512"><use href="#take-damage" /></svg></button>\n',
'</div>\n',
@ -413,10 +415,11 @@ function startNewRound() {
// sort combatants by ini value and add contextual classes
function sortTable() {
// do some clean up: remove previous classes from rows, disable act buttons, remove effective ini and damage badges
// do some clean up: remove previous classes from rows, remove effective ini and damage badges
$(".combatant-row").removeClass("ko-or-dead max-ini zero-ini"); //REGULAR_INI
$(".combatant-row").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
$(".combatant-ini").empty();
// disable all act buttons
$(".combatant-row").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
// mark KO or death with class
$(".combatant-row").each(function() {
if (parseInt($(this).attr("data-damage-stun")) == 10 || parseInt($(this).attr("data-damage-physical")) == 10) {
@ -440,16 +443,16 @@ function sortTable() {
$(this).find(".combatant-ini").append($.parseHTML(PHYSICAL_BADGE_HTML));
$(this).find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-physical")]]);
}
// K.O./dead -> don't add anything
// K.O./dead -> do nothing
if ($(this).hasClass("ko-or-dead")) {
return true;
}
// ini = zero
// ini = zero -> set contextual class
if (parseInt($(this).find(".combatant-ini").text()) == 0) {
$(this).addClass("zero-ini");
return true;
}
// ini = max and non-zero
// ini = max and non-zero -> enable act-button
if (parseInt($(this).find(".combatant-ini").text()) == iniMax && iniMax > 0) {
$(this).addClass("max-ini").find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
return true;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

View File

@ -1,31 +0,0 @@
body {
margin: 0;
height: 100%;
background-color: #004aa5;
}
div {
width: 60%;
margin: auto;
}
button {
position: relative;
top: 100px;
border: 8px solid cyan;
border-radius: 16px;
padding: 16px;
background-color: rgba(0, 0, 0, .75);
box-shadow: 0 0 16px lightcyan, 0 0 32px lightcyan, 0 0 32px cyan, 0 0 64px cyan, 0 0 64px darkcyan, 0 0 128px darkcyan;
}
img {
width: 384px;
height: 384px;
filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(125%) contrast(105%);
}

View File

@ -1,4 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head><link type="text/css" rel="stylesheet" href="tmp.css"></head>
<body><div><button><img src="dice512.png"></button></div></body></html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 2.1 MiB

42
tools/favicon.css Normal file
View File

@ -0,0 +1,42 @@
body {
margin: 24px;
background: url("../../src/img/bg.jpg") -874px -1340px;
/* background-color: #004aa5;*/
}
#border {
width: 576px;
height: 576px;
border-radius: 0px; /*64px; */
padding: 64px;
/* background: linear-gradient(to bottom right, cyan, darkcyan);*/
}
#button {
/* background-color: black;*/
/* border-radius: 32px;*/
padding: 32px;
width: 512px;
height: 512px;
--aug-tl: 48px;
--aug-br: 48px;
--aug-border-all: 24px;
--aug-border-bg: linear-gradient(to bottom right, cyan, darkcyan);
--aug-inlay-x: 24px;
--aug-inlay-y: 24px;
--aug-inlay-bg: rgba(0, 0, 0, .5);
}
svg {
width: 512px;
height: 512px;
transform: scale(.8) translateX(-24px);
}

26
tools/favicon.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="../../node_modules/augmented-ui/augmented-ui.css">
<link type="text/css" rel="stylesheet" href="favicon.css">
</head>
<body>
<div id="border" >
<div id="button" data-augmented-ui="tl-clip-y br-clip-y both">
<svg viewport="0 0 512 512">
<defs>
<linearGradient id="gold" gradientTransform="rotate(60)">
<stop offset="15%" stop-color="yellow" />
<stop offset="55%" stop-color="gold" />
<stop offset="95%" stop-color="orange" />
</linearGradient>
</defs>
<path d="M 96 228 q 6 2 8 8 v 40 q -2 6 -8 8 h -88 q -6 -2 -8 -8 v -40 q 2 -6 8 -8 z" fill="url('#gold')" />
<path d="M 84 178 q -5.5 4.5 -11 0 l -24 -24 q -4.5 -5.5 0 -11 l 76 -76 q 9 -3 12 -4 h 68 q 6 2 8 8 v 368 q -2 6 -8 8 h -44 q -6 -2 -8 -8 v -324 q -0 -8 -5.5 -2.5 z" fill="url('#gold')" />
<path d="M 295 444 h 174 q 11 0 21 -11 l 11 -11 q 11 -11 11 -27 v -285 q 0 -16 -11 -27 l -11 -11 q -11 -11 -21 -11 h -174 q -11 0 -21 11 l -11 11 q -11 11 -11 27 v 285 q 0 16 11 27 l 11 11 q 11 11 21 11 z
M 452 144 v 216 q 0 8 -1 11 t -5 6 t -6 5 t -10 1 h -96 q -8 0 -10 -1 t -6 -5 t -5 -6 t -1 -11 v -216 q 0 -8 1 -11 t 5 -6 t 6 -5 t 10 -1 h 96 q 8 0 10 1 t 6 5 t 5 6 t 1 11 z" fill="url('#gold')" />
</svg>
</div>
</div>
</body>
</html>

View File

@ -1 +0,0 @@
{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/package_files/browserconfig.xml","https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/package_files/favicon.ico","https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/icons/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/icons/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/icons/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/icons/site.webmanifest\">\n<link rel=\"shortcut icon\" href=\"/icons/favicon.ico\">\n<meta name=\"msapplication-TileColor\" content=\"#004aa5\">\n<meta name=\"msapplication-config\" content=\"/icons/browserconfig.xml\">\n<meta name=\"theme-color\" content=\"#004aa5\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-config\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]"]},"files_location":{"type":"path","path":"/icons"},"preview_picture_url":"https://realfavicongenerator.net/files/d925f2495c2cc5046691e320cba3357e995bcbb8/favicon_preview.png","version":"0.16"}

View File

@ -1,59 +0,0 @@
{
"masterPicture": "tools/favicon-master-image.png",
"iconsPath": "/icons",
"design": {
"ios": {
"pictureAspect": "backgroundAndMargin",
"backgroundColor": "#004aa5",
"margin": "11%",
"assets": {
"ios6AndPriorIcons": false,
"ios7AndLaterIcons": false,
"precomposedIcons": false,
"declareOnlyDefaultIcon": true
}
},
"desktopBrowser": {
"design": "raw"
},
"windows": {
"pictureAspect": "noChange",
"backgroundColor": "#004aa5",
"onConflict": "override",
"assets": {
"windows80Ie10Tile": false,
"windows10Ie11EdgeTiles": {
"small": false,
"medium": true,
"big": false,
"rectangle": false
}
}
},
"androidChrome": {
"pictureAspect": "backgroundAndMargin",
"margin": "13%",
"backgroundColor": "#004aa5",
"themeColor": "#004aa5",
"manifest": {
"display": "standalone",
"orientation": "notSet",
"onConflict": "override",
"declared": true
},
"assets": {
"legacyIcon": false,
"lowResolutionIcons": false
}
}
},
"settings": {
"scalingAlgorithm": "Mitchell",
"errorOnImageTooSmall": false,
"readmeFile": false,
"htmlCodeFile": false,
"usePathAsIs": false
}
}

Binary file not shown.

View File

@ -1,23 +0,0 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
<defs>
<clipPath id="clip-headtop">
<path d="M 0 144 v -144 h 216 v 112 h 80 v -112 h 216 v 144 Z" />
</clipPath>
<clipPath id="clip-coattop">
<path d="M 100 264 a 144 132 0 0 0 312 0 h 100 v 256 h -512 v -256 Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="512" height="512" fill="green" stroke="none"/>
<path d="M 112 164 h 288 v 72 l -24 24 h -88 q -32 -128 -64 0 h -88 l -24 -24 v -72 Z" fill-rule="evenodd" /> <!-- glasses -->
<path d="M 136 280 a 132 164 0 0 0 240 0 Z" /> <!-- bottom of head -->
<path d="M 128 144 a 144 128 0 0 1 256 0 Z" clip-path="url(#clip-headtop)"/> <!-- top of head -->
<path d="M 232 0 h 48 v 96 h -48 Z" /> <!-- mohawk -->
<path d="M 64 304 h 384 v 48 l -64 176 h -256 l -64 -192 Z" clip-path="url(#clip-coattop)" /> <!-- coat -->
<path d="M 128 512 h -128 v -112 l 48 -32 l 48 144 Z" />
<path d="M 384 512 h 128 v -112 l -48 -32 l -48 144 Z" />
<!-- <path d="M 32 96 h 448 v 96 l -32 32 h -144 q -56 -160 -96 0 h -144 l -32 -32 v -96 Z" fill-rule="evenodd" /> glasses in big -->
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,38 +0,0 @@
import {manifest, version} from '@parcel/service-worker';
console.log("[Service Worker] Version:", version);
console.log("[Service Worker] Manifest:", manifest);
// install Service Worker
async function install() {
const cache = await caches.open(version); //cacheNAme
console.log("[Service Worker] Caching all: app shell and content");
await cache.addAll(manifest); // fileList
}
console.log("[Service Worker] Install");
self.addEventListener("install", e => e.waitUntil(install()));
// fetch content
self.addEventListener('fetch', (e) => {
e.respondWith((async () => {
const r = await caches.match(e.request);
console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
if (r) {
return r;
}
const response = await fetch(e.request);
const cache = await caches.open(cacheName);
console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
cache.put(e.request, response.clone());
return response;
})());
});
// activate: clear outdated files from cache
async function activate() {
const keys = await caches.keys();
await Promise.all(keys.map(key => key !== version && caches.delete(key)));
};
console.log("[Service Worker] Activate");
self.addEventListener("activate", e => e.waitUntil(activate()));