Next Generation Web Apps using the Service Worker

The open web achieved a small but important milestone with the latest release of Chrome (42) and its added support for push notifications, offline usage and performance. These features are essential in closing the gap between native (IOS/Android) and web (HTML5) apps.

That's a really big deal (and the most exciting thing in HTML5 so far) because native apps are kicking our ass mobile. Mobile has already surpassed desktop but people are using native apps in favor of using web apps through the browser (source). 

Not surprising. Web apps are lacking all the great functionality which native apps offer, like offline usage, better performance, background services, push notifications and so on. However as (Drupal) site builders/developers, creating a responsive website is about the best we can do, that doesn't cut it. 

Until now!

Meet the Service Worker

The service worker is piece of javascripts which runs in the browser but outside the DOM as a first-class citizen. This API offers us things like:

  • Caching (offline usage, "install" a web app, no more need for AppCache)
  • Push notifications (native push notification through Android/Chrome)
  • Fetch (replaces XMLhttpRequest)
  • Sync (background updates en retries)
  • Geofencing

I highly recommend watching this great video presenation by Jake Archibald, one of the people on the Chromium team.

Can I use it?
First the good news: If you're using Chrome (42+) you can already use it, Firefox is following closely. The bad news: no word from Safari if they will support it. Internet Explorer is considering it. There is also this overview page listing all the various implementations and browsers. 

Because of the high-level permissions used by this API, you wil also need a secure connection (https/ssl) in order to get it working. Although, during development, localhost is allowed.

Push Notifications
One of the cool things made possible by the service worker, are native push notifications. We are moving from a pull-based web into a push-based one (The Big Reverse of the Web) This new web is less about websites and more about webapps. Notifications are the new platform. In our case, the platform is Android or Chrome(book).

There is a great tutorial on HTML5rocks howto implement push notifications. Just remember you will need https. If you want to go for a quick demo, try github pages which offer https by default. Based on the tutorial I made a quick demo page.

Push notification Chrome

Example of a push notification in Chrome. Note how Chrome does not have to be the active window and your site does not have to be open.  

Drupal
Back to Drupal. How would these new possibilities fit into Drupal 8? I can imagine it can work very well in a headless/decoupled setup, but I don't think it's a good fit in the traditional output Drupal generates. One might argue webapps and traditional websites service different needs. However, if the future is a push-based web, traditional websites might vanish to the background.

Looking at push notifications specifically, there already is a module for native apps which could be enhanced to implement the new service worker.

On a side note: Chrome is also working hard on improving the performance of web apps. Using the transition API, animations should be just as smooth as on native apps, without any more annoying "flashing white screens" which break the user experience. 2015 is promosing to become an interesting year for web apps.

 

What we learned by building our new company site in Drupal 8

Read More »

About

This is the company blog of
Drupal specialist Merge.nl

We are located in Breda (Netherlands) and build websites using Drupal. More about us.

Content on this blog is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Netherlands License.

Creative Commons License

Recent Comments

Social