The past few weeks, I have been doing some brushing up on progressive web apps and got to understand some concepts better especially caching strategies. So this is me writing about what I learnt.
P.S: I'm not a good writer :) and this doesn't cover the basics of PWAs
What's a Progressive Web App
Progressive Web Apps(PWAs) are normal web applications which can feel like native mobile applications to the user.
To understand more about PWAs Check out this page
Caching Strategies
Building PWAs you'll be doing some caching. It could be assets(css, js, icons, images), responses or even a fallback offline page. So choosing strategies that work best for your application is very important. Common caching strategies are:
* Cache Only
The Cache only strategy returns a resource from the cache without ever going to the network. If it doesn't exist in the cache, it fails and nothing happens because at no point are we trying to get that resource over the network. This strategy is useful for serving assets pre-cached during the installation of a service worker.
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
);
});
* Network Only
The Network only strategy goes to the network to get a resource. It's never stored in the cache or looked for in the cache. This strategy is useful if stale or cached version is unacceptable (For data that must be always upto date).
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request)
);
});
* Cache First
The cache first strategy tries to get a resource from the cache first. If it's not found, we go to the network and cache the response for subsequent requests. If the resource is found in the cache we return it and no request is made over the network. This strategy is useful for caching assets on the fly and repetitive requests for the same asset is immediately returned from the cache.
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if(response) return response
fetch(event.request).then(response => {
cache.put(event.request, response.clone());
return response;
});
});
);
});
* Network First
The network first strategy always tries to get the resource over the network first. If the request fails, we go to the cache and check for the resource. If the request is successfull we cache and return the response. This strategy is useful for resources that always need to be fresh.
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).then(response => {
cache.put(event.request, response.clone());
return response;
}).catch(_ => {
return caches.match(event.request);
});
);
});
* Stale while revalidate
The stale while revalidate always serves a resource from the cache and then a corresponding request is made over the network and then cached.
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
fetch(event.request).then(res= => {
cache.put(event.request, res.clone());
});
return response;
});
);
});
So What Next?
There we have it. The above are common strategies you will find yourself using most times. To read more about caching strategies Read More...
Below are two basic PWAs I built, will really appreciate feedbacks, likes, retweets or stars. Also, will love feedbacks on this writeup. Thanks :)
- A basic weather forecast app Predict Sky
Another simple Progressive Web App😌
A simple weather forecast app predictsky.com
Built with plain javascript, weather data from @DarkSkyApp hosted on @Netlify.
I'll appreciate feedback on this, retweets and star this project on @github
Repo: github.com/Steelze/weathe…
🥰❤️10:09 AM - 06 Jul 2019
- A currency converter Currency Converter
Morning everyone. So I decided to redo the ALC 3.0 Progressive Web APP project and I'll appreciate feedbacks.
ProjectUrl: steelze.github.io/currency-conve…
GithubRepo: github.com/Steelze/curren…06:42 AM - 22 Jun 2019
Top comments (3)
Thank you...very interesting and I used to wonder why Dev.to website acts like an app. I was thinking that it is an Android Instant App but I guess it is a PWA.
Cheers.
Keep sharing.
Thanks, Jatin. This really means a lot.
great and short post! i like it!