Skip to content

Commit fcc384d

Browse files
ireadeireade
committed
Finish
1 parent 8427d37 commit fcc384d

5 files changed

Lines changed: 97 additions & 22 deletions

File tree

‎default.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* : add .versionedAsset class to stylesheet
1717
*
1818
*********************** -->
19-
<link rel="stylesheet" type="text/css" href="{{asset "built/global.css"}}">
19+
<link rel="stylesheet" type="text/css" href="{{asset "built/global.css"}}" class="versionedAsset">
2020

2121
<link rel="manifest" href="{{asset "manifest.json"}}">
2222
<meta name="theme-color" content="#ffdb3a">

‎page-offline.hbs‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -73,20 +73,27 @@
7373
<script>
7474
const savedArticles = document.getElementById("saved-articles");
7575
76-
caches.open("articles-cache").then((cache) => {
77-
cache.keys().then((response) => {
78-
if (response.length == 0) return savedArticles.innerHTML("<p>No articles were found :(</p>");
79-
80-
const template = `
81-
<h2>${response.length} saved articles</h2>
82-
<ul>
83-
${response.map((article) => `<li><a href="${article.url}">${article.url}</a></li>`)}
84-
</ul>
85-
`;
86-
87-
savedArticles.innerHTML = template;
88-
});
76+
caches.keys().then((keys) => {
77+
78+
const articles = [];
79+
80+
keys.forEach((key) => {
81+
if (key.includes("article-")) articles.push(key.split("article-")[1]);
82+
})
83+
84+
if (articles.length == 0) return savedArticles.innerHTML("<p>No articles were found :(</p>");
85+
86+
const template = `
87+
<h2>${articles.length} saved articles</h2>
88+
<ul>
89+
${articles.map((key) => `<li><a href="${window.location.origin}/${key}">/${key}</a></li>`)}
90+
</ul>
91+
`;
92+
93+
savedArticles.innerHTML = template;
94+
8995
});
96+
9097
</script>
9198
</body>
9299
</html>

‎src/js/global/register-sw.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,11 @@
44
* : register service worker
55
*
66
********************** */
7+
8+
if ('serviceWorker' in navigator) {
9+
navigator.serviceWorker.register("/sw.js")
10+
.then((registration) => {
11+
console.log("Yay, service worker registered! ", registration)
12+
})
13+
.catch((err) => console.log("Nooo, service worker didn't register.", err));
14+
}

‎src/js/post/save-article.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,28 @@ if ('serviceWorker' in navigator && 'caches' in window) {
1313

1414
const saveArticleButton = document.getElementById("save");
1515
const articlePath = window.location.pathname;
16+
const cacheName = "article-" + articlePath.replace(/\//g, "");
1617

1718
saveArticleButton.removeAttribute("hidden");
1819

1920
function checkIfArticleIsInCache() {
20-
return caches.open("articles-cache").then((cache) => {
21-
return cache.match(articlePath).then((match) => match ? true : false);
22-
});
21+
return caches.keys().then((keys) => keys.includes(cacheName));
2322
}
2423

2524
function saveArticleToCache() {
26-
return caches.open("articles-cache").then((cache) => {
27-
return cache.add(articlePath);
25+
return caches.open(cacheName).then((cache) => {
26+
const version = document.querySelector(".versionedAsset").href.split("?v=")[1];
27+
const assets = [
28+
`/assets/built/global.css?v=${version}`,
29+
`/assets/built/global.js?v=${version}`,
30+
`/assets/built/post.js?v=${version}`
31+
];
32+
return cache.addAll([articlePath, ...assets]);
2833
});
2934
}
3035

3136
function removeArticleFromCache() {
32-
return caches.open("articles-cache").then((cache) => {
33-
return cache.delete(articlePath);
34-
});
37+
return caches.delete(cacheName);
3538
}
3639

3740
function updateButton(isCached) {

‎sw.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,60 @@
77
* : redirect to /offline/ for non-cached pages
88
*
99
********************** */
10+
11+
const precacheVersion = 1;
12+
const precacheName = 'precache-v' + precacheVersion;
13+
const precacheFiles = [
14+
"/offline/",
15+
"/assets/built/offline.css"
16+
];
17+
18+
self.addEventListener('install', (e) => {
19+
console.log('[ServiceWorker] Installed');
20+
21+
self.skipWaiting();
22+
23+
e.waitUntil(
24+
caches.open(precacheName).then((cache) => {
25+
console.log('[ServiceWorker] Precaching files');
26+
return cache.addAll(precacheFiles);
27+
}) // end caches.open()
28+
); // end e.waitUntil
29+
});
30+
31+
self.addEventListener('activate', (e) => {
32+
console.log('[ServiceWorker] Activated');
33+
34+
e.waitUntil(
35+
caches.keys().then((cacheNames) => {
36+
return Promise.all(cacheNames.map((thisCacheName) => {
37+
38+
if (thisCacheName.includes("precache") && thisCacheName !== precacheName) {
39+
console.log('[ServiceWorker] Removing cached files from old cache - ', thisCacheName);
40+
return caches.delete(thisCacheName);
41+
}
42+
43+
}));
44+
}) // end caches.keys()
45+
); // end e.waitUntil
46+
});
47+
48+
self.addEventListener('fetch', (e) => {
49+
e.respondWith(
50+
caches.match(e.request).then((cachedResponse) => {
51+
52+
if (cachedResponse) {
53+
console.log("Found in cache!")
54+
return cachedResponse;
55+
}
56+
57+
return fetch(e.request)
58+
.then((fetchResponse) => fetchResponse)
59+
.catch((err) => {
60+
const isHTMLPage = e.request.method == "GET" && e.request.headers.get("accept").includes("text/html");
61+
if (isHTMLPage) return caches.match("/offline/");
62+
});
63+
64+
})
65+
);
66+
});

0 commit comments

Comments
 (0)