title: Add Workbox offline support and html caching
body: <p>I am trying to start with workbox. I want to code my website as PWA. It should work offline. And for this, I want to use the CacheFirst Strategy. My Problem is, that the workbox doesnt work offline. And I even can not find my main html file in the cache.<br>
  Here is my initialization of my ServiceWorker in the main html file:</p>
  
  <pre><code>&lt;script&gt;
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () =&gt; {
          navigator.serviceWorker.register('./service-worker.js');
        });
      }
    &lt;/script&gt;  
  </code></pre>
  
  <p>And here is my service-worker.js file:   </p>
  
  <pre><code>importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
  
  workbox.routing.registerRoute(
    /\.html/,
    new workbox.strategies.CacheFirst({
      cacheName: 'html-cache',
    })
  );
  
  workbox.routing.registerRoute(
    /\.css$/,
    new workbox.strategies.CacheFirst({
      cacheName: 'css-cache',
    })
  );
  
  workbox.routing.registerRoute(
    /\.js/,
    new workbox.strategies.CacheFirst({
      cacheName: 'js-cache',
    })
  );
  
  workbox.routing.registerRoute(
    /\.(?:png|jpg|jpeg|svg|gif)$/,
    new workbox.strategies.CacheFirst({
      cacheName: 'image-cache',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 20,
          maxAgeSeconds: 7 * 24 * 60 * 60,
        })
      ],
    })
  );
  </code></pre>
  
  <p>You see I initialize it and set it up as need. <a href="https://i.stack.imgur.com/8iayD.png" rel="nofollow noreferrer">Here you can see the caches in the dev console.</a> But as you can see there is no html-cache. Why? And again it doesn't work offline. Additional info: I am running the website over HTTPS as it is needed for the service worker. Hope somebody can help me.<br>
  ~Marcus</p>