Jake Archibald's talk on BrazilJS

The invitation

I think the first video I watched of this conference, back in March was:

Jake Archibald's invitation to the event.

Just a misterious talk about the future of web performance. I got excited to attend to the conference because of his and Mattias Johansson’s invitations.

The talk

Jake Archibald opened the conference with a Game of Thrones Google World video about London, where he works, and Carslile, his hometown. He is a developer advocate at Google Chrome.

Then he presented Emojoy! to introduce how a progressive webapp is built. What’s basically needed is an index.html and a manifest.json for setting up the app.

So, the app runs on the mobile browser and when the phone is offline (and worse on Lie-fie, that is when the phone has a connection but is so weak that doesn’t get anything). When offline or on Lie-fie, the experience of a web app can be terrible.

Service Worker

To the rescue, the new kid on the block is the Service Worker, a resource that is available on all modern browsers and is accessed through javascript.

on the page:

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js')
}

ServiceWorker controls the flow between the browser and the server and thus is able to make offline-first work.

First, the app registers some files to the cache:

sw.js:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('static-v1')
      .then(cache => cache.addAll([
        '/shell-b2a6d8f0.html',
        '/styles-8d723caf.css',
        '/script-4b38af25.js'
      ]))
  )
})

Sample javascript code I copied from the presentation.

But to create an offline-first experience, the fetch event must be setup.

sw.js:

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url)

  if (url.origin == location.origin && url.pathname == '/') {
    event.respondWith(caches.match('/shell-b2a6d8f0.html'))
    return
  }

  event.respondWith(
    caches.match(event.request).
      then(response => response || fetch(event.request))
  )
})

This way, the cache is the primary resource of data and is falling back to the network. The user always has a good experience, even on Lie-fie. And this is called offline first.

Full talk:

Update: BrazilJS organizers just published the recordings:

Further Reading

The talk was also about Streams, but I won’t cover here, except the fact that he was the first one to play with the poo emoji (💩).

Update: Jake published the slides:

Part I:

Part II - uncovered:

The official tutorial about progressive webapps and the Emojoy! source code are also available. 😃

BrazilJS 2016

This post is part of my participation on BrazilJS 2016 Conference.

• ← Previous Post
• Next Post →