luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

if (!navigator.serviceWorker) return; //Feature detection

navigator.serviceWorker.register("/sw.js").then(function() { //Include the service worker js file
  //Registration worked
}).catch(function() {
  //Registration didn't work
});

luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

self.addEventListener('fetch', function(event) {
  //Tell the browser that we're going to handle this request ourselves
  //Takes a response object or a Promise, that resolves to a Response
  event.respondWith(
    new Response('Hello <strong class="a-winner-is-me">world</strong>', { //String is an example, this isn't the only option here
      headers: {'Content-Type', 'text-html'} //Need to set the content type to make sure the HTML in the string is parsed
    });
  );

luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

fetch('/imgs/superman.jpg'); //Returns a Response object

//Example of it in use
//Using https://gist.github.com/luke-denton/4f2e9caf3ee95b84c692871f070d75df
self.addEventListener('fetch', function(event) {
  event.respondWith(
    //Any request made will receive a superman jpg as a response
    fetch('/imgs/superman.jpg');

luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

//Using example from https://gist.github.com/luke-denton/2d0f00e76151d9e4bf412df8eb1bf354
// This example will replace all jpgs with superman.jpg
self.addEventListener('fetch', function(event) {
  if (event.request.url.endsWith('.jpg')) {
      event.respondWith(
        //Any request made will receive a superman jpg as a response
        fetch('/imgs/superman.jpg');
      );

luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

self.addEventListener('fetch', function(event) {
  event.respondWith(
    //Make the request call as the browser would normally
    fetch(event.request).then(function(reponse) {
      //Check if the status is a 404, returning a custom response if true
      if (response.status === 404) {
          return new Response("Whoops, not found!");
      }

luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

//When a browser runs a service worker for the first time, an event is fired within it, 'install'. This can be used
//to trigger functions to download assets and save them to the cache, using the Cache API

self.addEventListener('install', function(event) {
  var urlsToCache = [
    '/',
    'js.main.js',
    'css/main.css',

luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

//Following on from previous example here: https://gist.github.com/luke-denton/ef791e5150470814a7a155cd85b1bf80

self.addEventListener('fetch', function(event) {
  event.respondWith(
    //Look for a match to the current request in all caches, resolves to a Promise
    caches.match(event.request).then(function(response) {
      //If the repsonse is truthy, meaning something was found in the cache, then return it
      if (response) return response;

luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

//To trigger a new service worker to be created, the service worker code needs to be updated. This could be as simple
//as adding a comment to the file or, as we're doing here, increasing the cache version from 1 to 2, meaning there
//are likely new elements that need to be cached
var staticCacheName = "my-cache-v2";

//Fires when a service worker becomes active. Means its install has completed and it is now controlling the page
//Cache cleanup has to happen in the activate event because other service workers could still be using an old cache
//whilst the new service worker is spinning up. If the old cache is removed, that old service worker will no longer be

luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

//This code is to be placed in a controller file, not in the service worker itself
IndexController.prototype._registerServiceWorker = function() {
  if (!navigator.serviceWorker) return; //Feature detection

  var indexController = this;

  navigator.serviceWorker.register('/sw.js').then(function(reg) {
    // If there's no controller, this page wasn't loaded via a service worker, so they're looking at the latest version.

luke-denton-aligent

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

//Using the example from https://gist.github.com/luke-denton/e52cff8e13fc4efa0f9d83d7729304d1

IndexController.prototype._registerServiceWorker = function() {
  // ... (see https://gist.github.com/luke-denton/e52cff8e13fc4efa0f9d83d7729304d1 for the rest of this function body
  
  //Listen for the controllerchange event, which will mean a new service worker has taken control
  navigator.serviceWorker.addEventListener('controllerchange', function() {
    window.location.reload();