The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Service Workers are one of the most useful yet misunderstood APIs to come to the JavaScript world in years. They open up a whole world of functionality to the web and are an integral part of Progressive Web Apps. Service workers give the web independence from the network and allow you to decide exactly how your app uses the network. They also give the web new powers, such as push notifications, that can be the key to providing an “app-like” experience to users of your PWA. Also, in the near future, service workers will be built into Ionic 2 projects and will be extremely easy to enable in your Ionic 2 apps.

What exactly is a service worker?

At the basic level, a service worker is a script that runs independently of your app, meaning it can continue to run after the user closes the app, while providing new, network-based, functionality to your app. This new functionality includes programmatically controllable caching, background sync, and push notifications. Service workers are currently supported in Chrome, Firefox, and Opera and are actively being implemented in Edge.

Caching

Most likely, when you first hear about service workers, you’ll hear about them in the context of caching. They allow you to give your PWA an offline experience by programmatically control caching resources. The older App-Cache API was similar, but was not controllable and only allowed you to list assets you would like cached.

Service workers allow you to implement different types of caching, such as pre-caching and read-through caching. This allows you to build an offline experience for users that is tailored to the functionality your app provides, instead of just a one-size-fits-all experience. For a good example of the offline ability that service workers provide, you can check out our Ionic 2 PWA demo Hodi, a video chat PWA that will load even when offline or on bad connectivity!

Other cool things service workers enable

Service workers also enable other new features that you can add to your PWA, the two most popular of which are the background sync API and the web push notifications API.

Background sync allows you to “save” an action until a user has connectivity and then fire off that event. An example of this can be found on the emojoy PWA by Jake Archibald. If you’re offline and send a message, the service worker will defer the actual sending of that message until you have regained connectivity.

Web push notifications are a standards-based way to send push notifications from a web app. This is a feature that has been painfully missing from the web for a while, and with service workers, we now have this power! For an example, you can either check out emojoy or another Ionic 2 PWA demo, AnonChat. These apps both send push notifications when a new message is received, even when the app is fully closed!

As you can see, service workers enable a whole new level of experiences on the web that allow you to bring your users awesome new functionality. The future of service workers in Ionic is very bright, with our eventual goal being to make it completely painless to enable a service worker for your Ionic 2 PWA. Join the revolution today and make your next Ionic 2 PWA network-independent!

  • Matheus

    I always get excited with posts about that. Most of the apps that I build doesn’t really need to be a app in a store. So, PWA’s will be huge. However, it’s sad to never see any mention about Safari/Webkit current status on this. Any news about it?

  • http://www.thebrockellis.com/ Brock Ellis

    For push notifications, will the inclusion of service workers just enable PWAs to receive them? Or will packaged, native apps be able to leverage them as well in place of something like OneSignal?

    • Moises Valera

      I’m asking exactly the same, hope an answer asap.

  • Prashant Khodade

    Have used sw-precache to generate service worker with Ionic project and integration with gulp was straightforward. Could get Ionic project with SW support within hours. I was expecting Ionic might also use sw-precache and sw-toolbox but then I looked at ionic-pwa-demos/ionicHN and found that its using @angular/service-worker. Is there benefit using @angular/service-worker instead of sw-precache?

  • PushEngage.com

    Services Workers (and Progressive Web Apps) are a great mechanism to enable Web Push Notifications, and used internally by a platform like ours. We hope Edge (new version of IE) will join the bandwagon soon, and then all the browsers will have support for Web Push Notifications.