当前位置：首页 > news >正文

前端PWA渐进式加载技术

news 2025/9/15 6:53:28

1.什么是PWA？

渐进式网络应用（PWA）是谷歌在2015年底提出的概念。基本上算是web应用程序，但在外观和感觉上与原生app类似。支持PWA的网站可以提供脱机工作、推送通知和设备硬件访问等功能。

2.PWA有那些优点？

更小更快: 渐进式的web应用程序比原生应用程序小得多。他们甚至不需要安装。这是他们没有浪费磁盘空间和加载速度非常快。
响应式界面: PWA支持的网页能够自动适应各种屏幕大小。它可以是手机、平板、台式机或笔记本。
无需更新: 大多数移动应用程序需要每周定期更新。与普通网站一样，每当用户交互发生且不需要应用程序或游戏商店批准时，PWA总是加载最新更新版本。
高性价比：原生移动应用需要分别为Android和iOS设备开发，开发成本非常高。另一方面，PWAs有着相同的功能，但只是先前价格的一小部分，开发成本低。
SEO优势：搜索引擎可以发现PWAs，并且加载速度非常快。就像其他网站一样，它们的链接也可以共享。提供良好的用户体验和结果，在SEO排名提高。
脱机功能：由于service worker API的支持，可以在脱机或低internet连接中访问PWAs。
安全性：PWAs通过HTTPS连接传递，并在每次交互中保护用户数据。
推送通知：通过推送通知的支持，PWAs轻松地与用户进行交互，提供非常棒的用户体验。
绕过应用商店：原生app如果需要任何新的更新,需要应用商店几天的审批，且有被拒绝或禁止的可能性,对于这方面来说，PWAs有它独特的优势，不需要App Store支持。更新版本可以直接从web服务器加载，无需App Store批准。
零安装：在浏览过程中，PWA会在手机和平板电脑上有自己的图标，就像移动应用程序一样，但不需要经过冗长的安装过程。

3.pwa缓存的原理

为什么能实现缓存或者叫离线存储？核心就是利用浏览器service-worker另启一个线程，这个线程负责去监听所有https请求（注意是https）,当发现某些资源是需要缓存下来的他会把资源拉取到浏览器本地，访问的时候拦截请求，不走网络请求，直接读取本地资源。这样资源相当于都是用户本地的资源,响应速度肯定飞快，还有就是资源都在用户浏览器里面，就算断了网,资源也都是能正常访问。

pwa缓存的提速效果是非常明显，能保证你的页面在弱网环境下秒开，资源大部分都是在50毫秒左右的的响应时间。我们在safari浏览器测试的响应时间更加快速，基本都是在15ms左右!!!

4.PWA关键技术

Service Worker （可以理解为服务工厂）
Manifest （应用清单）
Push Notification（推送通知）

5.PWA代码初探

看来上面的介绍，是不是跃跃欲试呢？接下来将用代码来简单使用一下service worker，缓存页面中的css、js文件，具体例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" type="text/css" href="/cache1.css"><title>pwa</title></head><body><div id="app">test1</div><!-- built files will be auto injected --><script src='/cache1.js'></script><script>if ('serviceWorker' in navigator) {window.addEventListener('load', function () {navigator.serviceWorker.register('/sw.js').then((registration) => {console.log('Service Worker Registration')}, (err) => {console.log(err)})})}self.addEventListener('fetch', () => {console.log('ss')})</script></body>
</html>

sw.js：

var cacheName = 'my-cache'
var cacheList = ['/cache1.css', '/cache1.js']
self.addEventListener('install', function(event) {event.waitUntil(// 安装成功后向caches中存入需要缓存的文件  caches.open(cacheName).then(function (cache) {return cache.addAll(cacheList)}))
});
// 监听service worker fetch
self.addEventListener('fetch', function (event) {event.respondWith(caches.match(event.request).then(function(response) {// 在缓存中查找到匹配的请求，就从缓存返回if (response) {console.log(response)return response;}// 缓存中没有查找到对应请求，继续网络请求return fetch(event.request);}));
})

如上例所示，利用service worker缓存了页面请求中cache1.js、cache1.css，然后再刷新一下网页，网页请求就会变成下图这样：

6.可以使用webpack打包技术将service worker引入项目当中

A. 创建文件

B. 下载安装包

npm install --save-dev workbox-webpack-plugin

C. 修改配置文件

在webpack.config.js文件当中配置：

  plugins: [new WorkboxWebpackPlugin.GenerateSW({/*1. 帮助serviceworker快速启动2. 删除旧的 serviceworker生成一个 serviceworker 配置文件~*/clientsClaim: true,skipWaiting: true})]

在index.html当中要配置：

<script>
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(() => {console.log('sw注册成功了~');}).catch(() => {console.log('sw注册失败了~');});});
}
</script>

要注意一下package.json文件的配置也要进行更改

1. eslint不认识 window、navigator全局变量

解决：需要修改package.json中eslintConfig配置

"env": {

"browser": true // 支持浏览器端全局变量

}

2. sw代码必须运行在服务器上

--> nodejs

-->npm i serve -g

serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去

前端PWA渐进式加载技术

1.什么是PWA？

2.PWA有那些优点？

3.pwa缓存的原理

4.PWA关键技术

5.PWA代码初探

6.可以使用webpack打包技术将service worker引入项目当中

相关文章：

前端PWA渐进式加载技术

【ubuntu 22.04不识别ch340串口】

解决：eclipse绿化版Resource注解报Resource cannot be resolved to a type问题

初识Cookie和Session

vue3的七种路由守卫使用

华测导航GPCHC协议ROS驱动包，CGI610、410接收机，NavSatStatus、GPSFix和普通格式

算法实战应用案例精讲-【图像处理】Pillow图像处理（python代码实战）

C语言通讯录【动态+文件】

Linux驱动开发详细解析

Java Character 类，超详细整理，适合新手入门

Python量化入门：关于收益率的一些概念

微搭使用笔记(三) 数据模型介绍及初步使用

JavaScript刷LeetCode心得

浙江工商大学2023年硕士研究生入学考试初试成绩查询通知及说明

华为OD机试题 - 子序列长度（JavaScript）

Simulink 自动代码生成电机控制：STM32 Encoder编码器使用总结

《计算机系统基础》——计算机系统导论

华为OD机试 - 获取最大软件版本号（JavaScript） | 机试题算法思路【2023】

python--pygame实现各级菜单栏目设置

C++Primer15.3节练习

java 实现excel文件转pdf | 无水印 | 无限制

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

OkHttp 中实现断点续传 demo

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

中医有效性探讨

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

Linux中《基础IO》详细介绍

消息队列系统设计与实践全解析