Add PWA support

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+service-worker.build.js

.woodpecker/.build.yml

@@ -1,10 +1,13 @@
 pipeline:
   build:
-    image: alpine:3.14
+    image: node:20.2.0-alpine3.16
     secrets: [docker_password, docker_username]
     commands:
       # Install deps
       - apk add docker docker-compose jq
+      # Build app
+      - npm i
+      - npm run build
       # Log into docker registry
       - echo "$${DOCKER_PASSWORD}" | docker login --password-stdin --username "$${DOCKER_USERNAME}" git.webdeploy.it
       # Build image

Dockerfile

@@ -4,4 +4,4 @@ EXPOSE 80
 
 RUN rm -rf /usr/share/nginx/html/*
 
-COPY . /usr/share/nginx/html/
+COPY ./build/ /usr/share/nginx/html/

build-sw.js

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+import {injectManifest} from 'workbox-build';
+
+injectManifest({
+  swSrc: './src/js/service-worker.js',
+  swDest: './dist/service-worker.js',
+  globDirectory: './dist',
+  globPatterns: [
+    '**/*.js',
+    '**/*.css',
+    '**/*.svg',
+    '**/*.ttf',
+    '**/*.png',
+  ]
+});

index.html

@@ -5,6 +5,8 @@
   <meta charset="utf-8">
   <link rel="icon" href="/static/images/home-icon.png">
   <meta name="viewport" content="width=device-width">
+  <link rel="manifest" href="/manifest.json">
+  <title>Pianello</title>
 
   <link rel="stylesheet" href="/src/css/index.css">
 </head>
@@ -17,6 +19,7 @@
   </footer>
 
   <script src="/src/components/bottom-app-bar.js" type="module"></script>
+  <script src="/src/js/index.js" type="module"></script>
 </body>
 
 </html>

manifest.json

@@ -0,0 +1,21 @@
+{
+  "id": "pianello-web-app",
+  "short_name": "Pianello",
+  "icons": [
+    {
+      "src": "/static/images/app-icon-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/static/images/app-icon-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#de0e1b",
+  "display": "standalone",
+  "scope": "/",
+  "theme_color": "#de0e1b"
+}

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "pianello-web-app",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "vite build && build-sw.js"
+  },
+  "devDependencies": {
+    "vite": "^4.3.2",
+    "workbox-build": "^6.6.1",
+    "workbox-precaching": "^6.6.1"
+  }
+}

src/components/bottom-app-bar.js

@@ -1,12 +1,16 @@
+import homeIconUrl from '../../static/images/home-icon.png';
+import routesIconUrl from '../../static/images/routes-icon.png';
+import settingsIconUrl from '../../static/images/settings-icon.png';
+
 const template = `
   <div>
-    <img src="/static/images/home-icon.png">
+    <img src="${homeIconUrl}">
   </div>
   <div>
-    <img src="/static/images/routes-icon.png">
+    <img src="${routesIconUrl}">
   </div>
   <div>
-    <img src="/static/images/settings-icon.png">
+    <img src="${settingsIconUrl}">
   </div>
 `;
 const style = `

src/js/index.js

@@ -0,0 +1,7 @@
+
+window.addEventListener('load', () => {
+  if ('serviceWorker' in navigator) {
+    // Service worker build output path.
+    navigator.serviceWorker.register('/service-worker.js');
+  }
+});

src/js/service-worker.js

@@ -0,0 +1,4 @@
+import {precacheAndRoute} from 'workbox-precaching';
+
+precacheAndRoute(self.__WB_MANIFEST);
+

static/placeholder.svg

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_Settings" data-name="24x24/On Light/Settings" xmlns="http://www.w3.org/2000/svg">
-  <rect id="view-box" width="24" height="24" fill="#141124" opacity="0"/>
-  <path id="Shape" d="M6.995,19.461a10.065,10.065,0,0,1-2.171-.9.756.756,0,0,1-.382-.7l.132-2.067a.151.151,0,0,0-.044-.116l-.707-.708a.149.149,0,0,0-.106-.043h-.01l-2.075.129-.047,0a.75.75,0,0,1-.654-.384,10.071,10.071,0,0,1-.9-2.176.755.755,0,0,1,.226-.766l1.559-1.376a.149.149,0,0,0,.05-.113V9.25a.151.151,0,0,0-.05-.113L.254,7.761a.754.754,0,0,1-.226-.766,10.115,10.115,0,0,1,.9-2.177.75.75,0,0,1,.654-.382h.047l2.075.129h.01a.153.153,0,0,0,.106-.044l.7-.7a.15.15,0,0,0,.043-.116L4.436,1.632a.754.754,0,0,1,.382-.7,10.115,10.115,0,0,1,2.177-.9.751.751,0,0,1,.766.226L9.137,1.813a.151.151,0,0,0,.113.05h.988a.149.149,0,0,0,.113-.05L11.728.254a.751.751,0,0,1,.766-.226,10.071,10.071,0,0,1,2.176.9.753.753,0,0,1,.383.7l-.129,2.075a.151.151,0,0,0,.043.116l.7.7a.155.155,0,0,0,.107.044h.009l2.075-.129H17.9a.752.752,0,0,1,.654.382,10.07,10.07,0,0,1,.9,2.177.753.753,0,0,1-.226.766L17.676,9.137a.152.152,0,0,0-.051.113v.988a.152.152,0,0,0,.051.113l1.559,1.376a.753.753,0,0,1,.226.766,10.026,10.026,0,0,1-.9,2.176.751.751,0,0,1-.654.384l-.047,0-2.075-.129h-.01a.149.149,0,0,0-.106.043l-.7.7a.154.154,0,0,0-.043.116l.129,2.075a.744.744,0,0,1-.383.7,10.011,10.011,0,0,1-2.171.9.746.746,0,0,1-.767-.226l-1.371-1.557a.149.149,0,0,0-.113-.051h-1a.152.152,0,0,0-.113.051L7.761,19.235a.751.751,0,0,1-.766.226ZM4.883,13.907l.708.707a1.649,1.649,0,0,1,.48,1.273l-.1,1.582a8.373,8.373,0,0,0,.988.409l1.055-1.194a1.652,1.652,0,0,1,1.238-.558h1a1.649,1.649,0,0,1,1.238.56l1.049,1.191a8.413,8.413,0,0,0,.989-.41l-.1-1.59a1.653,1.653,0,0,1,.481-1.27l.7-.7a1.664,1.664,0,0,1,1.167-.483l.1,0,1.59.1a8.376,8.376,0,0,0,.412-.994l-1.194-1.055a1.652,1.652,0,0,1-.558-1.238V9.25a1.652,1.652,0,0,1,.558-1.238l1.194-1.055a8.274,8.274,0,0,0-.412-.994l-1.59.1c-.033,0-.068,0-.1,0a1.642,1.642,0,0,1-1.169-.484l-.7-.7a1.65,1.65,0,0,1-.481-1.269l.1-1.59a8.748,8.748,0,0,0-.994-.413l-1.055,1.2a1.652,1.652,0,0,1-1.238.558H9.25a1.652,1.652,0,0,1-1.238-.558L6.958,1.61a8.8,8.8,0,0,0-.994.413l.1,1.59a1.65,1.65,0,0,1-.481,1.269l-.7.7a1.638,1.638,0,0,1-1.168.484c-.033,0-.067,0-.1,0l-1.59-.1a8.748,8.748,0,0,0-.413.994l1.2,1.055A1.652,1.652,0,0,1,3.363,9.25v.988a1.652,1.652,0,0,1-.558,1.238l-1.2,1.055a8.666,8.666,0,0,0,.413.994l1.59-.1.1,0A1.638,1.638,0,0,1,4.883,13.907Zm.106-4.168a4.75,4.75,0,1,1,4.75,4.75A4.756,4.756,0,0,1,4.989,9.739Zm1.5,0a3.25,3.25,0,1,0,3.25-3.25A3.254,3.254,0,0,0,6.489,9.739Z" transform="translate(2.261 2.261)" fill="#141124"/>
-</svg>