Asial Blog

Google Chrome Dev Summit. Let's take a look at Service Workers!

Category :
Frontend(HTML5)
Tags :
JavaScript
Last week we attended Google Chrome Dev Summit. It is a conference hosted at the Google campus in Mountain View, CA. It is an opportunity for the engineers working on Chrome to showcase new features as well as receive feedback from the developer community.



The conference was a nice experience. I met a lot of interesting people and had a lot of fun. Actually it was my first time going to America and I really liked it. We we're staying in an older area of San Francisco with beautiful Victorian houses. The area is also famous for its graffiti.



I also had the opportunity to eat some really good food while there.

Two things in focus this year was Google's new design spec called Material Design as well as the new Service Worker API. Polymer, a JavaScript library used to create custom web components, was also discussed extensively.

I thought the Service Worker API looked really interesting so I will focus on that in this article. It is a new way to cache web pages to make them runnable offline. It can be used to cache the assets as well as the application data. Basically, it can be used to install a web application on a desktop computer or onto a mobile device.

This in conjunction with adding the web site to the Home screen can, as one of the Google engineers put it, make web apps more "appy". For native apps, being able to reach them directly from the home screen as well as running them offline is expected. Web apps, even if they really don't need an internet connection, often require one since the assets need to be downloaded.

Can I use Service Workers?


Actually, the API is still work in progress and isn't supported in any stable browser version yet. However, It's possible to play around with the API using the Firefox Nightly build as well as in Chrome Canary. Please see this page on how to activate service workers for your browser.

It actually didn't run very well in the latest version of Chrome Canary so I've been using the Firefox Nightly build while writing this article.

The API will be available in Chrome 41 which will be released early next year. This page shows the current state of implementation in all the major browsers.

How to create a Service Worker


The API is quite simple and using feature detection it can safely be added to an existing web application even though most browsers still don't support it.

  1. if ('serviceWorker' in navigator) {
  2.   navigator.serviceWorker.register('/my-app/sw.js', {
  3.     scope: '/'
  4.   }).then(function() {
  5.     console.log('Registration succeeded.');
  6.   }).catch(function(error) {
  7.     console.log('Registration failed with ' + error);
  8.   });
  9. };

First we check if the Service Worker API is available. Then the navigator.serviceWorker.register() method is called to register the Service Worker. This method returns a promise. The first argument is a JavaScript file that will be downloaded and executed.

Using the Service Worker to cache assets


After the Service Worker has been registered an 'install' event will be triggered. So in sw.js we can listen for this event.

  1. // sw.js
  2. this.addEventListener('install', function(event) {
  3.   event.waitUntil(
  4.    caches.create('v1').then(function(cache) {
  5.          return cache.add(
  6.         '/my-app/',
  7.         '/my-app/index.html',
  8.         '/my-app/style.css',
  9.         '/my-app/app.js',
  10.         '/my-app/logo.jpg',
  11.         ... // other assets that we might want to cache.
  12.      );
  13.    })
  14.    );
  15. });


  • The caches.create(name) method will return a promise which resolves when the cache is created. The cache is named so when updating the application we can use a new version of the cache as well.

  • Assets are added to the cache using cache.add()


Using the cache


Now we've created a cache and populated it with all our assets. So how do we tell the browser to use our cache instead of doing a regular request to request the assets?

The Service Worker API also triggers a 'fetch' event when a resource is requested. The simplest way to use the caching is just to return the assets from the cache if they're present:

  1. // sw.js
  2. this.addEventListener('fetch', function(event) {
  3.   event.respondWith(
  4.     // this will respond with what is in the cache.
  5.     caches.match(event.request);
  6.   );
  7. });

The caches.match() method returns a Promise that can be used to handle exceptions. In the following example the resource will be fetched with a regular request if it's not present in the cache.

  1. // sw.js
  2. this.addEventListener('fetch', function(event) {
  3.   event.respondWith(
  4.     caches.match(event.request).catch(function() {
  5.       return event.default();
  6.     });
  7.   );
  8. });

It is possible to add resources dynamically to the cache as well. We can build up the cache gradually and save resources for when the application runs in offline mode. It's also possible to add resources from cross-site requests so we can even cache remote assets like content from a CDN.

Please see this page for more usage examples.

I think this is a nice API that's easy to use and gives us the ability to run web apps offline. As more and more native features become available we will be able to make more and more native-feeling apps running directly in the browser.

Comments

  • nathandwyer

    Wow! I'm browsing away perusing your web journal from my lap! Simply needed to say I adore perusing your website and anticipate every one of your posts! Writing tips from https://rospher.com/

  • air jordan shoes

    <a href="http://www.jordanshoeses.com/">Nike Air Jordan Mens</a>,<a href="http://www.jordanshoeses.com/">Nike Air Jordan Shoes</a>,
    <a href="http://www.airjordan13web.com/" >air jordan shoes</a> [url=http://www.airjordan13web.com/]air jordan shoes[/url]

  • riolistic

    nike zoom vomero womens green yellow <a href="http://www.fuzzybuds.net/nike-zoom-vomero-womens-green-yellow-store_en">nike zoom vomero womens green yellow</a> , womens nike zoom pegasus 32 green purple <a href="http://www.fuzzybuds.net/womens-nike-zoom-pegasus-32-green-purple-store_en">womens nike zoom pegasus 32 green purple</a>
    <a href="http://www.riolistic.net/" title="riolistic">riolistic</a>

  • coach outlet

    Madeline: [url=http://www.oakley--outlet.us.com]oakley outlet[/url] Beautiful [url=http://www.michaelkors-outlet-online.com]Michael Kors[/url] shoes [url=http://www.michaelkorsoutletonlines.us.com]Michael Kors Outlet Online[/url] hurt [url=http://www.giuseppezanottishoes.us.com]giuseppe zanotti shoes[/url] my [url=http://www.coachonlineoutletstores.us.com]Coach Outlet[/url] feet, [url=http://www.spyoutlet.us.com]spy outlet[/url] and [url=http://www.coach-factory-outletonline.us.com]Cheap Coach Purses[/url] my [url=http://www.louisvuittons.us.com]Cheap Louis Vuitton Handbags[/url] dress [url=http://www.lvlouisvuitton.us.com]Louis Vuitton Outlet[/url] size [url=http://www.coach-factory-outletonline.us.com]Coach Factory Outlet[/url] is [url=http://www.oakleyoutlet.com.co]oakley outlet[/url] forever [url=http://www.raybansunglasses-store.us.com]ray ban outlet[/url] changing. [url=http://www.coachoutletstoreofficial.us.com]Coach Outlet[/url] Handbags [url=http://www.oakleyoutletonline.us]Oakley Sunglasses Outlet[/url] can [url=http://www.michaelkorsoutletstore.ca]michael kors outlet[/url] do [url=http://www.oakley-outlet.co]oakley outlet[/url] no [url=http://www.oakley-outlet.ca]oakley outlet[/url] wrong [url=http://www.coachfactoryonlineco.us.com]coach factory outlet[/url] in [url=http://www.jimmychoo.us.com]jimmy choo outlet[/url] my eyes [url=http://www.lvlouisvuitton.us.com]Louis Vuitton[/url] because [url=http://www.michaelkorsoutletstoreonline.us.com]Cheap Michael Kors[/url] they [url=http://www.coachoutletfactory.us.com]Coach Outlet Online[/url] are [url=http://www.raybanoutlet-online.us.com]ray ban outlet[/url] set [url=http://www.ray--bansunglasses.us.org]ray ban outlet[/url] in [url=http://www.oakleyoutletwebsite.us.com]oakley sunglasses[/url] their [url=http://www.coachoutletfactory.us.com]Coach Outlet[/url] beauty, [url=http://www.louisvuittons.us.com]Louis Vuitton[/url] and [url=http://www.ray--bansunglasses.us.org]Ray ban Sunglasses[/url] only seek to help me carry my life rather than hinder it. If you have ever hobbled in Louboutins and cursed the day you bought them, I’m sure you understand where I’m coming from. My outfit and shoes can be simple but my bag can always steal the show.Jennifer Garner brought one of her favorite Brunello Cucinelli bags and her kiddos along to church last Sunday. Shop Brunello Cucinelli Bags via Neiman Marcus
    PB: What are some items you always have in your bag?

    M: Lipstick, phone, pen, and notebook.


    That's [url=http://www.jimmychooshoes.us.com]jimmy choo shoes[/url] as [url=http://www.spy-sunglasses.us.com]spy sunglasses[/url] true [url=http://www.michaelkorsoutletstoreonline.us.com]Michael Kors Outlet[/url] for [url=http://www.michaelkors-outletonline.us.org]michael kors outlet online[/url] Bottega [url=http://www.coachfactory-outletonline.com]Coach Factory Outlet[/url] Veneta [url=http://www.michaelkorsoutlet-stores.us.com]michael kors outlet[/url] Resort [url=http://www.michaelkorsfactorystores.us.com]Michael Kors Outlet[/url] 2018-the [url=http://www.poloralphlaurenonline.us.com]ralph lauren outlet[/url] lookbook [url=http://www.coach-purses.us.com]Coach Purses[/url] for [url=http://www.raybanoutletonline.co.uk]ray ban outlet online[/url] which [url=http://www.coachfactory-outletonline.com]coach outlet[/url] just [url=http://www.rayban--outlet.us.com]ray ban outlet[/url] debuted [url=http://www.poloralphlauren.us.com]polo ralph lauren[/url] yesterday-as [url=http://www.longchampoutletonline.us.com]longchamp outlet[/url] it [url=http://www.coachonlineoutlet.ca]coach outlet[/url] ever [url=http://www.coachfactoryonline.name]coach factory outlet online[/url] has [url=http://www.cheapraybansunglassess.us.com]Ray Ban Sunglasses[/url] been.You'll [url=http://www.cheap-ugg.us.com]ugg boots[/url] still [url=http://www.wwwcoachoutlet.us.com]Coach Outlet[/url] find [url=http://www.raybanssunglassesco.us.com]ray ban outlet[/url] plenty [url=http://www.cheapraybanoutlets.com]cheap ray ban outlet[/url] of [url=http://www.coachoutletwebsite.us.com]Coach Outlet Online[/url] intrecciato [url=http://www.coachfactory.name]Coach Factory[/url] woven [url=http://www.raybanoutlet.co]ray ban outlet[/url] leather!


    [url=http://www.edhardyoutlet.us.com]ed hardy outlet[/url] and [url=http://www.michaelkorsoutletus.us.com]michael kors outlet[/url] the neutral, [url=http://www.valentinoshoeswebsites.com]valentino outlet[/url] earthy [url=http://www.spysunglasses.us.com]spy sunglasses[/url] color [url=http://www.michaelkorsoutletsco.us.com]michael kors outlet[/url] palette [url=http://www.pascherportefeuilles.com]pas cher portefeuille[/url] is [url=http://www.longchampoutlet.ca]longchamp outlet[/url] about [url=http://www.coachfactorystores.com]Coach Factory Online[/url] as [url=http://www.rayban-outlet.ca]ray ban outlet[/url] Bottega [url=http://www.michaelkorsoutletus.us.com]www.michaelkorsoutletus.us.com[/url] as [url=http://www.raybanoutletonline.co.uk]ray ban 90% off sale uk[/url] it [url=http://www.raybansoutletstores.us.com]ray ban sunglasses[/url] gets, [url=http://www.yeezyboost350.ca]yeezy boost 350[/url] but [url=http://www.coachoutletstores-online.us.com]Coach Outlet[/url] the [url=http://www.coachoutletonline.us]Coach Outlet Online[/url] exacting [url=http://www.coachoutletstoresonline.us.com]Coach Factory Outlet[/url] lines [url=http://www.coach-factory-outletonline.us.com]coach outlet[/url] of [url=http://www.michaelkorsoutletstoress.us.com]Michael Kors Outlet Website[/url] the [url=http://www.coachonlineoutlet.us.com]coach outlet online[/url] smooth, [url=http://www.coachfactoryonlineoutlets.us.com]Coach Outlet[/url] structured [url=http://www.michaelkorss.us.com]Michael Kors[/url] bags [url=http://www.michaelkorssoutletstore.us.com]Michael Kors Outlet Online[/url] in the [url=http://www.oakleysunglassesshop.us.com]cheap oakley sunglasses[/url] assortment [url=http://www.coachfactoryonlineoutlets.us.com]coach factory outlet[/url] felt [url=http://www.valentinooutlets.us.com]Valentino Shoes Outlet[/url] like a [url=http://www.coach-purses.us.com]Coach Outlet[/url] solid [url=http://www.michael-korsoutletonline.com]michael kors outlet online[/url] step [url=http://www.ray-ban-sunglasses.net.co]Ray ban Sunglasses[/url] for a [url=http://www.spysunglasses.us]spy sunglasses[/url] brand [url=http://www.michaelkorsfactory-outletonline.us.com]michael kors outlet[/url] whose bags [url=http://www.oakleysunglassesshop.us.com]Oakley Sunglasses[/url] tend [url=http://www.rayban-outletonline.us.com]Cheap Ray ban Outlet[/url] toward [url=http://www.cheap-ugg.us.com]cheap uggs[/url] softness. [url=http://www.tomsoutlet.ca]Toms Outlet[/url] Bottega [url=http://www.longchampoutletstores.us.com]longchamp outlet[/url] has [url=http://www.oakleyvault.org]oakley vault sunglasses[/url] been [url=http://www.michaelkorssoutletonline.us.com]Michael Kors Outlet Online[/url] leaning [url=http://www.oakleyoutlet.name]oakley outlet[/url] in [url=http://www.oakleysunglasses-online.us.com]cheap oakley outlet[/url] this [url=http://www.cheap-ugg.us.com]uggs outlet[/url] direction [url=http://www.oakleys-sunglassess.us.com]oakley sunglasses[/url] for [url=http://www.750yeezyboost.us.com]750 yeezy boost[/url] several [url=http://www.michaelkorsoutletofficialsite.us.com]Michael Kors Outlet[/url] seasons [url=http://www.oakley-outlets.us.com]oakley outlet[/url] now, and [url=http://www.michaelkors-outlet.co]michael kors outlet[/url] it's [url=http://www.oakleysunglasses-online.us.com]oakley sunglasses[/url] nice to [url=http://www.oakleysunglasseseu.us.com]oakley sunglasses[/url] see [url=http://www.oakleysunglassesus.us.com]oakley outlet[/url] that [url=http://www.oakleysunglassesus.us.com]oakley sunglasses[/url] side [url=http://www.outletonlineclearance.com]Coach Outlet Online Store[/url] of the [url=http://www.valentinoshoe.us.com]valentino shoes[/url] brand's look [url=http://www.rayban--sunglasses.us.org]ray ban sunglasses[/url] develop.

    PurseBlog: Why do you love handbags?

Comment form



captcha_key

Company information

Asial Corporation is a software engineering company located in Tokyo, Japan specializing in PHP, HTML5, and JavaScript programming.
We are able to offer a full range of professional services from user-interface design through to high-performance web system solutions.
Check out our company details here (Japanese only).

More company information

Recent posts