Prior to 2005, the web was a pretty frustrating place compared to the world of native applications. There was no reliable way to have your web app communicate with your backend without having to resort to full-page refreshes, each of which was a complete server round-trip. Something as simple as filling out a form was an agonizing experience. Building something as advanced as Google Docs? Forget about it.
Along came AJAX
A technology known as XmlHttpRequest (or more commonly called AJAX) changed all that. Something that Microsoft had innocently built back in 1998 and added to IE5 in order to support Web Outlook was suddenly being supported in Safari and Firefox, and one morning the world woke up to the magic of Google Maps - a highly interactive mapping app that seamlessly worked in the browser, no page refreshes needed.
Consider how much the web has changed since then. AJAX is now a key part of pretty much every popular web app, and its usage is so ubiquitous that you don’t even think about it. It has so fundamentally altered what’s possible on the web that hardly anyone builds native desktop apps anymore.
The Next Revolution Begins
Ten years on, the web is on the verge of going through yet another one of these transformative moments in the form of Progressive Web Apps, built on top of a key technology called Service Worker. The addition of this technology will have as much of a profound effect on how web apps are built as AJAX did 10 years ago.
Service worker’s key breakthrough is conceptually simple: allow JavaScript code to be "installed" directly into the browser itself, independent of any single web page. That code can then be executed even when the originating web site is not active in any open browser tab, in response to events such as network requests, push message events, and more in the future.
This one fundamental change enables entirely new scenarios:
- Reliability: Because the service worker can intercept network requests from the browser, it becomes very easy to build web apps that work when there’s no network connection or (more commonly) when the connection is spotty
- Native behavior: Browsers can run service worker code even when the associated site isn’t loaded, enabling web apps to implement features like push notifications the same way that native apps can
- Powerful caching: The service worker API includes a Cache API that can cache data as well as the app’s HTML. This enables the app to cache its UX shell locally, enabling an “instant-boot” experience just like native apps
- Background operations: service workers can register to receive events when the network becomes available, enabling any offline work the user has done to be synchronized back to the server
When you combine service workers with other technologies like the Web App Manifest, your web apps can do things like have a rich homescreen presence on a device, control the app’s layout orientation, and specify a “splash screen” startup experience, giving your app the look and feel of a native one.
It's Already Happening
Some savvy developers have already started to take notice: Facebook is using service workers to enable push notifications on their web app, and Flipkart (India’s largest shopping site) has created an amazing web experience.
These technologies are already supported today in Chrome (both desktop and Android), Firefox, and Opera. Hopefully, Microsoft and Apple will soon follow.
That doesn’t mean, however, that you can’t start using these technologies right away. Service worker follows the principles of progressive enhancement: you build your web apps such that when service worker is present, then users get the benefits, and your default experience when it isn’t. This is the same path that AJAX took when it was first introduced, and there’s no reason why service worker should be any different.The next ten years of web app development is going to be even more exciting than the last ten. To learn more about service workers, check out:
Happy Coding!
