Adding PWA (not finished)

This commit is contained in:
MaciejkaG 2024-04-12 22:04:11 +02:00
parent b787e79a00
commit 9a2d02478c
5 changed files with 50 additions and 1 deletions

View File

@ -1,6 +1,6 @@
{
"name": "statki-backend",
"version": "1.0.0",
"version": "0.7.0",
"description": "Backend do gry w statki",
"main": "index.js",
"type": "module",

View File

@ -0,0 +1,25 @@
const statki = "statki-by-maciejka-0.7.0";
const assets = [
"/favicon.ico",
"/assets/css/landing.css",
"/assets/css/main.css",
"/assets/css/responsive.css",
"/assets/css/board.css",
"/assets/css/board-responsive.css",
"/assets/js/battleships-lib.js",
"/assets/js/key-handling.js",
"/assets/js/landing.js",
"/assets/js/main.js",
"/assets/js/socket-err-handler.js",
"/assets/js/socket-game.js",
"/assets/js/socket.js",
"/assets/js/spa_lib.js"
];
self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(statki).then(cache => {
cache.addAll(assets);
})
);
});

View File

@ -0,0 +1,6 @@
window.addEventListener("load", function () {
navigator.serviceWorker
.register("/assets/js/service-worker.js")
.then(res => console.log("Service worker registered"))
.catch(err => console.log("Service worker not registered", err));
});

15
public/pwa/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "Statki",
"start_url": "/",
"background_color": "black",
"theme_color": "black",
"orientation": "landscape",
"icons": [
{
"src": "/assets/img/statki-logo-crop.png",
"sizes": "1080x1080",
"type": "image/png"
}
],
"display": "standalone"
}

View File

@ -20,10 +20,13 @@
<script src="https://unpkg.com/tippy.js@6"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-toward-subtle.css" />
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/translucent.css" />
<link rel="manifest" href="/pwa/manifest.json" />
<meta name="theme-color" content="#000000"/>
</head>
<body>
<span class="designerTag">Designed by Maciejka</span>
{{{body}}}
<script src="/assets/js/worker-handler.js"></script>
</body>
</html>