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

前端PWA渐进式加载技术

news 2025/12/26 11:00:05

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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/12/16 3:23:56

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/12/4 11:14:19

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/12/10 10:10:30