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

我可以在不缓存任何资产的情况下拥有PWA吗?

PWA(Progressive Web App)是一种可以提供类似原生应用体验的Web应用程序。它结合了Web应用的优势和原生应用的功能,可以在离线状态下访问、具有推送通知功能,并且可以像原生应用一样在主屏幕上添加快捷方式。

对于PWA而言,缓存是其中的一个重要特性,它可以通过缓存应用的资源文件(如HTML、CSS、JavaScript、图像等)来实现离线访问和快速加载。然而,PWA并不要求必须缓存所有的资产,也可以在不缓存任何资产的情况下拥有PWA。

在不缓存任何资产的情况下,PWA仍然可以通过以下方式提供一些优势和功能:

  1. 渐进增强:PWA可以根据设备和网络条件逐步提供更多功能和优化,即使没有缓存资产,仍然可以通过其他特性提升用户体验。
  2. 响应式设计:PWA可以根据不同设备的屏幕尺寸和分辨率进行自适应布局,确保在各种设备上都能提供良好的用户体验。
  3. 离线使用:虽然没有缓存资产,但PWA仍然可以使用Service Worker技术来缓存一些核心资源,以便在离线状态下提供基本的功能和内容。
  4. 推送通知:PWA可以使用Web Push API向用户发送推送通知,即使没有缓存资产,也可以通过推送通知与用户进行互动。
  5. 安装到主屏幕:PWA可以通过Web App Manifest文件,让用户将应用添加到主屏幕上,方便快捷地访问应用。

总之,尽管PWA的缓存特性对于提供离线访问和快速加载非常重要,但在不缓存任何资产的情况下,PWA仍然可以通过渐进增强、响应式设计、离线使用、推送通知和安装到主屏幕等特性提供一定的优势和功能。

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

相关·内容

“小程序”PWA上开发WebRTC

首先,就WebRTC而言,PWA可通过浏览器在任何地方工作,毕竟它们只是网页,用户无需下载任何东西。 其次,PWA可以大大减少应用程序大小。...服务工作线程只能缓存它所在同一文件夹中或者是子文件夹下资源。为了获得最大缓存能力,建议尽可能地将其放置根目录中。 务必注意,服务工作线程运行时生命周期与网络应用程序其余部分完全分离。...随着未来Chrome更新启发式转变和发展,在你无需执行任何操作情况下,你分数就可能会发生变化。出于这个原因,请确保定期运行此测试。...即便如此,PWA工具箱正于今年缓慢进入桌面领域。它已经可以功能标志后Chrome上进行测试。已经Macbook上运行了几个星期,现在很享受它带来功能优化体验。...该图标来自链接清单。MacOS上,应用程序显示Dock中,并可以使用Spotlight打开-就像其他任何应用程序一样。

1.2K10

渐进式 Web 应用程序介绍

是什么让它如此酷 可以任何具有现代浏览器设备访问它。 可以像普通网站一样访问、共享和添加书签。 它离线工作。 它可以任何其他具有主屏幕快捷方式本机应用程序一样安装。 它可以处理推送通知。...关联 Pinterest 网站很旧,网络性能很差。通过分析,他们意识到提升用户群难度,尤其是未经身份验证网络用户数量庞大情况下。...PWA 构建块 1.响应式:由于 PWA 提供跨设备兼容性,因此它必须在所有设备上响应。 2.Service worker:这是一个脚本文件,可以不影响页面性能情况下在后台异步运行任务。...它可以从客户端访问缓存,并可以存储数据,例如不需要反复获取静态资产,如样式表、html、图像等。这使 PWA 能够离线模式下仅加载必要数据. 因此,它可以减少页面加载延迟,也可以提高整体性能。...简而言之,PWA 两个主要功能(例如一次性安装和缓存)是使用 Service Worker 脚本完成。它还可以用于在用户不使用网站时处理推送通知。

1.2K31

本地储存之 Cookie、webStorage、indexedDB

一直存在 页面关闭就清理 除非被清理,否一直存在 数据储存大小 4k 5M左右 5M左右 理论无限 与服务端通信 请求时会携带在 Http header 中,对于请求性能稍有影响 参与 参与...因为 HTTP 是一种无状态协议,也就是说,客户端请求一次,服务端就响应一次,中间没有留下任何信息。...它可以携带用户信息,当服务器检查 Cookie 时候,便可以获取到客户端状态,也就可以证明是谁了。 Cookie 是以键值对形式存储。...本人用也不是很多,具体用法可以参考:浏览器数据库 IndexedDB 入门教程 #PWA PWA(Progressive web apps,渐进式 Web 应用)运用现代 Web API 以及传统渐进式增强策略来创建跨平台...其实理解,就是浏览器或者其他客户端应用缓存一个webapp,一次使用,就将代码都缓存到本地,再次打开无需重复加载。 是不是觉得很熟悉,这不就是微信小程序

1K30

备受乔布斯推崇 PWA,为什么还没有杀死原生应用?

你不需要任何 SDK!如果你知道如何使用最现代 web 标准来为今天 iPhone 编写令人惊叹应用程序,那么你就拥有了所需一切。 所以,开发者们,我们为你们准备了一个非常甜美的故事。...PWA 身份识别问题 关于这个话题,已经写过很多,但 PWA 仍然被认为是二流 App——或者更糟,某些情况下,甚至根本就不被认为是 App。...个人愿望清单中,希望 PWA 安装后拥有比普通网站更高权限(但不像原生应用那样多)。人们安装你 PWA 说明他们信任它——他们不是偶然才发现你网站。 以下是一些赋予较高权限例子。...用户可以选择“OK”,也可以选择卸载 更好域名管理 如果说 PWA 有什么真正亮点,那就是可以程序化地创建 App。 一个客户是一家为摄影师开发商业化软件公司。...原生特性 应该让 PWA 访问联系人、查看日历、发送 SMS/MMS、设置警报个人认为永远不应该。 PWA 之所以安全,是因为它们作用域受到了限制。

1.4K10

构建离线web应用(一)

将它们分成三类: 离线情况下不做任何操作 例子: Coinbase ? Coinbase 就是一直停留在 loading 这个页面。...Uber是一个很高频 app,这样交互展示对于他们应用场景很有意义。 离线情况下展示缓存数据 例子: Medium ?...优化 想法是,如果 PWA(或者 service workers)技术成熟并且被大规模应用的话,为什么节省掉: 前往应用商店 下载并不常用 app 呢?...一些公司已经 PWA 方面做比较好了,你可以在这个网址上面找到这些公司:pwa.rocks 开发准备 我们已经介绍了足够多理论知识了。这是一个手把手教程,来吧,让我们动起手来。...根据名称点击你所设置cache,然后你就会看到缓存里面的各个项: ? 接下来 你已经了解了必备知识点,PWA 概念对你来说已经陌生了。接下来,我们将要讨论 PWA 缓存策略。

1.6K100

PWA实战:面向下一代Progressive Web APP

当你利用这些强大功能构建网站时,你便已经拥有了所谓 PWA(Progressive Web App)。...使用 Service Worker,可以选择性地缓存部分网站资源以提供离线体验。如果你现在在没有网络连接情况下浏览网站,那么对于绝大多数网站,你所看到屏幕应该类似于图 1.1。 ?...图 1.1 如果你迫切需要获取这些信息,离线页面可能会非常令人沮丧 用户无须再面对恐怖“无网络连接”屏幕了。使用 Service Worker,可以拦截并缓存任何来自网站网络请求。...构建 PWA 可以让你接触比单独使用原生应用更多的人,因为它们是为任何能够运行浏览器平台而构建。...一家小型创业公司工作,知道编写一个可以多个平台 (iOS、Android和网站 ) 上运行应用是多么昂贵。有了 PWA,你只需要一个了解 Web 语言开发团队即可。

79740

PWA 方案相关技术分享

前言: 上周做了一个预约健身卡项目,领导指引下使用了 LAVAS 框架,这个框架主要特点就是可以直接生成一套成熟支持 PWA 网站。...开发过程中,发现 PWA 方案主要核心技术在于 Service Worker,下面将从 PWA 方案简介、PWA 方案相关技术等2个方向简单介绍一下对于本次开发收获。...介绍完这些技术后,将在最后篇幅里介绍一个简单 PWA 方案详细实现。 什么是 PWA?...简单 PWA 方案 通过以上介绍,我们就可以来实现一个简单支持 PWA 网站啦!下面将把实现代码一一罗列出来。...可以使用支持 PWA 手机进行预览,根据提示增加到桌面。 通过以上短短不到100行代码,就可以简单实现网站对于 PWA 支持。大家通过阅读可以自己尝试去写一写,实际环境中进行更深入理解。

73520

为 vue 项目添加 PWA 支持

安装 PWA 插件 如果你已经使用@vue/cli,那么可以直接在可视化界面中安装 PWA 插件 否则,可以通过vue add @vue/pwa命令来安装 该插件会使用谷歌 PWA 框架 Workbox...PWA 应用,以下列举目前所知道添加方式 Chrome 专有方式 对于 PC 或 Android Chrome 浏览器都可以实现点击一个按钮来添加 PWA 应用,其原理是拦截了beforeinstallprompt...session,因此依然是旧 SW 接管页面,新 SW 仍旧是 waiting 状态 想要实现在结束 session 情况下更新 SW,必须使用 skipWaiting,目前有两种常见处理方法...,因此如果你更新了 SW 处理 runtimeCaching 之类运行时操作行为而用户又没有刷新页面,就有可能会出现问题 即除非你能保证同一个页面两个版本 SW 相继处理情况下依然能够正常工作...,只描述大致思路和做法,因为没有实际完整地实践过,因为比较复杂麻烦(好下面就开始云了) 我们需要在workboxOptions中将skipWaiting设置为false,或者设置,因为默认值为

3.5K00

手把手教你使用Next.js实现一个PWA应用

那么为什么有越来越多网站支持了这个特性呢?1、想主要是因为,PWA可以通过Service Workers,没有网络情况下运行,提高用户体验。...2、另外可以很方便添加到主屏幕,类似于你装了一个App一样,这样等同于霸占了用户屏幕,不需要用户去记住你域名了,点击一下图标,而且前面也提到了,即便在网络不佳情况下,都可以秒速加载,因为那些html...Service Workers: Service Workers是一种浏览器后台运行脚本,即使在用户关闭网页之后也能运行。它们主要用于拦截和处理网络请求,包括可编程缓存文件。...PWA 应用一个大致交互流程,可以使用下图来配合理解:使用Next.js实现一个PWA应用为什么又是Next.js,你可能会问你能不能来点别的,想说是,Next.js作为一个前后端通杀框架,的确非常适合作为本文教学...而且如果你 web 服务如果完全就是工具性,无需联网的话,那就更 nice 了,简直就和 App 体验无太大差异。进一步了解,PWA 可以发布到 Google 商店,你知道如何操作

78431

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

另一方面,原生应用与操作系统可以更加完美的整合,也因此为用户提供了无缝用户体验。...你可以通过安装应用使得它在离线状态下也可以运行,并且相较于使用浏览器访问,用户也更喜欢通过点击主页上图标来访问它们喜爱应用。 PWA赋予了我们创建同时拥有以上两种优势应用能力。...我们可以用它来完成一些功能,比如对所有的fetch/xhr请求进行过滤,哪些请求走缓存,哪些缓存;比如在后台偷偷给你拉一些数据缓存起来。 // Caution!...如果是PWA程序,浏览器地址栏有个+号一样图标,点击可以把程序安装到本地。 ? 安装完了会在桌面生成一个图标,打开会是一个没有浏览器地址栏界面。 ?...个人觉得PWA最大魅力就是可以离线运行,没有网络情况下依然可以运行,这样才像一个原生编写程序。

1.2K20

PWA渐进式增强WEB应用

service work就像一个客户端代理,它控制缓存以及如何响应资源请求逻辑,通过预缓存关键资源,可以消除对网络依赖,确保为用户提供即时可靠体验。 ? 2....PWA现在还没那么火,国内一些手机生产上Android系统上做了手脚,似乎屏蔽了PWA, 但是相信当PWA火起来以后,这个问题就不会是问题 Web应用程序中,可以通过manifest.json控制应用程序显示方式和启动方式...尽可能使用较少数据 3. 使用本机缓存静态资产 4. 将内容与导航分离开来 5. 检索和显示特定页面的内容(HTML、JSON 等) 6....缓存动态内容 App Shell 可保证 UI 本地化以及从 API 动态加载内容,但同时不影响网络可链接性和可检测性。 用户下次访问您应用时,应用会自动显示最新版本。无需使用前下载新版本。...某些情况下PWA 比 Android 同类产品速度更快、功能更强大。并且,PWA 所占用储存空间和运行内存都较少。

1.2K20

渐进式Web应用程序深入概述

这是一个冗长描述,如果用一句话简要概括:认为PWA只是一个具有良好用户体验Web应用程序,仅此而已。 为了更清晰地理解这个定义,让我们来一探其核心原则。...首次加载应用程序时,应缓存应用程序shell文件,以便应用程序可以没有网络连接情况下工作。 一个好PWA将避免显示此屏幕出现: 当页面未加载时,用户将完全脱离应用程序。...之前,提到服务请求浏览器中不同线程上运行。这意味着它具有管理生命周期能力,就像您应用程序一样。...如果请求信息已被缓存,则服务器可以返回该信息并完全绕过网络。 或者它仍然可以发送请求,将响应与缓存信息进行对比,并在必要时进行更新。最后,选择最适合用户策略。...它为您应用程序提供网络代理和存储管理服务,是改善Web应用程序用户体验绝佳工具。 构建渐进式Web应用程序 尝试构建PWA。如果您已经拥有Web应用程序,那么很容易上手。

99520

穿上App外衣,保持Web灵魂——PWA温故

,用于终端弱网或无王情况下同步后台数据或继续前端请求消息 由于service worker浏览器关闭后仍然运行着,所以即使用户没有网络或关闭客户端,service worker仍会存储相应请求...PWA 应用特性与功能特点 Google 给出 PWA 应用特性如下: 可靠:即使互联网连接不佳或没有互联网情况下,也可以快速加载。...PWA 应用主要功能特点如下: 渐进增强:尽可能多环境中运行,可以使用任何可用服务,并在没有服务情况下优雅地降级。...如果应用功能、性能和用户体验要求较高,可以考虑原生应用;如果希望对开发和维护成本进一步降低,但又拥有app一些特征,可以考虑使用PWA。...小程序可以通过超级App作为流量入口,也可以运行在企业自有App中,任何企业App只需要通过集成小程序运行时SDK,即可获得小程序运行能力,让小程序拥有了更多分发渠道。

32920

饿了么 PWA 升级实践

根据 Google 推出 Web 性能分析工具 Lighthouse(v1.6),模拟 3G 网络下,用户初次访问(无任何缓存)大约在 2 秒左右达到“可交互”,可以说非常不错。...做了一个简化“最小多页 PWA”(Minimal Multi-page PWA,或 MMPWA)来测试这个问题,:我们一个 async(且确实阻塞 HTML 解析)脚本中,生成并渲染 1000...下面是通过 USB Debugging Nexus 5 真机上录制 profile: 是的,出乎意料?首次渲染确实被阻塞到脚本执行结束后才发生。...而这种情况更容易拥有较慢 CPU/GPU 移动设备上出现。 黑魔法:利用 setTimeout()让绘制提前 不难发现,骨架屏绘制与脚本执行实际是一个竞态。...因此,任何 web 应用都可以从中获益,这与你是多页还是单页、面向桌面还是移动端、是用 React 还是 Vue 无关。或许,它还终将改变用户对移动 web 期待。

1.6K40

挑战微信、试探苹果?支付宝小程序可添加到 iOS 手机桌面 | 微观

例如加载免等待、桌面直达图标、离线访问等等,这类通常只有 app 上可以使用优势,利用 PWA 网页也可以用到。...但 PWA 网页本质上依然是一种「网页」,既然是「网页」,那么原有的网页特性也可以很好地保留下来,例如对搜索引擎友好(搜索引擎可以抓取网站内容)、通用性强(任何支持 PWA 浏览器都可以访问)、开发成本低...对于用户而言,使用皆可放到桌面直达支付宝小程序和 PWA 网页,本质上没有任何差别,使用任意一种形态,都可以直达相应服务。 悬念只有一个:为什么微信不做?...知晓程序认为,如果苹果对微信开放,微信没有理由抓住机会。要知道,安卓端,微信不仅早就提供了小程序添加桌面的功能,甚至微信「游戏」中心都已经可以绕过应用商店,直接下载手游 App。...轻型应用成为趋势情况下,苹果或许仍然希望支持支付宝等小程序,构成对抗性,从而占据规则主导者位置。 目前来看,微信与苹果博弈还在继续。

63420

Progressive Web Apps

,类native 所以,表面上看,PWA亮点分2部分: (离线)缓存-代理机制 全屏,主屏图标和系统通知等类native特性 缓存机制Web App/SPA里一点不新鲜,抽离出数据层之后,缓存顺手就做了...,支持PWA浏览器生效(不支持环境最坏结果也就是多请求一个JSON文件): <link rel="manifest" href="....Install Banners 这样理想<em>情况下</em>我们就<em>拥有</em>了主屏图标,支持Web App Manifest<em>的</em>环境会选用最合适<em>的</em>(最接近48dp<em>的</em>)图标 注意:index.html里<em>的</em>内容应该是首屏渲染需要<em>的</em>最小化内容...service worker无法立刻恢复激活态,导致<em>不</em>走<em>缓存</em>。...HTTPS,发布内容没有<em>任何</em>限制<em>可以</em>随便折腾,以后<em>的</em>博客Demo都会逐步迁移过去(之前一直放在自己<em>的</em>FTP,那可真蠢..) ?

1.1K40

PWA介绍及快速上手搭建一个PWA应用

PWA初次体验 前言:本示例不用安装任何东西 部分资源来自网络资源及PWA官网,不要把PWA想象太复杂,跟着示例走一下,你行。...Engaging : PWA 可以添加在用户主屏幕上,不用从应用商店进行下载,他们通过网络应用程序 Manifest file 提供类似于 APP 使用体验( Android 上可以设置全屏显示哦...这个是离线缓存文件。我们 PWA 技术使用就是它!...和ngrok去调试,在这里为了照顾新手是直接引用sw 处理静态缓存,首先定义需要缓存路径,以及需要缓存静态文件列表。...] 通过存放到 Cache Storage 中,我们下次访问时候如果是弱网或者断网情况下,就可以走网络请求,而直接就能将本地缓存内容展示给用户,优化用户弱网及断网体验。

2.1K130

不只是离线缓存! - 论如何善用ServiceWorker

lost their ICP license 由此可见,过去几年里,当人们发现JSD对个人面向国内加速拥有者无与伦比效果时,各种滥用方式层出穷:图床曾一阵流行,国内搜索引擎JSdelivr十有八九都是作为图床...是的,这种情况下使用SW最为巧妙不过,它可以在后台自动优选最佳CDN,甚至可以用黑中黑Promise.any打出一套漂亮并行拳。...实际上,SW确实是PWA核心与灵魂,但SWPWA中起主要作用是缓存文件,提供给离线访问。并没有完整地发挥出SW巧妙用法。...SW可以完全脱离PWA存在,当然,PWA可离不开SW :) And WorkBox ? WorkBox是谷歌开发一款基于SW缓存控制器,其主要目的是方便维护PWA。...此时如果fetch失败将直接报错,写入缓存。 在下一次获取同一个URL时候,缓存匹配到将不再是空白值,此时fetch执行,直接返回缓存,大大提升了速度。

3.2K21

天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践

诚然,从零开始研发PWA应用会有一定成本,但如果我们本身就拥有基于Web站点,那么就可以通过增加对应配置文件和服务进行升级操作,直接拥有PWA应用。    ...如此,本地也可以PWA进行测试了,当然了,如果不需要本地操作,也可以跳过这步。     ...它充当了Web应用程序与浏览器之间代理服务器,进行资源文件级别下缓存与操控,拦截页面请求,实现在不同情况下对不同请求响应策略。    ...指定了一些页面和文件进行缓存,我们希望用户无网络情况下只能访问到我们指定缓存页面。     ...这样,我们可以对资源配置进行优化,不过多占用用户本地资源去缓存所有页面,因为PWA缓冲本身是存储到客户端,对于非所有用户常用页面,按需缓存: self.addEventListener('fetch

68320
领券