Ytukyg

I want to create a stream of HTML so that some of the stream sources are from the cache, but one is always pulled from the network. That one has a script tag in it that will always have the most up-to-date hash on it. So that way part of my page is cached by the sw but part is still following traditional cache busting patterns.

Code

 const partialStrategy = workbox.strategies['cacheFirst']({

  cacheName: 'empath-static',

});



const fragmentStrategy = workbox.strategies.networkOnly();



 workbox.routing.registerRoute(

  routeTemplate('/pages/:domain/:container/:app'),

  workbox.streams.strategy([

    () => partialStrategy.makeRequest({ request: 'partials/head.html' }),

    () => partialStrategy.makeRequest({ request: 'header/header.html' }),

    ({ params }) => fragmentStrategy.makeRequest({

      request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,

    }),

    () => partialStrategy.makeRequest({ request: 'partials/foot.html' }),

  ])

);

However that source always seems to come from the browser cache (or at least I'm assuming its the browser cache since its not in Workbox's cache at all).

I don't see Workbox making an individual request for that data in the network tab (like appears in the workbox demo here).

Is there something special you have to do to make the stream always go get the data from the server?

I think your question boils down to taking this bit of code:

({ params }) => fragmentStrategy.makeRequest({

  request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,

}),

and making sure that it always skips the browser's HTTP cache and actually goes against the network. Is that correct?

If so, the way to do that would be to pass in an actual Request object instead of a URL string for the named request parameter to makeRequest(). In that Request object, you can set the cache mode to 'no-store' to ensure that the HTTP cache is completely avoided.

That would look something like:

({ params }) => {

  const noStoreRequest = new Request(

    `${params.domain}/${params.container}/${params.app}/${params.app}.html`,

    {cache: 'no-store'}

  );



  return fragmentStrategy.makeRequest({request: noStoreRequest});

},