Kick starting with Progressive Web Apps Part 1
By the end of the blog you’ll have your progressive web app which will use service worker to cache the required resources. So it’ll work whether you are online or offline. Finally you’ll learn how to make your web app installable via the web app manifest file. They will be available to the users who have the browser that support them.
Before we get into real code one thing you should be acquainted with while using service worker is it requires — HTTPS. If your site is not served over secure connection the browser simply won’t load the service worker. The only exception is during the development where local host and its equivalent are allowed. This may sound as an arbitrary requirement.
Service worker allows you to intercept network requests, modify them and redirect them. Well am sure we’ll use these power for good but there stands out some evil people out there. By requiring HTTPS you’ll feel confidential that service worker that gets install hasn’t been tampered with during its journey across the network.
Note : If you are unaware about the service workers you can have a look at : Service Worker.
So let’s get started.
The first step you need to do is register the service worker in your web app. Initially create a service-worker.js empty file at root directory.
Note : The navigator object contains information about the browser.
//index.html<script>
navigator.serviceWorker.register('service-worker.js')
.then(function(registration) {
console.log('Service Worker Registered', registration);
});
</script>
All the browsers doesn’t support service worker, so what if this breaks our code ? We’ll use a condition that if a browser supports service worker than only register it :
//index.html<script>
if('serviceWorker' in navigator)
{
navigator.serviceWorker.register('service-worker.js')
.then(function(registration) {
console.log('Service Worker Registered', registration);
});
}
</script>
Note: One of the reason why the service worker registration can fail while working in localhost is that — The path to your service worker file is not correctly written. It needs to be written relative to the origin, not your app’s root directory. For example : The service worker is at http://localhost/web-apps/service-worker.js, and the app’s root is http://localhost/web-apps/. But the path needs to be written as /web-apps/service-worker.js, not /service-worker.js.
When the service worker is registered it is limited to the scope specified meaning that it will only handle the requests limited to its scope.
In the above case the service worker has been registered at the root directory this means the service worker scope would be the entire origin. But if you write ‘/files/service-worker.js’ the service worker will only fetch the events which contain files in it.
When the service worker is first registered it triggers the install event. This is the perfect time to pre-cache all the required resources. Lets add the event listener that will fire on the install event so that you can cache the required resources.
//service-worker.js
var cacheName = 'cache_version1';
var cacheFiles = [
'./static/js/bundle.js',
'./static/media/preloader.c158de6c.gif'
]
self.addEventListener('install',function(e){
console.log("[Service Worker] Installed");
e.waitUntil(
caches.open(cacheName).then(function(cache){
console.log("[ServiceWorker] Caching cacheFiles");
cache.addAll(cacheFiles);
})
)
})First you need to open up the cache with caches.open and provide a cache name. Once the cache is open you can call cache.addAll which takes the list of URL’s(resources which you want to store in cache) and then fetches them from the server and adds the response to the cache.Unfortunately cache.allAll is atomic. If any of the file fails the entire cache step will fail.
Note : chrome://serviceworker-internals/ is a super helpful tool. Will show you all the installed service workers, their state , allowing you to update them or get rid of them.
If you are using chrome you can also have a look under Application tab in Developer Tools.
To kick start with Progressive Web App you can go through my blogs :
1) Register service worker and cache the resources in our app on the initial load.
2) Update the old service worker and cache the new response in Cache Storage.
3) Get out the resources from the cache and intercept the network requests.
4) Make our web app installable via the Web App Manifest File.
SoluteLabs is a high-performance team of 25 focused on mobile and web design and development; we have produced top #10 chart topping applications on Android and iOS app stores, graphics that have gone viral and applications with Millions of downloads.
