kuhyx/testsAndMisc
1
0
Fork 0
mirror of https://github.com/kuhyx/testsAndMisc.git synced 2026-07-04 18:43:08 +02:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: service worker for saving images

Browse Source
This commit is contained in:
Krzysztof Rudnicki 2025-09-08 07:46:49 +02:00
parent b1a3c436c0
commit 13b3bad6a3
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
articles/index.html
View File

@ -4,7 +4,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mini Articles</title>
<style>
/* Tiny, readable defaults */
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;color:#222;background:#fff}
header{display:flex;gap:.5rem;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid #ddd;position:sticky;top:0;background:#fff}
header h1{margin:0;font-size:1.1rem}
@ -12,7 +11,6 @@ header nav{display:flex;gap:.5rem}
button, input[type=file]{font:inherit}
main{max-width:960px;margin:0 auto;padding:1rem}
.hidden{display:none!important}
section.hidden{display:none!important}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}
.card{border:1px solid #ddd;border-radius:.5rem;overflow:hidden;background:#fff;cursor:pointer;display:flex;flex-direction:column}
.card img{width:100%;height:120px;object-fit:cover;display:block}
@ -27,11 +25,9 @@ article img, article video{max-width:100%;height:auto;display:block;margin:.5rem
article h1{margin:.25rem 0 .5rem;font-size:1.6rem}
.controls{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.small{font-size:.85rem;color:#666}
/* Loading indicator */
#loading{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem}
.spinner{width:16px;height:16px;border:2px solid #ccc;border-top-color:#333;border-radius:50%;display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Focused reading mode: keep header headline, hide nav and extras */
.reading header nav{display:none}
.reading #delBtn,.reading #dateInfo{display:none}
</style>
@ -241,6 +237,8 @@ article h1{margin:.25rem 0 .5rem;font-size:1.6rem}
show(listV);
setLoading(false);
})();
navigator.serviceWorker&&navigator.serviceWorker.register('/sw.js').catch(()=>{});
})();
</script>
</html>

18
articles/sw.js Normal file
View File

@ -0,0 +1,18 @@
// Minimal image cache-first service worker
const C = 'articles-img-v1';
self.addEventListener('install', e => self.skipWaiting());
self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));
self.addEventListener('fetch', e => {
const req = e.request;
const u = new URL(req.url);
const isImg = req.destination === 'image' || u.pathname.startsWith('/uploads/');
if (!isImg || req.method !== 'GET') return;
e.respondWith((async () => {
const cache = await caches.open(C);
const hit = await cache.match(req, { ignoreVary: true, ignoreSearch: false });
if (hit) return hit;
const res = await fetch(req);
if (res && res.ok) cache.put(req, res.clone());
return res;
})());
});