Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A quick demo showing how to grab the title and descritpion of cached articles on an offline page displayed from a service worker
// first open the articles cache
// this cache is specified in the service worker where the
// offline handling code is kept
caches.open('articles')
.then(articlesCache => {
articlesCache.keys()
.then(keys => {
// loop over each article from the cache
keys.forEach(request => {
let markup = '';
let articleTitle = '';
let articleDescription = '';
// fetch the article, this will fail (we're offline)
// and return the cached article
fetch(request)
.then(response => {
let contentType = response.headers.get('content-type');
if (contentType.includes('text/html')) {
return response.text();
}
})
.then(text => {
// fire up a new DOMParser, we'll use it to parse the returned HTML article
const parser = new DOMParser();
const htmlDocument = parser.parseFromString(text, "text/html");
// heyyyooo, use the DOM to get the title of the article
articleTitle = htmlDocument.documentElement.querySelector("title").innerText;
// here one could maybe strip out stuff from the title string one
// doesn't want to display
// we can also get the article description from the document,
// it is after all, THE ARTICLE DOCUMENT
articleDescription = htmlDocument.documentElement.querySelector('meta[name="description"]').getAttribute('content');
// one could pull from the parsed HTML document anything they wish
// at this point. got images cached? get one of 'em to display
// with the title and description.
// now it's time to output the title and description
// the list item will go into a <ul> in the offline template
const articleListItem = document.createElement("li");
const articleListItemLink = document.createElement("a");
// just checking if the article title is blank (it shouldn't be)
// and if it is just jam the link into the list of offline articles
if (articleTitle == '') {
articleListItemLink.href = request.url;
articleListItemLink.innerText = request.url;
articleListItem.appendChild(articleListItemLink);
}
else {
// cool, we have a title, so let's make a slightly more attractive
// article/description block
// one could make whatever markup/layout one wanted here
articleListItemLink.href = request.url;
articleListItemLink.innerText = articleTitle;
articleListItem.appendChild(articleListItemLink);
const articleListItemBreak1 = document.createElement("br");
articleListItem.appendChild(articleListItemBreak1);
const articleListItemDescription = document.createTextNode(articleDescription);
articleListItem.appendChild(articleListItemDescription);
}
// now append the offline article to the list in the offline page template
document.getElementById('savedpostlist').appendChild(articleListItem);
})
.catch( () => {
console.log("Error!");
});
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.