Angular Service Worker,缓存离线应用程序的 api 调用

2024-05-02

我正在尝试让服务工作者以角度方式处理 API 请求。 我希望该应用程序能够离线工作,并且我有以下配置:

    {
        "name": "api",
        "urls": ["https://x.com/**"],
        "cacheConfig": {
            "strategy": "performance",
            "maxSize": 20,
            "maxAge": "365d",
            "timeout": "5s"
        }
    }

这是我离线时 xhr 选项卡的样子:

这是用户请求的内容:

如您所见,用户的 API 调用未解析。

这就是回应的内容user在线时看起来像:


尝试这个:

  • 转到您的应用程序选项卡 -> 清除存储 -> 清除站点数据。
  • 更改您的 DataGroups 数组:

    {
        "name": "api",
        "urls": ["https://x.com/**"],
        "cacheConfig": {
            "strategy": "performance",
            "maxSize": 20,
            "maxAge": "365d",
            "timeout": "5s"
        }
    }
    

对此:

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/user" //<=========== I know you want all API calls to be cached, but try this first and see
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]
  • 保存并构建您的应用程序PROD,
  • 第一次访问该页面。
  • 禁用网络
  • 刷新您的页面
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular Service Worker,缓存离线应用程序的 api 调用 的相关文章

  • 浏览器视口大小(以设备像素为单位)

    Goal 我希望 Flash 能够获得有关浏览器视口宽度和高度 以设备像素为单位 的准确信息初始化 调整大小或浏览器缩放事件时 规格 我需要将 flash 嵌入到在 chrome safari firefox 等中运行的 html 页面中
  • angular2 MdDialog 未显示为弹出窗口

    所以我尝试使用 MdDialog 来显示错误消息 不幸的是 它不是显示为弹出窗口 而是显示为页面底部的块 我需要查看或更改哪些内容才能使其正常工作 下面的代码 common modal component html h2 title h2
  • 如何在没有 jQuery 的情况下删除 Javascript 中的元素

    我试图通过以下方式从 DOM 中删除 Div a 标签嵌套在其中 我想我正在寻找的是 jQuery 的纯 Javascript 版本 div remove 这是html设置 div a href Click me to remove the
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 为什么 setTimeout 在 Chrome 中触发两次,而在 IE 或 Firefox 中则不然?

    有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 如何在 Angular 4 中翻译 mat-paginator?

    你知道如何在 Angular 中翻译 每页项目 吗mat paginator标签 这mat paginator是材料设计中的一个元素 您可以使用MatPaginatorIntl为了这 威尔 豪厄尔制作 https github com an
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐

  • 为什么我的 git 预提交钩子不修剪行尾的空白?

    我在 Mac Mojave 上 我在 git templates hooks pre commit 创建了一个文件 我想删除我正在提交的文件行尾的空格 我希望这种情况在全球范围内发生在我的所有项目中 A git hook script to
  • 有没有办法为数据表绘制UMAP或t-SNE图?

    我有一个巨大的文件 下面是一小部分数据 如下所示 我想绘制一个 PCA 我可以使用 PCA 函数绘制 PCA 但它看起来有点乱 因为我有 200 列 所以我想也许 t SNE 或 UMAP 效果更好 但我无法使用它们进行绘图 我想在图中显示
  • Python GTK 信号处理程序不工作

    我正在使用 GTK 为 GUI 编写一个 Python 应用程序 我注意到从终端使用 Ctrl C 关闭它不起作用 我发现这是因为一个错误 所以我尝试手动处理该信号 问题是 如果我将默认行为设置为默认行为 则会捕获信号并正确关闭应用程序 但
  • 我如何从 Rust 的 Vec 中获取项目?

    我正在寻找一种方法consumes a Vec并返回一个元素 无需恢复的开销Vec的不变量的方式remove and swap remove do fn take
  • Gradle:根据配置文件加载属性文件

    我想编写一个 gradle 构建脚本 它可以在不同的环境 开发 实时 中工作 在每个环境中 我必须加载不同的属性集 目标目录 数据库等 是否有一种 gr adle 方法可以读取依赖于环境或配置文件的属性文件 您可能想查看Gradle 属性插
  • # 的未定义方法“type_cast”(NoMethodError)

    ActiveRecord ConnectionAdapters Column曾经有一个方法叫做type cast它接受一个字符串并将其转换为 到适当的实例 这似乎在某个时候被删除了 我不知道应该做什么来替换它 这是使用它的代码 Create
  • iOS 7 中强制横向 ViewController

    我有十多个处于纵向模式的 ViewController 但无论设备的方向如何 我都需要强制一个处于横向模式 这是解决方案 1 将 LandscapeViewController 嵌入到子类 NavigationController 中 并使
  • 枚举由 Autofac 生命周期跟踪的一次性物品

    Autofac 使用生命周期范围作为处理工作单元期间创建的所有组件的一种方式 虽然这是一个强大的功能 但很容易编写不能正确处理生命周期范围的代码 这会导致跟踪的一次性数量随着时间的推移而增长 实际上是内存泄漏 有没有办法监控生命周期范围在任
  • Maven pom.xml 中“SNAPSHOT”版本的含义[重复]

    这个问题在这里已经有答案了 在处理多个项目时 我遇到了很多版本号有问题的情况 快照后缀 例如
  • Sympy - 分数操作

    我基本上希望 Sympy 生成乳胶代码 frac x 1 3 y 但每当我要求它生成事物的 Tex 组件时 Sympy 总是返回 frac x 3 frac 1 3 如何避免分解方程 并将等于运算符分配给另一个变量 我还没有尝试将 y 部分
  • 发送短信之前显示确认对话框

    我是 Android 新手 我已经完全绑定了我的应用程序 但我希望现在对其进行更改 当有人发送短信时 我想显示一个发送短信的确认对话框 询问是否发送 我必须为此创建一个公共类 我已经编写了源代码 它工作正常 但如果用户不单击 是 或 取消
  • 共享扩展 - 自 iOS 14 以来首次尝试时应用程序未显示在共享菜单中

    升级到 Xcode 12 和 iOS 14 后 似乎开始发生一些奇怪的事情 应用程序以前在共享菜单选项中显示良好 但突然它表现得很奇怪 并且仅在第二次尝试后才显示 我的目标是获取网页网址 这是我的共享激活规则 我什至尝试过新项目 并添加了带
  • JS奇怪的行为[重复]

    这个问题在这里已经有答案了 有人可以帮助我 为什么我们在 JS 片段中有这种行为 var foo function return hi console log foo var foo1 function return hi console
  • 如何在没有android studio的情况下签署android apk

    我已经发现很多很多关于这一点的令人困惑的答案 How do I Sign release debug android app没有 Android Studio 例如 在签署 ionic cordova phonegap 应用程序时 您可以在
  • 如何在 React 中验证组件组合/“基础”组件/渲染的根组件?

    众所周知 当我们想要 扩展 一个
  • 在 R 中从一条线偏移绘制一条平行线

    我有代表沿着一些街道行驶的线串 但我实际上想代表骑自行车者的旅程 它偏离线路 即他们在路边附近行驶 我正在努力思考如何去做 我制作了一段可重现的 R 代码来进行说明 Let s say I have a route along some s
  • 如何在swift中将字符串(在Java中使用加密MessageDigest)编码为Base64字符串?

    在Java中 我使用了这个 public void encryptData String data Hello World MessageDigest md null try md MessageDigest getInstance MD5
  • 如何使用mysqli准备好的语句?

    我正在尝试准备好的语句 但下面的代码不起作用 我收到错误 致命错误 在非对象上调用成员函数execute var www prepared php 第 12 行
  • 比较 2 个 csv 文件之间的列并使用 Python 写入差异

    我试图通过比较 2 个 csv 文件之间的列来打印出差异 CSV1 SERVER FQDN IP ADDRESS serverA device1 com 10 10 10 1 serverA device2 com 10 11 11 1 s
  • Angular Service Worker,缓存离线应用程序的 api 调用

    我正在尝试让服务工作者以角度方式处理 API 请求 我希望该应用程序能够离线工作 并且我有以下配置 name api urls https x com cacheConfig strategy performance maxSize 20