Fallback to fetch() if the precached response is missing. (#1302)

packages/workbox-precaching/_default.mjs

@@ -211,9 +211,24 @@ moduleExports.addRoute = (options) => {
     }
 
     let responsePromise = caches.open(cacheName)
-    .then((cache) => {
-      return cache.match(precachedUrl);
-    });
+      .then((cache) => {
+        return cache.match(precachedUrl);
+      }).then((cachedResponse) => {
+        if (cachedResponse) {
+          return cachedResponse;
+        }
+
+        // Fall back to the network if we don't have a cached response (perhaps
+        // due to manual cache cleanup).
+        if (process.env.NODE_ENV !== 'production') {
+          logger.debug(`The precached response for ` +
+            `${getFriendlyURL(precachedUrl)} in ${cacheName} was not found. ` +
+            `Falling back to the network instead.`);
+        }
+
+        return fetch(precachedUrl);
+      });
+
     if (process.env.NODE_ENV !== 'production') {
       responsePromise = responsePromise.then((response) => {
         // Workbox is going to handle the route.

test/workbox-precaching/node/controllers/test-default.mjs

@@ -394,6 +394,39 @@ describe(`[workbox-precaching] default export`, function() {
       const response = await fetchPromise;
       expect(response).to.not.exist;
     });
+
+    it(`should call fetch() if there's a missing entry for a URL that has been precached`, async function() {
+      const fetchResponse = new Response('From fetch()');
+      const fetchStub = sandbox.stub(self, 'fetch').returns(fetchResponse);
+
+      const url = '/some-url';
+
+      let fetchCb;
+      sandbox.stub(self, 'addEventListener').callsFake((eventName, cb) => {
+        if (eventName === 'fetch') {
+          fetchCb = cb;
+        }
+      });
+
+      precaching.addRoute();
+      // Because the install handler is not called in this test, there won't be
+      // a cache entry for url, even though precache() is called.
+      precaching.precache([url]);
+
+      const fetchEvent = new FetchEvent('fetch', {
+        request: new Request(url),
+      });
+      let responsePromise;
+      fetchEvent.respondWith = (promise) => {
+        responsePromise = promise;
+      };
+      fetchCb(fetchEvent);
+
+      const response = await responsePromise;
+
+      expect(fetchStub.calledOnce).to.be.true;
+      expect(response).to.eql(fetchResponse);
+    });
   });
 
   describe(`precacheAndRoute()`, function() {