Skip to content

Commit

Permalink
feat: add service-worker for caching
Browse files Browse the repository at this point in the history
  • Loading branch information
sassanh committed Aug 17, 2024
1 parent 22be8d0 commit ea076b8
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 8 deletions.
Binary file added icon-64x64.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 20 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,17 @@

<head>
<meta charset="UTF-8" />
<link rel="icon" href="/icon-64x64.png" />
<title>qrcodekit</title>

<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icon-180x180.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/path/to/icon-192x192.png" />
<link rel="apple-touch-icon" sizes="512x512" href="/path/to/icon-512x512.png" />

<meta name="viewport" content="width=device-width,initial-scale=1,interactive-widget=resizes-content" />

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-status-bar-style" content="white" />
<meta name="apple-mobile-web-app-title" content="qrcodekit" />

<link rel="stylesheet" href="style.css" />
Expand All @@ -23,13 +26,11 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/6.0.1/autosize.min.js"
integrity="sha512-OjjaC+tijryqhyPqy7jWSPCRj7fcosu1zreTX1k+OWSwu6uSqLLQ2kxaqL9UpR7xFaPsCwhMf1bQABw2rCxMbg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" media="print"
onload="this.media='all'" />

<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
</noscript>
Expand All @@ -50,6 +51,21 @@
</div>
</div>
<script src="script.js"></script>
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("/service-worker.js")
.then(function (registration) {
console.log(
"Service Worker registered successfully:",
registration.scope,
);
})
.catch(function (error) {
console.log("Service Worker registration failed:", error);
});
}
</script>
</body>

</html>
12 changes: 9 additions & 3 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
{
"manifest_version": 2,
"version": "1.0.1",
"name": "qrcodekit",
"short_name": "qrcodekit",
"description": "QR Code Kit",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
Expand All @@ -9,17 +12,20 @@
{
"src": "icon-180x180.png",
"sizes": "180x180",
"type": "image/png"
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
"type": "image/png",
"purpose": "any maskable"
}
]
}
65 changes: 65 additions & 0 deletions service-worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
const cacheName = "v1.0.0";
const cacheAssets = [
"index.html",
"script.js",
"style.js",
"https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/autosize.js/6.0.1/autosize.min.js",
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined",
];

// Call Install Event
self.addEventListener("install", (e) => {
console.log("Service Worker: Installed");

e.waitUntil(
caches
.open(cacheName)
.then((cache) => {
console.log("Service Worker: Caching Files");
cache.addAll(cacheAssets);
})
.then(() => self.skipWaiting()),
);
});

// Call Activate Event
self.addEventListener("activate", (e) => {
console.log("Service Worker: Activated");
// Remove unwanted caches
e.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cache) => {
if (cache !== cacheName) {
console.log("Service Worker: Clearing Old Cache");
return caches.delete(cache);
}
}),
);
}),
);
});

// Call Fetch Event
self.addEventListener("fetch", (e) => {
console.log("Service Worker: Fetching");
e.respondWith(
fetch(e.request)
.then((res) => {
// Make clone of response
const resClone = res.clone();
// Open cache
caches.open(cacheName).then((cache) => {
// Add response to cache
cache.put(e.request, resClone);
});
return res;
})
.catch(async (err) => {
console.error("Fetch failed; returning cached resource instead.", err);
return await caches.match(e.request);
}),
);
});
2 changes: 1 addition & 1 deletion style.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
body,
html {
height: 100%;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
Expand Down

0 comments on commit ea076b8

Please sign in to comment.