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

前端PWA渐进式加载技术

news 2026/3/30 5:29:29

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&#xff1f; 渐进式网络应用&#xff08;PWA&#xff09;是谷歌在2015年底提出的概念。基本上算是web应用程序&#xff0c;但在外观和感觉上与原生app类似。支持PWA的网站可以提供脱机工作、推送通知和设备硬件访问等功能。 2.PWA有那些优点&#xff1f; 更小更…...

编程日记 2023/2/19 18:16:18

【ubuntu 22.04不识别ch340串口】

这个真是挺无语的&#xff0c;发现国内厂商普遍对开源环境不感兴趣&#xff0c;ch340官方linux驱动好像被厂家忘了&#xff0c;现在放出来的驱动还是上古内核版本&#xff1a; 于是&#xff0c;驱动居然要用户自己编译安装。。还好网上有不少大神&#xff1a;链接&#xff0c;…...

编程日记 2023/2/19 18:15:10

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

如图&#xff1a; 网上解决教程很多&#xff0c;我的eclipse是绿化版的&#xff0c;不需要安装 解决办法如下&#xff1a; 1、在eclipse中&#xff0c;进入到Window->Preferences->Java->Installed JREs中 默认显示如下&#xff1a; 2、点击Add-->Standard VM--…...

编程日记 2023/2/19 18:14:02

初识Cookie和Session

Cookie和Session出于安全考虑&#xff0c;浏览器不让网页直接操作文件系统&#xff0c;而Cookie就是一个折中的方案&#xff0c;可以让网页暂存一些数据在本地&#xff0c;不能存复杂的对象&#xff0c;只能存字符串。Cookie是按照域名分类的&#xff0c;这个很好理解。如何理解…...

编程日记 2023/2/19 18:12:50

vue3的七种路由守卫使用

路由守卫有哪几种&#xff1f; 路由守卫(导航守卫)分为三种&#xff1a;全局守卫&#xff08;3个&#xff09;、路由独享守卫&#xff08;1个&#xff09;、组件的守卫&#xff08;3个&#xff09;。 路由守卫的三个参数 to&#xff1a;要跳转到的目标路由 from&#xff1a;…...

编程日记 2023/2/19 18:11:41

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

目录一、消息类型1.1 sensor_msgs/NavSatFix1.2 sensor_msgs/NavSatStatus1.3 gps_common::GPSFix1.4 sensor_msgs::Imu二、部分源码2.1 相关的依赖和库2.2 文件结构2.3 字段分割函数2.4 定义消息话题Ubuntu 20.04 noetic 华测CGI 610——RS232-C——GPCHC 一、消息类型 1.1 …...

编程日记 2023/2/19 18:10:33

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

目录 操作图像 计算机图像基础 颜色和RGBA值 坐标和 Box 元组 CMYK 和 RGB着色...

编程日记 2023/2/19 18:09:23

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

目录定义结构体基础操作部分文件操作部分定义结构体 我们要做一个通讯录&#xff0c;里面的信息有一个人的名字&#xff0c;年龄&#xff0c;性别&#xff0c;地址和电话号 对于姓名&#xff0c;年龄等字符串&#xff0c;为了日后方便调整其长度&#xff0c;需要预定义一下它…...

编程日记 2023/2/19 18:08:10

Linux驱动开发详细解析

Linux驱动开发详细解析 驱动概念 驱动与底层硬件直接打交道&#xff0c;充当了硬件与应用软件中间的桥梁。 具体任务 读写设备寄存器&#xff08;实现控制的方式&#xff09;完成设备的轮询、中断处理、DMA通信&#xff08;CPU与外设通信的方式&#xff09;进行物理内存向虚…...

编程日记 2023/2/19 18:07:03

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

目录 一、什么是Java Character 类&#xff1f; 二、Character类有哪些常用的静态方法&#xff1f; 1、将一个字符分别转换为大写字母和小写字母 2、如何判断一个字符是否是数字&#xff1f; 3、如何将一个字符转换为数字&#xff1f; 4、如何将一个字符串转换为字符数组…...

编程日记 2023/2/19 18:05:55

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

今天我们简单地介绍关于收益率的一些概念，方便大家理解我们后续的量化教程的分享。这些都很简单，但是请有经验的读者理解，毕竟有些读者没有这些基础，后边理解起来可能会有些吃力。 一、收益率简介 在金融领域，收益率是我们耳熟能详的一个名词。资产的收益率是指投入资产…...

编程日记 2023/2/19 18:04:47

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

基于数据模型实现表单页面的生成和数据的保存、查看 表单应用是微搭的一个重要的使用场景&#xff0c;我们举下面一个简单的问卷调查的例子: 基于以上问卷&#xff0c;本文我们采取数据模型的方式生成表单页面并完成数据的保存及查看。 数据模型概述 先看下官方文档对于数据…...

编程日记 2023/2/19 18:03:38

JavaScript刷LeetCode心得

各类题的解决方案 话不多说&#xff0c;系统整理下解题的一些算法和解决方案 二叉树 二叉树大多使用递归的方式左右两个元素向下递归。比如&#xff1a; 计算二叉树最大深度 var maxDepth function (root) {if (root null) return 0return 1 Math.max(maxDepth(root.le…...

编程日记 2023/2/19 18:02:26

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

根据往年的情况&#xff0c;2023浙江工商大学MBA考试初试成绩可能将于2月21日下午两点公布&#xff0c;为了广大考生可以及时查询到自己的分数&#xff0c;杭州达立易考教育为大家汇总了信息。一、成绩查询考生可以登录中国研究生招生信息网&#xff08;http://yz.chsi.com.cn/…...

编程日记 2023/2/19 18:01:19

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

最近更新的博客 华为OD机试题 - 任务总执行时长（JavaScript） 华为OD机试题 - 开放日活动（JavaScript） 华为OD机试 - 最近的点 | 备考思路，刷题要点，答疑 【新解法】 华为OD机试题 - 最小步骤数（JavaScript） 华为OD机试题 - 任务混部（JavaScript） 华为OD机试题 - N 进…...

编程日记 2023/2/19 18:00:11

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

目录 Encoder 原理 STM32 Encoder 计数原理 模型仿真 模拟Encoder 基于Encoder计算角度和速度 关于启动的仿真 代码生成 运行演示 总结 总结一下基于STM32的Encoder接口的电机运行&#xff0c;相应的仿真和实验都是基于一个1024脉冲的增量式光电编码器&#xff0c;关于…...

编程日记 2023/2/19 17:59:04

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

文章目录《计算机系统基础》——计算机系统导论计算机的基本组成程序开发与执行过程机器语言汇编语言高级语言程序的转换处理程序的数据流动计算机系统层次结构早期计算机系统1GL2GL现代计算机系统3GL4GL指令集体系结构《计算机系统基础》——计算机系统导论 &#x1f680;接下…...

编程日记 2023/2/19 17:57:57

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

获取最大软件版本号 题目 Maven版本号定义，<主版本>.<次版本>.<增量版本>-<里程碑版本> 举例3.1.4-beta 其中，主版本和次版本都是必须的，主版本，次版本，增量版本由多位数字组成，可能包含前导零，里程碑版本由字符串组成。 <主版本>.<…...

编程日记 2023/2/19 17:56:48

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

随着学期的开始&#xff0c;同学们也即将进入计算机相关课程的课程设计了&#xff0c;对于python课程设计的小伙伴&#xff0c;可能有些是需要利用pygame来写应该小游戏的&#xff0c;因为最近很多小伙伴同学也在想我要一些基于python的pygame模块做的游戏项目&#xff0c;此外…...

编程日记 2023/2/19 17:55:41

C++Primer15.3节练习

练习15.11&#xff1a; debug定义如下所示&#xff1a; //基类 class Quote { public:Quote() default;Quote(const std::string& book,double sales_price):bookNo(book),price(sales_price){ }std::string isbn()const { return bookNo; }virtual double net_price(st…...

编程日记 2023/2/19 17:54:36

Ext2Read：3个高效方案解决Windows读取Linux分区难题

Ext2Read&#xff1a;3个高效方案解决Windows读取Linux分区难题 【免费下载链接】ext2read A Windows Application to read and copy Ext2/Ext3/Ext4 (With LVM) Partitions from Windows. 项目地址: https://gitcode.com/gh_mirrors/ex/ext2read 一、痛点直击&#xff…...

编程新知 2026/3/30 4:47:58

终极指南：如何快速实现CocoaHTTPServer自定义连接处理

终极指南&#xff1a;如何快速实现CocoaHTTPServer自定义连接处理 【免费下载链接】CocoaHTTPServer A small, lightweight, embeddable HTTP server for Mac OS X or iOS applications 项目地址: https://gitcode.com/gh_mirrors/co/CocoaHTTPServer CocoaHTTPServer是…...

编程新知 2026/3/30 4:01:21

组合导航（五）：惯性导航系统的误差分析与校正方法

1. 惯性导航系统误差的根源剖析 刚接触惯性导航的朋友们常会遇到这样的困惑&#xff1a;为什么同样的设备&#xff0c;在不同环境下定位精度差异这么大&#xff1f;这就像用同一把尺子测量物体&#xff0c;有时准有时不准&#xff0c;问题往往出在尺子本身的误差上。惯性导航系…...

编程新知 2026/3/30 3:49:13

OpenClaw多账户管理：ollama-QwQ-32B模型服务同时支持多个飞书机器人

OpenClaw多账户管理&#xff1a;ollama-QwQ-32B模型服务同时支持多个飞书机器人 1. 为什么需要多账户管理&#xff1f; 去年我们团队在尝试用OpenClaw实现自动化办公时&#xff0c;遇到了一个典型问题&#xff1a;市场部和研发部都需要使用同一个ollama-QwQ-32B模型服务&…...

编程新知 2026/3/30 3:04:42

DownKyi：解决B站视频下载痛点的创新方案——从低效操作到高效管理的完整实践

DownKyi&#xff1a;解决B站视频下载痛点的创新方案——从低效操作到高效管理的完整实践 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频…...

编程新知 2026/3/30 2:32:34

CTF新手必看：用Audacity搞定音频隐写题的保姆级指南（附频谱图实战）

CTF音频隐写实战&#xff1a;用Audacity从频谱图中挖出Flag的终极技巧 第一次参加CTF比赛时&#xff0c;我盯着那道音频隐写题整整半小时毫无头绪——直到一位前辈轻描淡写地说&#xff1a;"试试把频谱图调成对数刻度"。这个简单操作瞬间让隐藏在8kHz频率的Flag清晰可…...

编程新知 2026/3/30 1:36:14

FireRed-OCR StudioGPU适配方案：多卡并行解析长文档的配置详解

FireRed-OCR StudioGPU适配方案&#xff1a;多卡并行解析长文档的配置详解 1. 工业级文档解析工具概述 FireRed-OCR Studio是一款基于Qwen3-VL模型开发的下一代文档解析工具&#xff0c;专为处理复杂文档场景设计。它不仅能够精准识别文字内容&#xff0c;更能完整还原文档中…...

编程新知 2026/3/29 23:03:07

Network Connection Class深度优化：10个提升网络检测精度的技巧

Network Connection Class深度优化&#xff1a;10个提升网络检测精度的技巧 【免费下载链接】network-connection-class Listen to current network traffic in the app and categorize the quality of the network. 项目地址: https://gitcode.com/gh_mirrors/ne/network-co…...

编程新知 2026/3/29 20:32:08

嵌入式开发必备：rootfs.img镜像修改的5个常见问题与解决方案

嵌入式开发实战&#xff1a;rootfs.img镜像修改的五大核心问题与深度解决方案 在嵌入式Linux开发中&#xff0c;rootfs.img镜像的修改是每个开发者绕不开的关键环节。无论是添加自定义配置文件、更新系统组件&#xff0c;还是优化启动流程&#xff0c;对根文件系统的调整都直接…...

编程新知 2026/3/29 20:26:07

SKILL语言在数字IC设计中的高级应用：如何优化你的工作流程

SKILL语言在数字IC设计中的高级应用&#xff1a;如何优化你的工作流程 在数字IC设计的复杂世界里&#xff0c;效率就是竞争力。当大多数工程师还在手动点击EDA工具菜单时&#xff0c;掌握SKILL语言的高手已经用几行代码完成了批量操作。这不是魔法&#xff0c;而是SKILL语言赋…...

编程新知 2026/3/29 19:25:37