Building Progressive Web Apps: Understanding Service Workers [Beginner’s Guide]
Service Workers have been around for a while, though in different shapes and formats. In the context of web apps (Progressive Web Apps), the concept of Service Worker was introduced only last year. Let’s take a shot at understanding how service workers operate and why do they constitute a critical component of Progressive Web Apps.
“It is purpose that created us, purpose that connects us, purpose that pulls us, that guides us, that drives us” Agent Smith / Software Smith from Matrix.”
Understanding the purpose of a software is extremely important before we can start talking about the functions of that software. Software, fundamentally is an enabler. Software/(s) typically require human interaction. Over time, for some processes, human interaction becomes redundant and hence software takes human input for granted and executes those processes by itself. Rudimentary example will be the autocomplete feature in excel. Autocomplete is the most basic level of intelligent execution. The point, though to note is that something is happening in the background. This is essentially a service which keeps running. It is helping you in ways and if you don’t need help, you don’t need to go to them. Very simply put, Service Worker is a background thread that executes specific processes.
Why Service Workers and why now?
Service is a process that runs in background and executes certain processes which do not require user interaction. For instance, in an OS there are services that keep running in background, to check your backups, disk memory alerts, checking software updates and installation et all.
Lot of stuff happens automatically which does not need user interaction. So, those things that do happen in background are called services. Until recently these Services were never made available on the browser/web, plainly because web has always been a very user driven medium. Not much happens in background and whatever happens in background happens on the server.
Understanding Browser / Client and Server Interaction
Between Browser (client) and the Server, the server clearly is the smarter chap. Every thing essentially happens on server. Browser is just a bare renderer. For instance, if you ask the browser to show all the people from X and Y location, browser will go to server, put a query there, the query will be answered and it will display the query result in the browser.
However, Chrome has evolved from just being a browser. Chrome is now a full blown OS ( Read more about Chromium OS ) Google has turned Chrome from a browser into an OS. Now, in the context of OS, there are certain things that are taken for granted.
Offline Experience: Your laptop/desktop/mac are operational even when they are not connected to the internet
- Background Services: There are certain services which keep running in the background. ( Access your Task Manager on Windows to understand more)
- Internal Smartness: Your OS understands and adapts to you. For instance, your search results are personalised.
In this light, Service Workers were introduced to Chrome last year
Browsers, as the focal point of discovery, today can no more afford to be dumb and be dependent on the server. This is the precise problem that Service Workers address and allowing developers to create seamless user experience. Simply put, an additional service now runs in the background, irrespective of the connectivity status allowing browsers to –
- Cache Data
- Access Indexdb and hence store some data in locally
- Allow users to operate and access some content in case of loss of connectivity
What all is possible with service workers?
Needless to say, service workers work in the background. Cache is being introduced with service workers as well. Service worker can also access index DB (so a bit of a database can come down and stay within the browser) and developers can run query locally (a small data set not huge)
Creating Offline Experiences: For instance, developers can cache an image depicting loss of connectivity, showing that you are offline in the middle or say my server is busy. The problem with the server is busy is that, it is busy. It cannot send your browser that “I am busy” because server is too busy to even say that. In such a scenario, browser shows an image that server is busy and some graphics with that. So this can be/ is offline and I can say server is busy. While you might feel connected, but the image/s are being served from an offline cache.
Addressing the Connectivity Issue
Be it India or US – every place has its own deal of connectivity issues. India ranks lowest in South East Asia in terms of connectivity. Mobile speeds are further more depressing in Africa. It is only obvious that brands must create data optimized experiences for users. For instance Konga, a leading e-commerce portal in Nigeria optimized their website to take 82% less data to complete a transaction on mobile web. Read case study here.
Service Workers allow developers to cache data and optimize data consumption costs. Sounds funny ? Its not – Infact, in Nigeria, website consuming less data is enough of a reason for user to migrate their shopping behaviour
India is no different. Rampant connectivity issues are well know. With users commuting across metros, poor connectivity zones, caching content pages locally on the browser only leads to aha moments.
- Leverage Local Cache to display content even when the device is not connected to the internet. The T-Rex Dino Gameis a classic example of local cache being used to cater to disconnected users.
- Web push notifications: With Service Workers, your browser has the ability to push content to you even when the browser is closed ( on mobile ).
Service Worker is a key pillar for the progressive web apps.
What all depends on Service Workers ?
This is very subjective topic and a soft nerve for many. Service Workers give a lot of freedom to developers and it can be misused in places. Though now there are provisions that are done for that. So far, so good and it is the time that will tell.
What are the Prerequisites to start using Service-Workers ?
There is only one prerequisite, which is the SSL certificate. SSL Certificate must be installed on the domain to register a service worker. The key reason behind this is obviously security. Service worker is running in background and hence has potential to do a lot of powerful communication. Developers should/can not use HTTP and leave it for man in the middle attacks.
You want to keep it secure and hence the Https protocol mandate. All other communications executed by the service worker with server also require secure socket layer.
Can Service Workers be updated ?
Service Workers are automatically updated on an as and when basis. If there is a new version of service worker there, it will automatically update. It is the browser’s job to update a service worker.
Are Service Workers universal ?
Well, not yet. Refer to CanIuse.com to check out the latest status. Here is the latest status –
Edge is in the process of rolling out support for Service-Workers. Partial support already exists.
What all User Data can be accessed by Service Workers?
When a service runs in the background in an OS, it is very powerful and can do/access a lot of stuff. In the past the services could do a lot. Though today, in case of Android OS, if you are running a service in background, it limits the interaction only with your app. You will need to root the mobile if you want to drive interaction with other apps ) However, in case of web, it has been made secure where in the service worker can only work for that domain which had registered and not any other domain.
This ensures security where in it can only access the resources it has created. It can not access other resources. Unlike the OS, where app developer can access user’s name, email and other data points, the browser doesn’t actually allow that.
Do note that Service Worker as a feature is supported currently only by Chrome on Android and by Chrome, Firefox on Windows, MacOS, and Linux ( on desktop). They largely function in the same manner – be it on desktop or mobile.
- Service Worker Specs: Github Link [Developer specific]
- Creating Powerful Offline Experiences: Progressive Web App Case Study
Originally published by trak.in–India’s leading weblog covering technology, startup, and business trend.
Check the original article here