首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Workbox运行时缓存不能与带查询参数的url一起工作?

基础概念

Workbox 是一个用于简化渐进式Web应用(PWA)中Service Worker开发的库。它提供了一套工具和策略,帮助开发者实现离线优先的应用体验。Workbox 的运行时缓存(Runtime Caching)允许你在Service Worker中动态地缓存和检索资源。

问题描述

Workbox 运行时缓存不能与带查询参数的URL一起工作。

原因

Workbox 的默认行为是基于URL进行缓存匹配的,而带查询参数的URL会导致每次请求的URL都不同,即使资源内容相同,也会被视为不同的请求,从而无法正确地从缓存中获取资源。

解决方法

1. 使用 urlPatternhandler

你可以使用 urlPatternhandler 来精确控制哪些URL需要缓存,以及如何处理这些请求。

代码语言:txt
复制
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
  })
);

在这个例子中,我们只缓存以 /api/ 开头的URL,并且使用 StaleWhileRevalidate 策略。

2. 使用 CacheKeyGenerator

你可以自定义 CacheKeyGenerator 来生成唯一的缓存键,即使URL带有查询参数。

代码语言:txt
复制
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'work.js';

class QueryParamCacheKeyGenerator {
  generateKey(request) {
    const url = new URL(request.url);
    url.search = '';
    return url.toString();
  }
}

const cacheKeyGenerator = new QueryParamCacheKeyGenerator();

registerRoute(
  ({ request }) => request.destination === 'script',
  new StaleWhileRevalidate({
    cacheName: 'scripts',
    cacheKeyGenerator: cacheKeyGenerator,
  })
);

在这个例子中,我们移除了URL中的查询参数,生成了一个唯一的缓存键。

3. 使用 NetworkFirst 策略

如果你希望优先从网络获取资源,然后再使用缓存,可以使用 NetworkFirst 策略。

代码语言:txt
复制
import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
  })
);

应用场景

  • API请求:对于需要频繁更新的数据,使用 NetworkFirst 策略可以确保获取最新的数据。
  • 静态资源:对于不经常变化的资源,可以使用 StaleWhileRevalidate 策略来提高加载速度。

参考链接

通过以上方法,你可以有效地解决Workbox运行时缓存不能与带查询参数的URL一起工作的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券