SYDPWA Meetup - Dec. 6th 2016

site.js

// ensure no console errors or issues in older browsers
// check for service worker first
if(navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js' /* , options */)
    .then(function(regsitered) {
      console.log('yay! registered')
    }).catch(function() {
      console.log('oh no! somethings wrong')
    })
}
/**
 * check sw regsiter function docs
 * https://www.w3.org/TR/service-workers/#navigator-service-worker-register
 *
 * Note:
 * options.scope: if you don't define it, the default is the directory of which /sw.js exists
 */

sw01.js

// logging the request url
self.addEventListener('fetch', function(event){
  console.log(event.request.url)
})

sw02.js

self.addEventListener('fetch', function(event){
  event.respondWith(
    // basic response can be a string
    // response object accepts headers object to, we can make it html!
    new Response('<h1>Responded</h1>', {
      headers: {
        'content-type': 'text\html'
      }
    })
  )
})

sw03.js

self.addEventListener('fetch', function(event){
  // our request url is a string ends with the requested filename
  if(event.request.url.endsWith('mario.png')) {
    event.respondWith(
      // fetching Nyan mario instead.
      fetch('/assets/nyan-mario.gif')
    )
  }
})

sw04.js

self.addEventListener('fetch', function(event){
  event.respondWith(
    // fetching the request is a typical browser behavious in loading assets from the server through https
    // fetch is a promise
    // if there's a response, whatever it is [2xx, 4xx, 5xx], means we online/connected
    // if it's been rejected and we're in cach(..) means we offline, let's respond as now we know how to!
    fetch(event.request).then(function(response){
      return response
    }).catch(function(){
      // omg! our app responded when offline!
      return new Response('<h1>Offline Response 🦄 </h1>', {
        headers: {
          'content-type': 'text\html'
        }
      })
    })
  )
})

sw05.js

/**
 * 2nd Service Worker event is `install`
 * 
 * You can find saved-to-cache assets in:
 * Developer Console > Application > Cache Storage
 */
self.addEventListener('install', function(event){
  event.waitUntil(
    caches.open('swper-mario-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/site.js',
        '/site.css',
        '/assets/mario.png',
        '/index.html',
        '/lifecycle.html',
        '/offline.html'
      ]);
    })
  )
})

self.addEventListener('fetch', function(event){
  event.respondWith(
    // will return from cache if it's been found otherwise will do normal browser behavious, which is fetch, or try to fetch.
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request)
    })
  )
})