draft PWA
This commit is contained in:
parent
0b0c69b261
commit
f5c545ed42
GPG Key ID:
E47FE0AB36CD5ED6
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
|
|
@ -0,0 +1,2 @@
|
|||
*.crt
|
||||
*.key
|
||||
|
|
@ -0,0 +1 @@
|
|||
*.md
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"printWidth": 100,
|
||||
"bracketSpacing": true,
|
||||
"bracketSameLine": true,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"arrowParens": "always",
|
||||
"htmlWhitespaceSensitivity": "strict",
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
|
|
@ -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
|
||||
```
|
||||
|
|
@ -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);
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../assets/avatars/Bear.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../assets/avatars/DeusEx.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../assets/avatars/Face.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../assets/avatars/Tony_Stark.jpg
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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()
|
||||
|
|
@ -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);
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue