How To Call The Service Worker From The Web App Context

March 16, 2020 · 2 min read

#motivation #javascript #tutorial

Photo by Arindam Saha on UnsplashPhoto by Arindam Saha on Unsplash

I literally just had such a bad idea I already know I might not make it, but well, it is worth a try 😅.

Switzerland goes on lockdown until 19th April 2020 and the state is asking us to remain at home. That’s why, I will try to share one trick a day until the end of the quarantine!

It is probably a bit optimistic, never set my self so far goals in terms of writing and I also already have preordered Disneyplus which suppose to begin is streaming really soon, but hey, you miss 100% of the shots you don’t take — Michael Scott.

How To Call The Service Worker From The App Context

I will not go too deep in details, but let’s just say that I recently merged a nice new feature in DeckDeckGo, our open source editor for presentations 😉. For this purpose I used Workbox and I had to trigger on demand the caching from the web app context.

For example, let’s say you have defined a rule to cache your images.

workbox.routing.registerRoute( /\.(?:png|gif|jpg|jpeg|webp|svg)$/, new workbox.strategies.CacheFirst({ cacheName: 'images', plugins: [ new workbox.expiration.Plugin({ maxAgeSeconds: 30 * 24 * 60 * 60, maxEntries: 60 }) ] }) );

When you app starts, matching images being part of the current route are going to be cached automatically by Workbox, respectively by the service worker. But, maybe, you do use other images, which are not yet displayed, but which you might also want to cache for an offline use.

This can be solved by requesting the service worker to cache specific routes or urls from your web app content.

async function addToCache() { const list = ['/assets/img1.svg', '/assets/img2.svg']; const myCache = await window.caches.open('images'); await myCache.addAll(list); }

And that’s it. With the help of the above function, taken from the documentation, you can trigger the service worker to cache resources, routes or other requests on demand. Worth to notice that it can be called with or without user interaction, as you rather like.

document.addEventListener('DOMContentLoaded', ($event) => { addToCache(); }); <button onclick="addToCache()">Go images offline</button>

That’s it, this was the first of the tricks I will try share during this quarantine but hopefully only one of really few articles.

Stay home, stay safe!

David

Blog

Read the article

A Simple KeyVal Store Implemented in Motoko

November 30th 2021 · 6 min read

#motoko #blockchain #web3 #dapp

Read the article

TypeScript Utilities For Candid

November 16th 2021 · 4 min read

#typescript #blockchain #motoko #javascript

Read the article

Bye-Bye Amazon & Google, Hello Web 3.0

October 11th 2021 · 5 min read

#webdev #serverless #blockchain #programming

More articles

My company address

Fluster GmbH c/o The Hub Zürich Association Sihlquai 131 8005 Zürich

On the web

This website is open source. Its code is available on GitHub