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

前端PWA渐进式加载技术

news 2025/6/10 15:25:36

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

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/6/10 14:12:18

深入解析 ReentrantLock：原理、公平锁与非公平锁的较量

ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类，用于实现线程同步，支持可重入性，并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...

编程新知 2025/6/10 12:31:02

Vuex：Vue.js 应用程序的状态管理模式

什么是Vuex&#xff1f; Vuex 是专门为 Vue.js 应用程序开发的状态管理模式 库。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 在大型单页应用中&#xff0c;当多个组件共享状态时&#xff0c;简单的单向数据流…...

编程新知 2025/6/10 5:53:38

HarmonyOS-ArkUI 自定义弹窗

自定义弹窗 自定义弹窗是界面开发中最为常用的一种弹窗写法。在自定义弹窗中&#xff0c; 布局样式完全由您决定&#xff0c;非常灵活。通常会被封装成工具类&#xff0c;以使得APP中所有弹窗具备相同的设计风格。 自定义弹窗具备的能力有 打开弹窗自定义布局&#xff0c;以…...

编程新知 2025/6/10 3:24:37

DOM（文档对象模型）深度解析

DOM（文档对象模型）深度解析 DOM 是 HTML/XML 文档的树形结构表示，提供了一套让 JavaScript 动态操作网页内容、结构和样式的接口。 一、DOM 核心概念 1. 节点（Node）类型 类型值说明示例ELEMENT_NODE1元素节点<div>, <p>TEXT_NODE3文本节点元素内的文字COMMEN…...

编程新知 2025/6/10 0:42:35

KKCMS部署

目录 账号 网站目录 快看CMS使用手册 http://10.141.19.241/kkcms/install/ 常规思路&#xff1a;页面点点观察url变化&#xff0c;参数 常规思路&#xff1a;点一个功能模块抓包看什么东西&#xff0c;正确是什么样&#xff0c;错误的是什么样&#xff0c;构造参数。 账号…...

编程新知 2025/6/10 0:14:02

人工智能学习09-变量作用域

人工智能学习概述—快手视频 人工智能学习09-变量作用域—快手视频...

编程新知 2025/6/9 23:41:58

0x-2-Oracle Linux 9上安装JDK配置环境变量

一、JDK选择和使用 安装完Oracle Linux9.6&#xff0c;同时使用rpm包安装Oracle 23 ai free后&#xff0c; 将面临sqlcl程序无法使用和java无法使用&#xff0c;需要相应进行变量配置问题。 1、java 环境运行不存在&#xff0c;Oracle 23ai free安装后默认安装JDK 11 /opt/…...

编程新知 2025/6/9 21:13:25

当前市场环境下，软件行业的突围之道：技术演进与商业模式重构

一、行业背景&#xff1a;软件行业进入结构性调整期 2024年至今&#xff0c;软件行业面临三重挑战&#xff1a; 宏观经济承压&#xff1a;全球经济放缓&#xff0c;企业IT预算趋于谨慎&#xff1b; 资本市场收缩&#xff1a;融资环境收紧&#xff0c;盈利能力成为生死线&…...

编程新知 2025/6/9 20:05:25

nano编辑器的详细使用教程

以下是 Linux 下 nano 编辑器 的详细使用指南&#xff0c;涵盖安装、基础操作、高级功能、快捷键以及常见问题处理。 一、安装 nano 大多数 Linux 发行版已预装 nano。如果没有安装&#xff0c;可以通过以下命令安装&#xff1a; Debian/Ubuntu 系&#xff1a;sudo apt update…...

编程新知 2025/6/9 17:12:40