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

update PWA

This commit is contained in:
Alexander Popov 2023-09-03 11:39:13 +03:00
parent 183ad70df9
commit 89f7ac8204
Signed by: iiiypuk
GPG Key ID: E47FE0AB36CD5ED6
8 changed files with 3738 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
snipplets/projects/PWA/app.js
View File

@ -1,3 +1,5 @@
'use strict';
const container = document.querySelector('.container'); const container = document.querySelector('.container');
const coffees = [ const coffees = [
{ name: 'Tony Stark', image: 'images/Tony_Stark.jpg' }, { name: 'Tony Stark', image: 'images/Tony_Stark.jpg' },
@ -12,8 +14,7 @@ const showCoffees = () => {
(output += ` (output += `
<div class="card"> <div class="card">
<img class="card--avatar" src=${image} /> <img class="card--avatar" src=${image} />
<h1 class="card--title">${name}</h1> <p class="card--title">${name}</p>
<a class="card--link" href="#">[CLICK]</a>
</div> </div>
`), `),
); );
@ -21,3 +22,12 @@ const showCoffees = () => {
}; };
document.addEventListener('DOMContentLoaded', showCoffees); 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
snipplets/projects/PWA/favicon.ico Symbolic link
View File

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

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

File diff suppressed because it is too large Load Diff

6
snipplets/projects/PWA/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example PWD</title> <title>Example PWA</title>
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<!-- PWA --> <!-- PWA -->
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
@ -24,8 +24,8 @@
<nav> <nav>
<h1>Example PWA</h1> <h1>Example PWA</h1>
<ul> <ul>
<li>Home</li> <li><a href="#">Home</a></li>
<li>About</li> <li><a href="#">About</a></li>
</ul> </ul>
</nav> </nav>
<div class="container"></div> <div class="container"></div>

4
snipplets/projects/PWA/manifest.json
View File

@ -3,8 +3,8 @@
"short_name": "Example PWA", "short_name": "Example PWA",
"start_url": "index.html", "start_url": "index.html",
"display": "standalone", "display": "standalone",
"background_color": "#fdfdfd", "background_color": "#444444",
"theme_color": "#db4938", "theme_color": "#d6585c",
"orientation": "portrait-primary", "orientation": "portrait-primary",
"icons": [ "icons": [
{ {

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

@ -1,27 +0,0 @@
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);
}),
);
});

47
snipplets/projects/PWA/styles.css
View File

@ -1,12 +1,24 @@
:root {
--main-color: #b5b5b5;
--second-color: #777777;
--accent-color: #d6585c;
--green-color: #6cd659;
--bg-color: #222222;
--item-color: #353035;
--border-color: #444;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
background: #fdfdfd; background: var(--bg-color);
font-family: sans-serif; color: var(--main-color);
font-size: 1.2rem; font-family: 'Samsung Sans', 'Droid Sans', 'Ubuntu', sans-serif;
font-size: 1rem;
} }
main { main {
@ -20,6 +32,25 @@ nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 { ul {
@ -27,11 +58,11 @@ ul {
display: flex; display: flex;
} }
li { h1,
margin-right: 1rem; .card--title {
color: var(--accent-color);
} }
h1 { .card {
color: #e74c3c; margin: 1rem;
margin-bottom: 0.5rem;
} }

60
snipplets/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));
});