No cache control and wait from window load (#1100)

GoogleChrome · Dec 2, 2017 · fb016ed · fb016ed
1 parent 29f3cdc
commit fb016ed
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 134 deletions.
diff --git a/demos/functions/index.js b/demos/functions/index.js
@@ -90,6 +90,7 @@ workbox.setConfig({
 `;
 
   res.header('Content-Type', 'application/javascript');
+  res.header('Cache-Control', 'no-cache');
   res.render(`demo/${req.params.moduleName}/${swTemplate}`, {
     title: `${req.params.moduleName} Demo`,
     CDN_URL: cdnUrl,

diff --git a/demos/functions/views/demo/workbox-broadcast-cache-update.hbs b/demos/functions/views/demo/workbox-broadcast-cache-update.hbs
@@ -17,20 +17,23 @@
 </section>
 
 <script>
+  const triggerBroadcast = document.querySelector('.trigger-broadcast');
+
   const broadcastChannel = new BroadcastChannel('broadcast-demo');
   broadcastChannel.onmessage = (ev) => {
     console.log(`Received a message on 'broadcast-demo' channel.`);
     console.log(ev.data);
   };
 
-  navigator.serviceWorker.register('/demo/workbox-broadcast-cache-update/sw.js')
-  .then((reg) => {
-    const triggerBroadcast = document.querySelector('.trigger-broadcast');
-    triggerBroadcast.addEventListener('click', () => {
-      const message = {
-        command: 'trigger-broadcast',
-      };
-      reg.active.postMessage(message);
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/demo/workbox-broadcast-cache-update/sw.js')
+    .then((reg) => {
+      triggerBroadcast.addEventListener('click', () => {
+        const message = {
+          command: 'trigger-broadcast',
+        };
+        reg.active.postMessage(message);
+      });
     });
   });
 </script>
diff --git a/demos/functions/views/demo/workbox-broadcast-cache-update/sw.hbs b/demos/functions/views/demo/workbox-broadcast-cache-update/sw.hbs
@@ -9,7 +9,7 @@ const initialResponse = new Response('Response 1', {
   }
 });
 
-self.addEventListener('message', function(event) {
+self.addEventListener('message', (event) => {
   switch(event.data.command) {
     case 'trigger-broadcast':
       const secondResponse = new Response('Response 2', {

diff --git a/demos/functions/views/demo/workbox-cache-expiration.hbs b/demos/functions/views/demo/workbox-cache-expiration.hbs
@@ -22,11 +22,11 @@
 </section>
 
 <script>
+  const expireBtn = document.querySelector('.expire');
+
   const TIMEOUT_IN_SECS = 30;
   const MAX_ENTRIES = 3;
 
-  navigator.serviceWorker.register('/demo/workbox-cache-expiration/sw.js');
-
   const setupTimeout = (btnElement, textElement) => {
     textElement.textContent = `${btnElement.__workbox_timeoutCount}s`;
     btnElement.__workbox_timeoutId = setTimeout(() => {
@@ -39,44 +39,38 @@
     }, 1000);
   };
 
-  for (let i = 0; i < 5; i++) {
-    const entryBtn = document.querySelector(`.entry-${i + 1}`);
-    const expireText = document.querySelector(`.entry-expire-${i + 1}`);
-    entryBtn.addEventListener('click', () => {
-      navigator.serviceWorker.register('/demo/workbox-cache-expiration/sw.js')
-      .then((reg) => {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/demo/workbox-cache-expiration/sw.js')
+    .then((reg) => {
+      for (let i = 0; i < 5; i++) {
+        const entryBtn = document.querySelector(`.entry-${i + 1}`);
+        const expireText = document.querySelector(`.entry-expire-${i + 1}`);
+        entryBtn.addEventListener('click', () => {
+          const message = {
+            command: 'update-entry',
+            id: i + 1,
+          };
+
+          reg.active.postMessage(message);
+
+          if (entryBtn.__workbox_timeoutId) {
+            clearTimeout(entryBtn.__workbox_timeoutId);
+          }
+
+          entryBtn.__workbox_timeoutCount = TIMEOUT_IN_SECS;
+          setupTimeout(entryBtn, expireText);
+        });
+      }
+
+      expireBtn.addEventListener('click', () => {
         const message = {
-          command: 'update-entry',
-          id: i + 1,
+          command: 'expire-entries',
         };
-        const messageChannel = new MessageChannel();
-        reg.active.postMessage(message,
-          [messageChannel.port2]);
-      })
-      .then(() => {
-        if (entryBtn.__workbox_timeoutId) {
-          clearTimeout(entryBtn.__workbox_timeoutId);
-        }
 
-        entryBtn.__workbox_timeoutCount = TIMEOUT_IN_SECS;
-        setupTimeout(entryBtn, expireText);
-      });
-    });
-  }
+        reg.active.postMessage(message);
 
-  const expireBtn = document.querySelector('.expire');
-  expireBtn.addEventListener('click', () => {
-    navigator.serviceWorker.register('/demo/workbox-cache-expiration/sw.js')
-    .then((reg) => {
-      const message = {
-        command: 'expire-entries',
-      };
-      const messageChannel = new MessageChannel();
-      reg.active.postMessage(message,
-        [messageChannel.port2]);
-    })
-    .then(() => {
-      // TODO Would be good to find a way to highlight max entries.
+        // TODO: Would be good to find a way to highlight max entries.
+      });
     });
   });
 </script>
diff --git a/demos/functions/views/demo/workbox-cache-expiration/sw.hbs b/demos/functions/views/demo/workbox-cache-expiration/sw.hbs
@@ -17,7 +17,7 @@ const updateEntry = (entryID) => {
   });
 };
 
-self.addEventListener('message', function(event) {
+self.addEventListener('message', (event) => {
   switch(event.data.command) {
     case 'update-entry':
       updateEntry(event.data.id);

diff --git a/demos/functions/views/demo/workbox-cacheable-response.hbs b/demos/functions/views/demo/workbox-cacheable-response.hbs
@@ -19,30 +19,34 @@
 </section>
 
 <script>
-  navigator.serviceWorker.register('/demo/workbox-cacheable-response/sw.js');
-  const requestURL = '/api/is-response-cacheable';
-
   const withGoodHeaderBtn = document.querySelector('.with-good-header');
-  withGoodHeaderBtn.addEventListener('click', () => {
-    fetch(requestURL, {
-      headers: {
-        'X-Is-Cacheable': true
-      }
-    });
-  });
-
   const withBadHeaderBtn = document.querySelector('.with-bad-header');
-  withBadHeaderBtn.addEventListener('click', () => {
-    fetch(requestURL, {
-      headers: {
-        'X-Is-Cacheable': false
-      }
-    });
-  });
-
   const withoutHeaderBtn = document.querySelector('.without-header');
-  withoutHeaderBtn.addEventListener('click', () => {
-    fetch(requestURL);
-  });
 
+  const DEMO_REQUEST_URL = '/api/is-response-cacheable';
+
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/demo/workbox-cacheable-response/sw.js')
+    .then(() => {
+      withGoodHeaderBtn.addEventListener('click', () => {
+        fetch(DEMO_REQUEST_URL, {
+          headers: {
+            'X-Is-Cacheable': true
+          }
+        });
+
+        withBadHeaderBtn.addEventListener('click', () => {
+          fetch(DEMO_REQUEST_URL, {
+            headers: {
+              'X-Is-Cacheable': false
+            }
+          });
+        });
+
+        withoutHeaderBtn.addEventListener('click', () => {
+          fetch(DEMO_REQUEST_URL);
+        });
+      });
+    });
+  });
 </script>
diff --git a/demos/functions/views/demo/workbox-core.hbs b/demos/functions/views/demo/workbox-core.hbs
@@ -21,28 +21,20 @@
   const cacheNamesBtn = document.querySelector('.show-cache-names');
 
   installSWBtn.addEventListener('click', () => {
-    navigator.serviceWorker.register('/demo/workbox-core/sw.js');
-  });
-  showLogsBtn.addEventListener('click', () => {
-    navigator.serviceWorker.register('/demo/workbox-core/sw.js')
-    .then((reg) => {
-      const message = {
-        command: 'printLogs',
-      };
-      const messageChannel = new MessageChannel();
-      reg.active.postMessage(message,
-        [messageChannel.port2]);
-    });
-  });
-  cacheNamesBtn.addEventListener('click', () => {
     navigator.serviceWorker.register('/demo/workbox-core/sw.js')
     .then((reg) => {
-      const message = {
-        command: 'printCacheNames',
-      };
-      const messageChannel = new MessageChannel();
-      reg.active.postMessage(message,
-        [messageChannel.port2]);
+      showLogsBtn.addEventListener('click', () => {
+        const message = {
+          command: 'printLogs',
+        };
+        reg.active.postMessage(message);
+      });
+      cacheNamesBtn.addEventListener('click', () => {
+        const message = {
+          command: 'printCacheNames',
+        };
+        reg.active.postMessage(message);
+      });
     });
   });
 </script>
diff --git a/demos/functions/views/demo/workbox-core/sw.hbs b/demos/functions/views/demo/workbox-core/sw.hbs
@@ -18,7 +18,7 @@ const printCacheNames = () => {
   });
 };
 
-self.addEventListener('message', function(event) {
+self.addEventListener('message', (event) => {
   switch(event.data.command) {
     case 'printLogs':
       printLogs();

diff --git a/demos/functions/views/demo/workbox-strategies.hbs b/demos/functions/views/demo/workbox-strategies.hbs
@@ -26,57 +26,60 @@
 </section>
 
 <script>
-  navigator.serviceWorker.register('/demo/workbox-strategies/sw.js');
-
   const cacheOnlyEmpty = document.querySelector('.cache-only-empty-cache');
-  cacheOnlyEmpty.addEventListener('click', () => {
-    fetch('cache-only-empty-cache.txt').catch(() => {});
-  });
-
   const cacheOnlyPopulated = document.querySelector('.cache-only-populated-cache');
-  cacheOnlyPopulated.addEventListener('click', () => {
-    fetch('cache-only-populated-cache')
-    .then((response) => {
-      return response.text();
-    });
-  });
-
   const cacheFirst = document.querySelector('.cache-first');
-  cacheFirst.addEventListener('click', () => {
-    fetch('cache-first.txt')
-    .then((response) => {
-      return response.text();
-    });
-  });
-
   const networkOnly = document.querySelector('.network-only');
-  networkOnly.addEventListener('click', () => {
-    fetch('network-only.txt')
-    .then((response) => {
-      return response.text();
-    });
-  });
-
   const networkFirstValid = document.querySelector('.network-first-valid');
-  networkFirstValid.addEventListener('click', () => {
-    fetch('network-first.txt')
-    .then((response) => {
-      return response.text();
-    });
-  });
-
   const networkFirstFailing = document.querySelector('.network-first-failing');
-  networkFirstFailing.addEventListener('click', () => {
-    fetch('network-first-404.txt')
-    .catch(() => {});
-  });
-
   const staleWhileRevalidate = document.querySelector('.stale-while-revalidate');
-  staleWhileRevalidate.addEventListener('click', () => {
-    fetch('stale-while-revalidate.txt')
-    .then((response) => {
-      return response.text();
+
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/demo/workbox-strategies/sw.js')
+    .then(() => {
+      cacheOnlyEmpty.addEventListener('click', () => {
+        fetch('cache-only-empty-cache.txt').catch(() => {});
+      });
+
+      cacheOnlyPopulated.addEventListener('click', () => {
+        fetch('cache-only-populated-cache')
+        .then((response) => {
+          return response.text();
+        });
+      });
+
+      cacheFirst.addEventListener('click', () => {
+        fetch('cache-first.txt')
+        .then((response) => {
+          return response.text();
+        });
+      });
+
+      networkOnly.addEventListener('click', () => {
+        fetch('network-only.txt')
+        .then((response) => {
+          return response.text();
+        });
+      });
+
+      networkFirstValid.addEventListener('click', () => {
+        fetch('network-first.txt')
+        .then((response) => {
+          return response.text();
+        });
+      });
+
+      networkFirstFailing.addEventListener('click', () => {
+        fetch('network-first-404.txt')
+        .catch(() => {});
+      });
+
+      staleWhileRevalidate.addEventListener('click', () => {
+        fetch('stale-while-revalidate.txt')
+        .then((response) => {
+          return response.text();
+        });
+      });
     });
   });
-
 </script>
diff --git a/demos/functions/views/demo/workbox-sw.hbs b/demos/functions/views/demo/workbox-sw.hbs
@@ -6,7 +6,8 @@
           <li>Open DevTools</li>
           <li>Go to the Console</li>
           <li>Click this button:<br /><button class="install-sw btn btn-outline-primary">Install Service Worker</button></li>
-          <li>Checkout the logs for info on Workbox and getting started.</li>
+          <li>You should see a 'Welcome to Workbox' message.</li>
+          <li>Refresh the page and see the requests being passed through Workbox.</li>
         </ol>
 
         <!-- Image will be stored in a custom cache -->