Add PWA support #3

Merged
zbolo-wd merged 1 commit from develop into main 2023-05-31 16:02:24 +02:00
15 changed files with 4727 additions and 11 deletions
Showing only changes of commit 909d978f4f - Show all commits

3
.gitignore vendored Normal file
View file

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

View file

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

View file

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

16
build-sw.js Executable file
View file

@ -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',
]
});

View file

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

21
manifest.json Normal file
View file

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

4645
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

15
package.json Normal file
View file

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

View file

@ -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 = ` const template = `
<div> <div>
<img src="/static/images/home-icon.png"> <img src="${homeIconUrl}">
</div> </div>
<div> <div>
<img src="/static/images/routes-icon.png"> <img src="${routesIconUrl}">
</div> </div>
<div> <div>
<img src="/static/images/settings-icon.png"> <img src="${settingsIconUrl}">
</div> </div>
`; `;
const style = ` const style = `

7
src/js/index.js Normal file
View file

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

4
src/js/service-worker.js Normal file
View file

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

0
src/pages/offline.html Normal file
View file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

View file

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

Before

Width:  |  Height:  |  Size: 2.7 KiB