From b2f9737758eb513c9c109886c90e90781f89cdb6 Mon Sep 17 00:00:00 2001
From: Matthew Weier O'Phinney <matthew@zend.com>
Date: Thu, 19 Nov 2015 10:40:21 -0600
Subject: [PATCH] Completed offline caching updates

- Provide an offsite image whitelist, to allow fetch events to fetch
  specific offsite images into the cache.
- Provide a "passthrough" callback for the fetch() promise that simply
  returns the response, and use this for all cases where we want to
  delegate to the network and only fallback to offline resources when
  offline.
- Ensured that the cache clearing strategy is working correctly, by
  ensuring that the filter() function returns a boolean.
---
 public/service-worker.js         | 45 +++++++++++++++++++++++++-------
 src/Console/PrepOfflinePages.php |  2 --
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/public/service-worker.js b/public/service-worker.js
index 4f8660ffef..4d1570dd94 100644
--- a/public/service-worker.js
+++ b/public/service-worker.js
@@ -1,5 +1,5 @@
 /* Ends with ':' so it can be used with cache identifiers */
-var version = 'v0.0.3:';
+var version = 'v0.1.0:';
 
 /* Pages to cache by default */
 var offline = [
@@ -7,6 +7,18 @@ var offline = [
     "/blog",
     "/offline",
     "/resume",
+    "/css/site.min.css",
+    "/images/favicon/apple-touch-icon-57x57.png",
+    "/images/favicon/apple-touch-icon-60x60.png",
+    "/images/favicon/apple-touch-icon-72x72.png",
+    "/images/favicon/favicon-32x32.png",
+    "/images/favicon/favicon-16x16.png",
+    "/images/logo.gif",
+    "/manifest.json",
+    "/js/bootstrap.min.js",
+    "https://www.google.com/jsapi?ABQIAAAAGybdRRvLZwVUcF0dE3oVdBTO-MlgA7VGJpGqyqTOeDXlNzyZQxTGq17s-iAB0m0vwqLQ_A2dHhTg2Q",
+    "https://code.jquery.com/jquery-1.10.2.min.js",
+    "https://farm4.staticflickr.com/3315/3625794227_8d038eac5e_n.jpg",
     "/blog/2015-09-19-zend-10-year-anniversary.html",
     "/blog/2015-09-09-composer-root.html",
     "/blog/2015-07-28-on-psr7-headers.html",
@@ -23,7 +35,11 @@ var offline = [
 var neverCache = [
   '/comics',
   '/contact',
-  '/contact/thank-you',
+  '/contact/thank-you'
+];
+
+var offsiteImageWhitelist = [
+  'https://farm4.staticflickr.com/3315/3625794227_8d038eac5e_n.jpg'
 ];
 
 /* Cache up to 25 pages locally */
@@ -55,7 +71,7 @@ var clearOldCache = function() {
     return Promise.all(
       keys
         .filter(function(key) {
-          return key.indexOf(version);
+          return key.indexOf(version) == -1;
         })
         .map(function(key) {
           return caches.delete(key);
@@ -87,6 +103,11 @@ self.addEventListener('activate', function(event) {
 self.addEventListener('fetch', function(event) {
   var url;
 
+  /* Passthrough; for assets that will never be cached */
+  var passthrough = function(response) {
+    return response;
+  };
+
   /* Fetch from site and cache on completion */
   var fetchFromNetwork = function(response) {
     var cacheCopy = response.clone();
@@ -145,6 +166,11 @@ self.addEventListener('fetch', function(event) {
     return;
   }
 
+  /* If a data: request, we're done. */
+  if (event.request.url.indexOf('data:') === 0) {
+    return;
+  }
+
   /* HTML requests: attempt to fetch from network first, falling back to cache */
   if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
     /* Is the page in our "do not cache list"? If so, attempt to fetch from the
@@ -152,7 +178,7 @@ self.addEventListener('fetch', function(event) {
      */
     url = new URL(event.request.url);
     if (neverCache.indexOf(url.pathname) != -1) {
-      event.respondWith(fetch(event.request).catch(fallback));
+      event.respondWith(fetch(event.request).then(passthrough, fallback));
       return;
     }
 
@@ -167,11 +193,12 @@ self.addEventListener('fetch', function(event) {
 
   /* Image requests */
   if (event.request.headers.get('Accept').indexOf('image/') != -1) {
-    /* If it's from the same origin, attempt to fetch from the cache first, then
-     * the network.
+    /* If it's from the same origin, or in the offsite image whitelist, attempt
+     * to fetch from the cache first, then the network.
      */
     url = new URL(event.request.url);
-    if (url.origin == location.origin) {
+    if (url.origin == location.origin ||
+        offsiteImageWhitelist.indexOf(event.request.url) != -1) {
       event.respondWith(
           caches.match(event.request).then(function(cached) {
             return cached || fetch(event.request).then(fetchFromNetwork, fallback);
@@ -180,8 +207,8 @@ self.addEventListener('fetch', function(event) {
       return;
     }
 
-    /* Otherwise, network, then fallback */
-    event.respondWith(fetch(event.request).catch(fallback));
+    /* Otherwise, network, or offline fallback */
+    event.respondWith(fetch(event.request).then(passthrough, fallback));
     return;
   }
 
diff --git a/src/Console/PrepOfflinePages.php b/src/Console/PrepOfflinePages.php
index 4f8e7bac65..afbbab8e97 100644
--- a/src/Console/PrepOfflinePages.php
+++ b/src/Console/PrepOfflinePages.php
@@ -29,9 +29,7 @@ class PrepOfflinePages
         '/images/favicon/favicon-16x16.png',
         '/images/logo.gif',
         '/manifest.json',
-        '/service-worker.js',
         '/js/bootstrap.min.js',
-        '/js/site.js',
         'https://www.google.com/jsapi?ABQIAAAAGybdRRvLZwVUcF0dE3oVdBTO-MlgA7VGJpGqyqTOeDXlNzyZQxTGq17s-iAB0m0vwqLQ_A2dHhTg2Q',
         'https://code.jquery.com/jquery-1.10.2.min.js',
         'https://farm4.staticflickr.com/3315/3625794227_8d038eac5e_n.jpg',