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

Rails中的CacheStorage PWA始终为空。在service-worker.js中,cache.addAll似乎没有缓存任何东西

在Rails中,CacheStorage是一个用于缓存数据的API。PWA(Progressive Web App)是一种使用现代Web技术构建的应用程序,可以像原生应用程序一样提供离线访问和其他高级功能。

当在service-worker.js中使用cache.addAll方法时,它应该将指定的资源添加到缓存中。然而,如果在Rails中使用CacheStorage时PWA始终为空,可能有以下几个原因:

  1. 资源路径错误:确保在cache.addAll方法中指定的资源路径是正确的。资源路径应该是相对于service-worker.js文件的路径。
  2. 缓存策略配置错误:在Rails中,可以使用缓存策略来控制哪些资源应该被缓存以及如何处理缓存。检查Rails的缓存策略配置,确保正确地配置了需要缓存的资源。
  3. 缓存版本问题:如果之前已经缓存了某个版本的资源,而现在又更新了这些资源,可能会导致缓存为空。在service-worker.js中,可以通过更改缓存版本号来强制更新缓存。
  4. 缓存操作错误:在cache.addAll方法之前,可以尝试使用console.log输出一些信息,以确保代码正常执行。另外,还可以尝试使用cache.put方法手动将资源添加到缓存中,以验证是否存在其他问题。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络)可以帮助加速静态资源的分发,提高PWA的加载速度和性能。您可以通过以下链接了解更多信息:https://cloud.tencent.com/product/cdn

请注意,以上答案仅供参考,具体解决方法可能需要根据实际情况进行调试和调整。

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

相关·内容

渐进式Web应用入门-ServiceWorker

即使比较糟糕网络环境下,也能够快速地加载,且能够推送相关消息, 也可以像原生应用那样添加至桌面或浏览器主屏,能够有全屏浏览体验。 PWA 和 Service Worker 是什么关系?...activate,判断当前页面是否在上文声明 filesToCache 列表,如果是则接管网页显示。...这个 service-worker.js 文件必须放在跟目录,因为 service workers 作用范围是根据其目录结构位置决定。...有个注意事项要知道 cache.addAll() 方法,如果某个文件下载失败了,那么整个缓存就会失败,service worker install事件也将会失败。...所以建议大家 cacheName 末尾加一个版本号,这样可以始终让service worker 加载最新缓存。 至此,就为我们博客完整接入了 service worker。

64330

PWA 方案相关技术分享

开发过程,发现 PWA 方案主要核心技术在于 Service Worker,我下面将从 PWA 方案简介、PWA 方案相关技术等2个方向简单介绍一下我对于本次开发收获。...介绍完这些技术后,我将在最后篇幅里介绍一个简单 PWA 方案详细实现。 什么是 PWA?...caches.match() 用于检查 CacheStorage 是否存在以 Request key Cache 对象。...; 网页抓取资源过程, Service Worker 可以捕获到 fetch 事件, 编写代码如何响应资源请求; 最后一步是更新静态资源功能。...参考文献: 服务工作线程:简介 Web 技术文档 Web API 接口 ServiceWorker 借助Service Worker和cacheStorage缓存及离线开发 网站渐进式增强体验(PWA)

72620

ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)

多年以前Firefox OS生态系统离线运行和安装web应用已经成为了可能。 PWAs, 不但如此,更是提供了所有的甚至是更多特性,来让web更加优秀。...引用自MDN 说人话就是PWA可以让你web程序跟一般应用一样运行,有桌面图标,能离线,没有浏览器地址栏,一切看起来想个普通程序/APP。...如果是PWA程序,浏览器地址栏有个+号一样图标,点击可以把程序安装到本地。 ? 安装完了会在桌面生成一个图标,打开会是一个没有浏览器地址栏界面。 ?...这样一个PWA程序已经可以运行了。 离线运行 如果只是这样,仅仅是没有浏览器地址栏,那PWA也太没什么吸引力了。...个人觉得PWA最大魅力就是可以离线运行,没有网络情况下依然可以运行,这样才像一个原生编写程序。

1.2K20

Progressive Web Apps

,类native 所以,表面上看,PWA亮点分2部分: (离线)缓存-代理机制 全屏,主屏图标和系统通知等类native特性 缓存机制Web App/SPA里一点不新鲜,抽离出数据层之后,缓存顺手就做了...native特性,算是渐进增强增强,支持用户环境是可用(一些浏览器提供了支持,但更广泛WebView环境不久将来可能还是不行)。...,支持PWA浏览器生效(不支持环境最坏结果也就是多请求一个JSON文件): <link rel="manifest" href="....只要有一个失败就不接着做下一个了 return <em>cache.addAll</em>(filesToCache); }) ); }); 当然,还需要对<em>缓存</em>做基本<em>的</em>版本控制: // <em>service-worker.js</em>...weather-<em>pwa</em> 不太乐观<em>的</em>消息:事实上,故意精心准备了用户环境(官方正版Chrome + 官方Demo),<em>在</em>小米4上<em>没有</em>自动弹出安装banner(可能是操作姿势等条件不满足,见上文),手动点击“

1.1K40

PWA 系列(一)——Cache API

本系列文章将逐一介绍所使用到这些技术 ☀️ PWA 应用,Cache 缓存 API 是关键技术之一,主要作用就是缓存相应和请求。...只有在在线情况下做好缓存,才能够离线情况下直接调用缓存而不必重新联网获取数据。虽然 Cache 是被定义 SW 标准,但并非一定要与 SW 配合使用。 ?...使用 Cache 缓存第一个步骤就是使用 CacheStorage.open(cacheName) 方法打开一个 Cache 对象,然后再是对具体缓存内容执行 match, add, put, delete...添加到cache. cache.addall(requests) 抓取一个URL数组,检索并把返回response对象添加到给定Cache对象。...最后我们再看看 Application Cache Storage,中间就有这么一条缓存数据了: ?

72740

web渐进式应用PWA

程序清单文件名不限,本文示例代码 manifest.json: // manifest.json { "dir": "ltr", "lang": "en", "name": "D.D...文件同源,同一个域下 manifest 中使用相对路径,相对参照物 manifest 文件 CACHE MANIFEST 字符串应在第一行,且必不可少 系统会自动缓存引用清单文件 HTML...文件 manifest 文件 CACHE 则与 NETWORK,FALLBACK 位置顺序没有关系,如果是隐式声明需要在最前面 FALLBACK 资源必须和 manifest 文件同源 当一个资源被缓存后...站点中其他页面即使没有设置 manifest 属性,请求资源如果在缓存也从缓存访问 当 manifest 文件发生改变时,资源请求本身也会触发更新 3.创建一个 Service Worker Service...cache.addAll(installFilesDesirable); // 缓存主要文件 return cache.addAll(installFilesEssential

1.2K10

构建离线web应用(一)

PWA service worker,可以类比成春天播种农民。...Mobile 还是 PWA 如果你能利用 service workers 存储离线使用所需文件,那你就没有必要开发移动 app 了。...一些公司已经 PWA 方面做比较好了,你可以在这个网址上面找到这些公司:pwa.rocks 开发准备 我们已经介绍了足够多理论知识了。这是一个手把手教程,来吧,让我们动起手来。...Service Worker 周期 开始构建 PWA 之前,你需要理解 Service Worker 生命周期: Install 这一阶段主要是让 worker 浏览器给定作用域挂载。...根据名称点击你所设置cache,然后你就会看到缓存里面的各个项: ? 接下来 你已经了解了必备知识点,PWA 概念对你来说已经不陌生了。接下来,我们将要讨论 PWA 缓存策略。

1.6K100

渐进式Web应用(PWA)入门教程(下)

上篇文章我们对渐进式Web应用(PWA)做了一些基本介绍。 渐进式Web应用(PWA)入门教程(上) 在这一节,我们将介绍PWA原理是什么,它是如何开始工作。...程序清单文件名不限,本文示例代码manifest.json: { "name" : "PWA Website", "short_name" :...为了避免这种情况,访问/js/offlinepage.js时候我们添加了一段代码来检查当前是否离线环境: /js/offlinepage.js 以版本号为名称保存了最近缓存,获取所有URL,...Manifest,display: minimal-ui 或者 display: browser对于大多数情况来说足够用了。 缓存过大 你不能将您网站所有内容缓存下来。...不要缓存任何图片,视频和大文件 定时清理旧缓存 提供一个“离线阅读”按钮,这样用户就可以选择需要缓存哪些内容了。 缓存刷新 示例代码发起请求之前会先查询缓存

76400

Service Workers - JavaScript API 简介

示例 service-worker.js /sw 路径下,这使得该 Service Worker 默认只会收到 /sw 路径下 fetch事件。...预缓存缓存是一个术语,描述了 Service Worker 处于激活状态之前下载和缓存文件。 它是 Service Worker 生命周期“install ”步骤完成。...一旦 Service Worker 处于激活状态,它将准备缓存文件提供服务。 通常,我们要缓存 Application Shell,这是运行网站所需最少代码量。...这里实现了一个缓存优先、降级处理策略逻辑:监控所有 http 请求,当请求资源已经缓存里了,直接返回缓存内容;否则使用 fetch API 继续请求,如果是 图片或 css、js 资源,请求成功后将他们加入缓存...定期后台同步 定期后台同步解决与正常后台同步不同问题。 该API可用于在后台更新数据,而不必等待用户。 这对很多应用程序都很有用。有了这项技术,用户可以没有互联网连接情况下阅读最新新闻文章。

91920

Service Worker初体验

将来,基于它可以实现消息推送,静静更新以及地理围栏等服务,但是目前它首先要具备功能是拦截和处理网络请求功能,包括可编程消息缓存管理能力,是PWA核心。...注册一个service worker之后,浏览器会在后台默默启动一个service worker安装过程。安装过程,浏览器会加载并缓存一些静态资源。...service worker出现之前,前端确实不会自己给自己发消息,但是有了service worker,就可以拦截请求之后根据需要发回自己响应,对页面而言,这个普通请求结果并没有区别,这是Response...因为我们是要缓存离线文件,所以可以install事件开始缓存。...var cacheFiles= [ 'about.js', 'blog.js' 首先定义了需要缓存文件数组cacheFile,然后install事件缓存这些文件。

1.1K100

PWA 实践应用(Google Workbox)

当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用资源(HTML、CSS、JS、图像等)如何从网络或缓存请求,甚至允许离线时返回缓存内容。...(用于新 HTML 页面),当它状态码 200 时,该策略将缓存页面存储一个名为 pages 缓存。...使用 Stale While Revalidate strategy 缓存 CSS、JavaScript 和 Web Worker,将缓存资源存储一个名为 assets 缓存。...采用缓存优先策略来缓存图像,将缓存图像存储名为 images 缓存,30 天过期,并且一次只允许 50 个。...离线回退 让 Web 应用在离线工作时感觉更健壮常见模式是提供一个后退页面,而不是显示浏览器默认错误页面。通过 Workbox 路由和预缓存,你可以几行代码设置这个模式。

1.4K40

Web前端性能优化(三)

Worker 线程,该线程工作是把一些资源缓存起来,然后拦截页面的请求,先看下缓存库里有没有,如果有的话就从缓存里取,响应 200,反之没有的话就走正常请求Service Worker 可以帮助我们做一些大规模逻辑运算...来设置资源能够被缓存最大时间, 例如,max-age=60 表示在请求发起接下来 60 秒可被缓存和重用响应,尽管我们客户端可以设置足够长缓存过期时间,但在代理服务器我们会使用不同缓存策略,...Cache-Control 其他取值:public 所有内容都将被缓存(客户端和代理服务器都可缓存)private 内容只缓存到私有缓存(仅客户端可以缓存,代理服务器不可缓存)no-cache 必须先与服务器确认返回响应是否被更改...)是否过期过程,称为 HTTP 文档过期验证机制,若是文档没有过期,则浏览器会直接使用缓存文档作为返回结果,若是文档已经过期了,则需要进行服务器再验证Expires 一个缺点就是返回到期时间是服务器端时间...同时也减轻了服务器负担Etag 是服务器端响应请求时用来说明资源服务器端唯一标识,与之对应是 If-None-Match 字段,服务器再验证过程,浏览器发送 HTTP 请求请求头中会带上

65430

PWA技术及其用户体验设计

两种方式各有利弊,而PWA使用方法是“app shell”,它混合了SSR和CSR方式。 App shell,可以理解程序外壳。...这样,下次有人从设备访问应用程序时,UI立即从缓存加载,并从服务器请求新内容(如果它已在缓存不可用)。 一个App shell代码结构如下: <!...- Service Worker Service Worker API可以完成2种任务,一种是缓存App shell所需数据,另一种是如果你有比较耗时计算,你可以把它们从主线程抽离出来,Service...Worker中进行计算,最后它们计算完毕时候从Service Worker取得计算结果。...addAll 方法添加 缓存 return cache.addAll(contentToCache); }) ); }); //如果条件允许,service

83820

项目中使用Service Worker 与 PWA

然后, Service Worker ,我们通过监听 install 事件来缓存这些资源,并在 fetch 事件拦截网络请求,从缓存返回资源。这样,即使离线时,页面仍能够加载所需资源。...缓存优先策略工作流程:首先,它会监听浏览器 fetch 事件,拦截原始请求。接着,它会检查缓存是否存在即将请求资源,如果存在,则直接返回缓存资源。...类原生应用 由于是 App Shell 模型基础上开发,PWA 具有与原生应用相似的用户交互体验,用户提供了更高满意度。...持续更新 PWA 始终保持最新状态,无需用户手动更新,这消除了版本管理烦恼。 安全性 通过 HTTPS 协议提供服务,保护用户数据不被窥探,并确保内容不被篡改。...没有统一审查标准 与应用商店不同,PWA 没有统一审查标准,这可能导致一些质量参差不齐应用进入市场。 核心技术 3.

28310

原有的 NextJS 构建 PWA

花了一上午时间,总算是把 pwa 整上了。先来说说什么是 pwa。 渐进式 Web 应用会在桌面和移动设备上提供可安装、仿应用体验,可直接通过 Web 进行构建和交付。...它们是快速、可靠 Web 应用。最重要是,它们是适用于任何浏览器 Web 应用。如果你构建一个 Web 应用,其实已经开始构建渐进式 Web 应用了。...简单来说,支持 pwa 网站再移动端或者桌面端都可以模拟成设备一个 app,存在于主屏幕上。 开始之前 每个 pwa 应用都需要一个 manifest.json, 可能看成是一个配置文件。...public 目录,如果不存在可以新建一个目录。...我出现了如下问题: 504 错误,查看 nginx 缓存时间,建议关闭缓存,因为 workservice 自带缓存

83920

Web性能优化之Worker线程(下)

这可以让网页没有网络连接」情况下正常使用,因为部分或全部页面可以从服务工作线程缓存中提供服务。...对象 ❝ServiceWorkerContainer 接口是浏览器对服务工作线程生态「顶部封装」 ❞ ServiceWorkerContainer 「始终」可以「客户端上下文」访问: console.log...console.log(caches); // CacheStorage {} CacheStorage 每个缓存可以通过给 caches.open()传入相应「字符串键」取得。...设置字符串时,只会匹配 Cache 键指定字符串缓存值 ignoreSearch: 1. 设置 true 时,匹配 URL 时「忽略查询字符串」,包括请求查询和缓存键。 2....如果没有「活动」服务工作线程,则新安装服务工作者线程会跳 到这个状态,并直接进入激活状态,因为没有必要再等了。

2.4K20

pwa-之service worker 基本概念

pwa-之service worker 基本概念 pwa-之service worker 离线文件处理 学习service worker 基本概念 本章,将涵盖以下内容 service worker准备工作...这个注册过程是发生在service worker之外。一般会在index.html。你可以写在js文件里面,html文件引入,但不能在service workerjs中注册。...其他 当一个service worker被成功注册,它会经历以下状态 Install service worker生命周期中,如果service worker已经注册没有错误,但是尚未激活。...我们需要一个单独Tab来调试service worker线程。 service worker,它大部分工作是监听事件来完成,比如在install事件完成资源缓存。...或者chrome输入:chrome://serviceworker-internals/ 如果列表里面没有的话,说明没有service worker正在运行 ?

97831

PWA 入门

PWA 没有出实现时,可以通过右键“另存为”添加到桌面,但添加到桌面是一个 HTML 文件,当你点击访问时会跳转到浏览器加载。频繁访问某个站点时,我们一般会把它收藏起来。...PWA 还支持离线缓存,当用户没有网络时也能利用缓存展示页面信息。 PWA 是由许多新技术组合而成。...ignoreSearch,布尔类型,表示是否忽略 url query 部分,默认是 false; ignoreMethod 布尔类型,设置 true 表示匹配时不会验证 Request 对象...activate 事件 cache API 都是 caches ,它构造函数是 CacheStorage,而 install caches.open 返回 cache 实例构造函数是...如果缓存没有,才向服务器发请求。 当然,也可以使用其他策略,比如在有网时就主动请求服务器数据,如果断网了,则使用缓存数据。

1.4K20

Service Worker实现离线应用PWA简单介绍

离线应用相关接口 CacheStorage 浏览器上引用名叫 caches,CacheStorage 是多个 Cache 集合,而每个 Cache 可以存储多个 Response 对象。...虽然它是被定义 ServiceWorker 规范,但可以在其他worker和window中使用。 caches上调用 open 方法就可以异步地得到一个Cache对象引用。...添加到cache....如果找到,则删除该Cache条目,并且返回一个resolvetruePromise对象;如果未找到,则返回一个resolvefalsePromise对象。...代码 以下是一个实现离线应用demo – ServiceWorkerDemo 这个demo是一个简陋离线应用,会缓存所有静态资源请求,即使你修改了index.js和index.css文件,刷新页面还是没有变化

78720
领券