PWA应用

article/2025/9/21 8:38:08

一、什么是PWA应用

一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。
官网：https://developers.google.com/web/progressive-web-apps/
是 Google 在 2015 年提出，2016年6月才推广的项目。是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验。官网上给出 PWA 的宣传是 ： Reliable （ 可靠的 ）、Fast（ 快速的 ）、Engaging（ 可参与的 ）
Reliable ：当用户从手机主屏幕启动时，不用考虑网络的状态是如何，都可以立刻加载出 PWA。
Fast：这一点应该都很熟悉了吧，站在用户的角度来考虑，如果一个网页加载速度有点长的话，那么我们会放弃浏览该网站，所以 PWA 在这一点上做的很好，他的加载速度是很快的。
Engaging ： PWA 可以添加在用户的主屏幕上，不用从应用商店进行下载，他们通过网络应用程序 Manifest file 提供类似于 APP 的使用体验（ 在 Android 上可以设置全屏显示哦，由于 Safari 支持度的问题，所以在 IOS 上并不可以 ），并且还能进行 ”推送通知”

二、PWA应用于原生APP对比优缺点

  1. 理论上看，只要 Service Worker 能获得的系统 API，PWA 应用都可以实现原生应用的所有功能
  2. PWA 首次加载依然是个大问题吧。如果首次需要缓存的内容越来越大，假如超过 10M 以上，这还叫 PWA 吗？
  3. 不考虑首次加载的情况，PWA 应用的性能和原生应用的差距，就是 js 和原生开发语言的差别了吗？3.不考虑首次加载的情况，PWA 应用的性能和原生应用的差距，就是 js 和原生开发语言的差别了吗？
  4. PWA 通过 Service Worker 目前看好像是不需要用户同意的吧？4.PWA 通过 Service Worker 目前看好像是不需要用户同意的吧？
  5. 假如以上 1/2/3 点都不是问题，PWA 解决了原生应用分发渠道的限制了，大量 native 开发者又要转 web 去了吗？
    三、PWA应用
    PWA关键技术
    Service Worker （可以理解为服务工厂）
    Manifest （应用清单）
    Push Notification（推送通知）
    Service Worker
    以下用SW来表示
    SW 是什么呢？这个是离线缓存文件。我们 PWA 技术使用的就是它！SW 是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门，因为使用了它，才会有的那个 Reliable 特性吧，SW 作用于 浏览器于服务器之间，相当于一个代理服务器。
    **顺便带一句：**目前只能在 HTTPS 环境下才能使用SW，因为SW 的权利比较大，能够直接截取和返回用户的请求，所以要考虑一下安全性问题。
    功能(还是比较逆天的)
    后台数据的同步从其他域获取资源请求接受计算密集型数据的更新，多页面共享该数据客户端编译与依赖管理后端服务的hook机制根据URL模式，自定义模板性能优化消息推送定时默认更新地理围栏

四、PWA实例
准备

我们先创建一个关于 PWA 的项目文件夹，
进入文件夹下我们准备一张 120x120的图片一张，作为我们的应用程序图标。
创建一个 index.html 文件
创建一个 main.css 文件
创建一个 manifest.json 文件
创建一个 sw.js 文件

在这里插入图片描述
index.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello PWA</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="main.css"><link rel="manifest" href="manifest.json">
</head>
<body><h3>Hello PWA</h3>
</body>
<script>// 检测浏览器是否支持SWif(navigator.serviceWorker != null){navigator.serviceWorker.register('sw.js').then(function(registartion){console.log('支持sw:',registartion.scope)})}
</script>
</html>

main.css：

#utf-8
h3{color: #f00;
}

manifest.json：

short_name: “ " 用户主屏幕上的应用名字
display : “standalone" 设置启动样式，让您的网络应用隐藏浏览器的 URL 地址栏
start_url : “/“ 设置启动网址，如果不提供的话，默认是使用当前页面
theme_color : “ “ 用来告知浏览器用什么颜色来为地址栏等 UI 元素着色
background_color: “ ” 设置启动页面的背景颜色
icons：”” 就是添加到主屏幕之后的图标

{"name": "一个PWA示例","short_name": "PWA示例","start_url": "/index.html","display": "standalone","background_color": "#fff","theme_color": "#3eaf7c","icons": [{"src": "/youhun.jpg","sizes": "120x120","type": "image/png"}],
}

sw.js：
看网上很多人都安装的hs和ngrok去调试，在这里为了照顾新手我是直接引用的sw
处理静态缓存，首先定义需要缓存的路径，以及需要缓存的静态文件的列表。
借助 SW 注册完成安装 SW 时，抓取资源写入缓存中。使用了一个方法那就是 self.skipWaiting( ) ，为了在页面更新的过程当中，新的 SW 脚本能够立刻激活和生效。

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");
var cacheStorageKey = 'minimal-pwa-1'
var cacheList=['/','index.html','main.css','youhun.jpg'
]
self.addEventListener('install',e =>{e.waitUntil(caches.open(cacheStorageKey).then(cache => cache.addAll(cacheList)).then(() => self.skipWaiting()))
})

处理动态缓存，我们监听 fetch 事件，在 caches 中去 match 事件的 request ，如果 response 不为空的话就返回 response ，最后返回 fetch 请求，在 fetch 事件中我们可以手动生成 response 返回给页面。
更新静态资源，缓存的资源会跟随着版本的更新会过期的，所以会根据缓存的字符串名称清除旧缓存。在新安装的 SW 中通过调用 self.clients.claim( ) 取得页面的控制权，这样之后打开页面都会使用版本更新的缓存。旧的 SW 脚本不在控制着页面之后会被停止，也就是会进入 Redundant 期。

self.addEventListener('fetch',function(e){e.respondWith(caches.match(e.request).then(function(response){if(response != null){return response}return fetch(e.request.url)}))
})
self.addEventListener('activate',function(e){e.waitUntil(//获取所有cache名称caches.keys().then(cacheNames => {return Promise.all(// 获取所有不同于当前版本名称cache下的内容cacheNames.filter(cacheNames => {return cacheNames !== cacheStorageKey}).map(cacheNames => {return caches.delete(cacheNames)}))}).then(() => {return self.clients.claim()}))
})

部署
我们可以把当前pwa目录的所有内容都扔进服务器中，或者coding Pages和gitHub Pages也是可以的，当然，记得开启https。在上边介绍过SW的权利比较大，为了安全性，我们使用https协议来访问。
试着访问一下，我们这里用的coding Pages并且绑定了自己的域名
打开 chrom 的调试工具，打开 application ，点击 service workers 之后我们会发现 sw.js 脚本已经存到了 SW 中 。
在这里插入图片描述
我们打开 Network 刷新页面一下，看看，我们的页面资源来自 SW 而不是其他的地方，在 Console 中也打印出了我们在 index.html 中判断的语句，浏览器支持就会打印出这一句话。

在这里插入图片描述接下来我们断网操作，在 Application 中给 Offline 打上对勾就行啦。然后刷新页面，我们仍然能看到之前的页面，原因就是我们在上图看到，他的资源是从 SW 上获得到的。当我们第一次打开这个页面的时候，Resopnse 对象被存到了 Cache Storage （ 定义在 SW 规范中 ，相关资料请同学们自行查询啦 ）中，我们看下图：
在这里插入图片描述
通过存放到 Cache Storage 中，我们下次访问的时候如果是弱网或者断网的情况下，就可以不走网络请求，而直接就能将本地缓存的内容展示给用户，优化用户的弱网及断网体验。
这个时候肯定会有同学在想，如果内容更新了，那么页面展示的内容是新内容呢还是旧内容呢？下面我们操作一下，打开 index.html 文件，我们在 body 中添加一个 p 标签 ，然后回到页面刷新。
在这里插入图片描述
在这里插入图片描述
我们看到，页面上的内容并没有显示出我刚刚添加的那个 p 标签。这说明了，我们拿到的数据还是从 Cache Storage 中获取到的，Cache Storage中的内容并没有更新，强制刷新也不行哦，那么我们怎么才能让我刚刚添加的那个 p 标签显示出来呢。
我们打开 sw.js 脚本文件，我们修改一下 cacheStorageKey。
在这里插入图片描述
修改后，我们再次打开该网址，强制刷新下或者关掉浏览器重新打开。
页面中出现了刚刚添加的P标签，我们再看一下 Cache Storage 中的缓存名字，已经被修改。
在这里插入图片描述
总结
如果是使用coding或者gitHub提供的pages服务，则需要注意最好绑定下独立域名。如果不绑定则注意下文件请求路径即可。研究PWA门槛不低，部署的服务器要求HTTPS，ServiceWorker涉及API众多，需要单独学习，另外npm中也已经有这个包了https://www.npmjs.com/package/web-pwa ，玩玩可以，真正部署到项目生产环境可能坑很多，但有坑填坑，不折腾还叫前端么。
《参考：https://www.imooc.com/article/38838》


http://chatgpt.dhexx.cn/article/OON6PQKe.shtml

相关文章

汽车金融风控企业如何开展风控体系建设

汽车金融风控企业如何开展风控体系建设

汽车融资租赁主要有直租和回租两种模式&#xff0c;相对回租业务而言&#xff0c;直租因更具盈利优势和用户体验优势而备受瞩目。2017年大搜车、易鑫、优信和瓜子等巨头纷纷涉足直租领域&#xff0c;厂家金融和经销商集团金融机构随后跟上&#xff0c;直租模式在国内开始呈现井…
阅读更多...
重磅分享：一份关于车贷的政策性文件分享

重磅分享：一份关于车贷的政策性文件分享

关注公众号“番茄风控大数据”&#xff0c;获取更多数据分析与风控大数据的实用干货。 不同领域不同产品的策略跟政策要点肯定是不同的&#xff0c;对车贷而言因为有车这个标的物&#xff0c;车会移动会跑&#xff0c;为了应对这个相关的风险点&#xff0c;我们就会对标的物做跟…
阅读更多...
线下产品风控门道真不少

线下产品风控门道真不少

关注 “番茄风控大数据”&#xff0c;获取更多数据分析与风控大数据的实用干货。 “你好&#xff0c;请问这里是肯蝶科技有限公司吗&#xff1f;请问这里&#xff0c;有没有一个叫小明的人在这里上班&#xff1f;” “您好&#xff01;对&#xff0c;这里是肯蝶科技有限公司。…
阅读更多...
贷后风控中逾期案件差异化的分配逻辑

贷后风控中逾期案件差异化的分配逻辑

在风控精细化运营的当下&#xff0c;贷后工作的开展&#xff0c;越来越需要精细化管理。 今天我们总结梳理了番茄风控之前的内容并结合近期开展的内容&#xff0c;为大家带来一个催收模型优化和逾期案件催收差异化策略的内容&#xff0c;详细请看本文介绍。 一.催收模型 在催收…
阅读更多...
GPS北斗定位模块应用实现汽车风控管理

GPS北斗定位模块应用实现汽车风控管理

车辆安装GPS北斗定位模块越发常见&#xff0c;无论是车主导航&#xff0c;还是车贷企业的追踪、交警交通的管理等&#xff0c;都是硬性需求和必备工具&#xff0c;在金融风控行业的作用也越来越明显了。 车辆作为资产的一种类型&#xff0c;对资产安全性、实时管控等的需求&am…
阅读更多...
金融风控——Python建模

金融风控——Python建模

金融风控基础篇 风控的基本概念0 基于AI的风控应用1 什么是信用风险&#xff1f;2 信用模型和欺诈模型的区别3 小额现金贷 vs 大额信贷4 信用评分建模的基本流程5 和风控建模相关的问题有&#xff1a; 数据清洗的全过程什么是 ETL交叉验证的优势及实现方法 建立模型模型的评估方…
阅读更多...
风控策略中如何制定差异化利率定价方案

风控策略中如何制定差异化利率定价方案

风控策略中如何制定差异化利率定价方案 前言一、框架设计二、流程设计三、方案测算四、策略上线总结 前言 一个产品上线后&#xff0c;随着规模的扩大&#xff0c;基于风险收益的匹配原则&#xff0c;以及差异化营销的管理要求&#xff0c;除了授信额度策略之外&#xff0c;我…
阅读更多...
风控策略调优——二手车车龄政策调整

风控策略调优——二手车车龄政策调整

本文的研究背景&#xff1a;为了增加进件和放款&#xff0c;拓展业务规模&#xff0c;如何根据现有的数据表现&#xff0c;调整既有的风控策略。所以&#xff0c;此时博弈的双方再次出现&#xff0c;即:增大业务量的同时&#xff0c;使风险控制在可接受的范围之内。本文以A汽车…
阅读更多...
滴滴大数据在汽车金融风控场景中的应用

滴滴大数据在汽车金融风控场景中的应用

导读&#xff1a;滴滴独有的出行场景大数据在金融领域有着非常广泛的应用前景&#xff0c;未来可与银行&#xff0c;保险&#xff0c;支付和理财等机构深入合作&#xff0c;帮助传统金融机构提升资源配置效率&#xff0c;降低获客和风险管理成本。出行场景大数据在交易欺诈识别…
阅读更多...
汽车金融风控流程设计和机器学习实践

汽车金融风控流程设计和机器学习实践

本次分享内容大纲&#xff1a; 01. 汽车金融风控流程设计 汽车金融风控流程设计中需要关注的五个节点&#xff1a;获客、反欺诈、信用评估、额度、利率&#xff0c;整个风控流程的设计一直是围绕这几个点来设计的。 除了上述几点&#xff0c;还需考虑俩个重要因素&#xff1a; …
阅读更多...
了解汽车贷款全过程，不要掉进车贷“坑”！

了解汽车贷款全过程，不要掉进车贷“坑”！

一&#xff0c;征信查询和大数据查询 现在贷款基本都会查大数据和征信&#xff0c;信用很重要。 其中征信是指个人信用报告&#xff0c;是征信机构把依法采集的信息&#xff0c;进行加工整理&#xff0c;最后向合法的信息查询人提供的个人信用历史记录。多是与银行或者较大金融…
阅读更多...
贷前风控策略审批及决策引擎——策略审批架构搭建

贷前风控策略审批及决策引擎——策略审批架构搭建

本文是FAL量化风控全线条训练营的听课笔记&#xff0c;对此感兴趣的可以去关注FAL金科应用研究院的公众号、知乎、官网去了解相关内容。现将核心内容进行整理&#xff0c;补充一些自己的理解和总结&#xff0c;便于结合自己当前工作内容&#xff0c;提升认知。 若对风控领域感…
阅读更多...
风控基础——通俗介绍逾期次数和逾期期数

风控基础——通俗介绍逾期次数和逾期期数

假设某人在2017年1月申请了一笔住房贷款&#xff0c;按合同每个月需要还款2000元&#xff0c;但是因暂时的资金周转不灵&#xff0c;3月至7月连续5个月都没有还款。那么他7 月的当前逾期期数、累计逾期次数和最高逾期期数则分别是&#xff1a; 当前逾期期数&#xff1a;指的是当…
阅读更多...
智取风控特征—巧用PBOC落地额度模型

智取风控特征—巧用PBOC落地额度模型

信贷业务有对公与对私之分&#xff0c;由于信贷业务模式的差异&#xff0c;风险把控方式不同&#xff0c;对于授信额度策略自然非常不同。 目前对公业务中&#xff0c;常规的做法是借助信用评级方法对现有的企业进行信用评价&#xff0c;综合判断后再输出相关授信额度。目前银…
阅读更多...
购车分期系统-智能风控体系，有效控制贷款风险

购车分期系统-智能风控体系，有效控制贷款风险

一、购车分期业务简介 分期购车是指放款人根据借款人的申请&#xff0c;向借款人指定的经销商&#xff0c;按照借款人同意的条件&#xff0c;垫付借款人指定汽车的购车费用&#xff0c;借款人将汽车抵押给放款人&#xff0c;以借款人分期还款为条件&#xff0c;将该车辆的占有、…
阅读更多...
车贷需要注意的问题，车贷风控流程这几点你必须知道

车贷需要注意的问题，车贷风控流程这几点你必须知道

https://baijiahao.baidu.com/s?id1594179123703564858&wfrspider&forpc 前言&#xff1a;何为车贷风控&#xff1f; 指的是车贷业务的风控技术&#xff0c;这里讨论车贷指主流的P2P、小额贷款公司经营的车辆抵押贷款。银行的新车按揭、银行二手车按揭&#xff08;一般…
阅读更多...
Docker镜像是什么，有什么用？

Docker镜像是什么，有什么用？

参考文章&#xff1a;Docker 什么是镜像
阅读更多...
Docker是什么，怎么用？

Docker是什么，怎么用？

1、docker解决了什么的问题&#xff1f; Docker是属于运维和持续集成的管理工具&#xff0c;特别是在运维方面使用Docker可以让你省去很多重复的工作&#xff0c;可以让你的应用程序永远都是在相同的环境中运行。 统一标准 ● 应用构建 ○ Java、C、JavaScript ○ 打成软件包 …
阅读更多...
什么是Docker?

什么是Docker?

什么是Docker? Docker允许我们打包我们的应用以及其所有的依赖包到一个标准化单元中用于软件开发。Docker容器将一块应用打包到一个完整的文件系统中&#xff0c;在该文件系统中包含了该应用要运行的所有要求&#xff1a;代码&#xff0c;运行时&#xff0c;系统工具&#xff…
阅读更多...
什么是Docker镜像？

什么是Docker镜像？

我们知道使用libcontainer可以迅速构建应用的运行环境。容器迁移时候需要把运行环境进行全部打包&#xff0c;这个时候libcontainer就出现短板&#xff0c;因此Docke镜像技术是Docker管理文件系统和运行环境一个完善。 Docker镜像的只读形式&#xff0c;在启动Docker容器中&am…
阅读更多...
推荐文章

Copyright @ 2022~2023