Question

我想创建一个HTML流，以便某些流源来自缓存，但是总是从网络中提取一个。该脚本中包含一个脚本标签，该标签上将始终具有最新的哈希值。这样一来，我的页面的一部分会被sw缓存，但是一部分仍然遵循传统的缓存清除模式。

代码

 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' }),
  ])
);

但是，该来源似乎总是来自浏览器缓存（或者至少我假设它是浏览器缓存，因为它根本不在Workbox的缓存中）。

我看不到Workbox在“网络”标签中单独请求该数据（就像在工作区演示here中出现的一样）。

您是否需要执行一些特殊的操作以使流始终从服务器获取数据？

Answer 1

我认为您的问题归结为采用以下代码：

({ params }) => fragmentStrategy.makeRequest({
  request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),

，并确保它始终跳过浏览器的HTTP缓存，并且实际上是针对网络的。正确吗？

如果是这样，执行此操作的方法是将实际的Request对象传递给request的命名makeRequest()参数的URL字符串。在该Request对象中，可以将cache mode设置为'no-store'，以确保完全避免HTTP缓存。

这看起来像：

({ params }) => {
  const noStoreRequest = new Request(
    `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
    {cache: 'no-store'}
  );

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

混合cacheFirst和networkOnly仅在流策略内实现网络

1 个答案: