jakearchibald/app-v1.js Secret

## app-v1.js
fetch('/page-data', {
  credentials: 'include'
}).then(r => r.json()).then(data => {
  document.querySelector('.content').innerHTML = data.html;
});

## shell-v1.html
<!DOCTYPE html>
<h1>This is the static header</h1>
<div class="content"></div>
<script src="/app-v1.js"></script>

## sw.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll([
        '/shell-v1.html',
        '/app-v1.js'
      ])
    )
  );

  // Serve same-origin fetches for '/' with the cached copy of shell-v1.html.
  event.declareRoute({
    path: '/'
  }, new CachesSource('/shell-v1.html'), {
    // Also trigger request for /page-data.
    // This will go through the route below
    preloads: [
      new Request('/page-data', {credentials: 'include'})
    ]
  });

  // Fetch page-data straight from the network
  event.declareRoute({
    path: '/page-data'
  }, new FetchSource());

  // Serve any-origin fetches using the cache, or a network fetch.
  event.declareRoute({
    origin: ''
  }, new FallbackSources(
    new CachesStorage(),
    new FetchStorage()
  ));
});

self.addEventListener('activate', event => {
  // delete old caches
});
	fetch('/page-data', {
	credentials: 'include'
	}).then(r => r.json()).then(data => {
	document.querySelector('.content').innerHTML = data.html;
	});
	<!DOCTYPE html>
	<h1>This is the static header</h1>
	<div class="content"></div>
	<script src="/app-v1.js"></script>
	self.addEventListener('install', event => {
	event.waitUntil(
	caches.open('static-v1').then(cache =>
	cache.addAll([
	'/shell-v1.html',
	'/app-v1.js'
	])
	)
	);

	// Serve same-origin fetches for '/' with the cached copy of shell-v1.html.
	event.declareRoute({
	path: '/'
	}, new CachesSource('/shell-v1.html'), {
	// Also trigger request for /page-data.
	// This will go through the route below
	preloads: [
	new Request('/page-data', {credentials: 'include'})
	]
	});

	// Fetch page-data straight from the network
	event.declareRoute({
	path: '/page-data'
	}, new FetchSource());

	// Serve any-origin fetches using the cache, or a network fetch.
	event.declareRoute({
	origin: ''
	}, new FallbackSources(
	new CachesStorage(),
	new FetchStorage()
	));
	});

	self.addEventListener('activate', event => {
	// delete old caches
	});