首页
学习
活动
专区
工具
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一起工作的问题。

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

相关·内容

  • 谈谈对K8S CNI、CRI和CSI插件的理解

    K8S的设计初衷就是支持可插拔架构,解决PaaS平台不好用、不能用、需要定制化等问题,K8S集成了插件、附加组件、服务和接口来扩展平台的核心功能。附加组件被定义为与环境的其他部分无缝集成的组件,提供类似本机的特性,并扩展集群管理员可用的组件,扩展还可以用于添加自定义软硬件的支持;服务和接口提供了看似繁琐和冗余的设计(比如我们常见的PV、PVC、SC),实际上为开发人员提供了更多的可扩展性。在本文中,我们将更多地关注K8S提供三个特定功能的接口插件:运行时插件、存储插件和网络插件。更具体地说,我们将讨论容器网络接口(CNI)、容器运行时接口(CRI)和容器存储接口(CSI)如何扩展K8S的核心功能,以及它对定制服务的支持。

    03

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券