Populate Cache from client side

data.txt

Hello World

index.html

<button>Load me</button>
<div></div>
<script>
  var $ = document.querySelector.bind(document);
  navigator.serviceWorker.register('sw.js').then(registration => {
    fetch('/data.txt').then(response => {
      return caches.open('test').then(cache => {
        return cache.put('/data.txt', response);
      });
    });
  });

  $('button').addEventListener('click', _ => {
    fetch('/data.txt')
      .then(response => response.text())
      .then(response => $('div').innerText = response);
  });
</script>

sw.js

self.addEventListener('install', function(event) {
  event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', function(event) {
  event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});