iiiypuk/snipplets.dev
iiiypuk/snipplets.dev
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

draft PWA

Browse Source
This commit is contained in:
Alexander Popov 2023-08-16 16:02:20 +03:00
parent 0b0c69b261
commit f5c545ed42
Signed by: iiiypuk
GPG Key ID: E47FE0AB36CD5ED6
18 changed files with 219 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
snipplets/assets/avatars/Bear.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
snipplets/assets/avatars/DeusEx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
snipplets/assets/avatars/Face.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
snipplets/assets/avatars/Tony_Stark.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

2
snipplets/projects/PWA/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*.crt
*.key

1
snipplets/projects/PWA/.prettierignore Normal file
View File

@ -0,0 +1 @@
*.md

10
snipplets/projects/PWA/.prettierrc.json Normal file
View File

@ -0,0 +1,10 @@
{
"printWidth": 100,
"bracketSpacing": true,
"bracketSameLine": true,
"semi": true,
"singleQuote": true,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "strict",
"endOfLine": "lf"
}

14
snipplets/projects/PWA/README.md Normal file
View File

@ -0,0 +1,14 @@
## Создать свой SSL сервификат
```sh
openssl req -x509 -out server.crt -keyout server.key \
-newkey rsa:2048 -nodes -sha256 \
-subj '/CN=localhost' -extensions EXT -config <( \
printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
```
## Флаги `chrome` для запуска с самописным сертификатом
```sh
chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:1443
```

23
snipplets/projects/PWA/app.js Normal file
View File

@ -0,0 +1,23 @@
const container = document.querySelector('.container');
const coffees = [
{ name: 'Tony Stark', image: 'images/Tony_Stark.jpg' },
{ name: 'DeusEx', image: 'images/DeusEx.png' },
{ name: 'Face', image: 'images/Face.png' },
{ name: 'Bear', image: 'images/Bear.png' },
];
const showCoffees = () => {
let output = '';
coffees.forEach(
({ name, image }) =>
(output += `
<div class="card">
<img class="card--avatar" src=${image} />
<h1 class="card--title">${name}</h1>
<a class="card--link" href="#">[CLICK]</a>
</div>
`),
);
container.innerHTML = output;
};
document.addEventListener('DOMContentLoaded', showCoffees);

1
snipplets/projects/PWA/images/Bear.png Symbolic link
View File

@ -0,0 +1 @@
../../../assets/avatars/Bear.png

1
snipplets/projects/PWA/images/DeusEx.png Symbolic link
View File

@ -0,0 +1 @@
../../../assets/avatars/DeusEx.png

1
snipplets/projects/PWA/images/Face.png Symbolic link
View File

@ -0,0 +1 @@
../../../assets/avatars/Face.png

1
snipplets/projects/PWA/images/Tony_Stark.jpg Symbolic link
View File

@ -0,0 +1 @@
../../../assets/avatars/Tony_Stark.jpg

35
snipplets/projects/PWA/index.html Normal file
View File

@ -0,0 +1,35 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example PWD</title>
<link rel="stylesheet" href="styles.css" />
<!-- PWA -->
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#db4938" />
<!-- ios icons -->
<link rel="apple-touch-icon" href="images/icons/icon-72x72.png" />
<link rel="apple-touch-icon" href="images/icons/icon-96x96.png" />
<link rel="apple-touch-icon" href="images/icons/icon-128x128.png" />
<link rel="apple-touch-icon" href="images/icons/icon-144x144.png" />
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png" />
<link rel="apple-touch-icon" href="images/icons/icon-192x192.png" />
<link rel="apple-touch-icon" href="images/icons/icon-384x384.png" />
<link rel="apple-touch-icon" href="images/icons/icon-512x512.png" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
</head>
<body>
<main>
<nav>
<h1>Example PWA</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div class="container"></div>
</main>
<script src="app.js"></script>
</body>
</html>

51
snipplets/projects/PWA/manifest.json Normal file
View File

@ -0,0 +1,51 @@
{
"name": "Example PWA",
"short_name": "Example PWA",
"start_url": "index.html",
"display": "standalone",
"background_color": "#fdfdfd",
"theme_color": "#db4938",
"orientation": "portrait-primary",
"icons": [
{
"src": "/images/icons/icon-72x72.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "/images/icons/icon-96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/images/icons/icon-128x128.png",
"type": "image/png",
"sizes": "128x128"
},
{
"src": "/images/icons/icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/images/icons/icon-152x152.png",
"type": "image/png",
"sizes": "152x152"
},
{
"src": "/images/icons/icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons/icon-384x384.png",
"type": "image/png",
"sizes": "384x384"
},
{
"src": "/images/icons/icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}

15
snipplets/projects/PWA/server.py Executable file
View File

@ -0,0 +1,15 @@
#!/usr/bin/env python3
# openssl req -x509 -out server.crt -keyout server.key \
# -newkey rsa:2048 -nodes -sha256 \
# -subj '/CN=localhost' -extensions EXT -config <( \
# printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
# chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:1443
from http.server import HTTPServer, SimpleHTTPRequestHandler
import ssl
httpd = HTTPServer(('localhost', 1443), SimpleHTTPRequestHandler)
httpd.socket = ssl.wrap_socket(httpd.socket, certfile='server.crt', keyfile='server.key', server_side=True)
httpd.serve_forever()

27
snipplets/projects/PWA/serviceWorker.js Normal file
View File

@ -0,0 +1,27 @@
const staticExamplePWA = 'example-pwa-site-v1';
const assets = [
'/',
'/index.html',
'/styles.css',
'/app.js',
'/images/Bear.png',
'/images/DeusEx.png',
'/images/Face.png',
'/images/Tony_Stark.jpg',
];
self.addEventListener('install', (installEvent) => {
installEvent.waitUntil(
caches.open(staticExamplePWA).then((cache) => {
cache.addAll(assets);
}),
);
});
self.addEventListener('fetch', (fetchEvent) => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then((res) => {
return res || fetch(fetchEvent.request);
}),
);
});

37
snipplets/projects/PWA/styles.css Normal file
View File

@ -0,0 +1,37 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #fdfdfd;
font-family: sans-serif;
font-size: 1.2rem;
}
main {
max-width: 900px;
margin: auto;
padding: 0.5rem;
text-align: center;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
list-style: none;
display: flex;
}
li {
margin-right: 1rem;
}
h1 {
color: #e74c3c;
margin-bottom: 0.5rem;
}