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

move dirs

Browse Source
This commit is contained in:
Alexander Popov
2023-09-26 22:05:13 +03:00
parent 5414fa8538
commit 55d774e7d5
190 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

1
projects/PWA/.prettierignore Normal file
View File

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

10
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
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
```

33
projects/PWA/app.js Normal file
View File

@@ -0,0 +1,33 @@
'use strict';
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} />
<p class="card--title">${name}</p>
</div>
`),
);
container.innerHTML = output;
};
document.addEventListener('DOMContentLoaded', showCoffees);
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker
.register('/sw.js', { scope: '/' })
.then((res) => console.log('Service worker registered'))
.catch((err) => console.log('Service worker not registered', err));
});
}

1
projects/PWA/favicon.ico Symbolic link
View File

@@ -0,0 +1 @@
../../assets/favicon.ico

3621
projects/PWA/fonts.css Normal file
View File

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

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

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

35
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 PWA</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><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div class="container"></div>
</main>
<script src="app.js"></script>
</body>
</html>

51
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": "#444444",
"theme_color": "#d6585c",
"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
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()

68
projects/PWA/styles.css Normal file
View File

@@ -0,0 +1,68 @@
:root {
--main-color: #b5b5b5;
--second-color: #777777;
--accent-color: #d6585c;
--green-color: #6cd659;
--bg-color: #222222;
--item-color: #353035;
--border-color: #444;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--bg-color);
color: var(--main-color);
font-family: 'Samsung Sans', 'Droid Sans', 'Ubuntu', sans-serif;
font-size: 1rem;
}
main {
max-width: 900px;
margin: auto;
padding: 0.5rem;
text-align: center;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color);
}
nav a {
color: var(--main-color);
text-decoration: none;
display: block;
margin: 16px;
transition: color 0.2s;
}
nav a.active {
color: #fff;
background-color: rgba(214, 88, 92, 0.3);
}
nav a:hover {
color: #fff;
transition: color 0.2s;
}
ul {
list-style: none;
display: flex;
}
h1,
.card--title {
color: var(--accent-color);
}
.card {
margin: 1rem;
}

60
projects/PWA/sw.js Normal file
View File

@@ -0,0 +1,60 @@
'use strict';
const name = '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',
];
// install - https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/install_event
// activate - https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate_event
// message - https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/message_event
// fetch - https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/fetch_event
// sync - https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/sync_event
// push - https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/push_event
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(name).then((cache) => {
cache.addAll(assets);
}),
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((res) => {
return res || fetch(event.request);
}),
);
});
const enableNavigationPreload = async () => {
if (self.registration.navigationPreload) {
await self.registration.navigationPreload.enable();
}
};
self.addEventListener('activate', (event) => {
event.waitUntil(enableNavigationPreload());
});
self.addEventListener('push', function (event) {
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png',
};
event.waitUntil(self.registration.showNotification(title, options));
});