PWA(Progressive web APPs,渐进式 Web 应用): manifest.json、 Service Worker

文章目录

  • 引言
  • I 什么是 PWA
    • 功能
    • 特性
    • 技术上分为三个部分
    • 安装应用
  • II Web 应用清单
    • 将Web 应用清单文件链接到站点
    • manifest.json
    • 字段说明
  • III Service Worker( 缓存管理)
  • IV 结合构建工具让项目支持 PWA应用
    • 使用插件vite-plugin-pwa
    • workbox-webpack-plugin插件
  • 扩展知识
    • 将 PWA 作为脱机应用
    • 定义当前文档与被链接文档之间的关系

引言

PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018 年迎来重大突破,全球顶级的浏览器厂商,Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。

PWA 目的是通过各种 Web 技术实现与原生 App 相近的用户体验

I 什么是 PWA

功能

  • 离线加载与缓存(Service Worker + Cache API )

可以通过 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。

Service Worker是一种在后台运行的JavaScript脚本,可以拦截网络请求并将资源缓存到本地。这样,即使用户处于离线状态,他们仍然可以访问缓存的内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/434962.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

紫光 FPGA固化RAM位置的操作流程

1. 前提条件:需要已经编译出一个功能完整的没有时序违例的版本出来; 2. 将RAM导出至txt文件: 这个过程需要几分钟,耐心等待一下。 等待提示成功就可以进行下一步操作了。 3. 将【2】中的txt文件中的内容全选复制粘贴到pcf文件的…

物体实例分割,机器人拾取

物体实例分割是计算机视觉领域的一个关键任务,它旨在从图像中分割出每个独立物体,并且为每个物体实例提供一个独特的标识。这一任务不仅识别出图像中的物体,还能区分出多个同类物体的不同实例,例如在一张桌子上摆放的多个相同的杯…

AI直播巅峰!2024年AI无人直播app排行榜领先者揭晓!

AI直播巅峰!2024年AI无人直播app排行榜领先者揭晓! 在科技日新月异的今天,AI技术正以惊人的速度渗透到我们生活的每一个角落,其中,AI无人直播app的兴起无疑成为了直播行业的一股革新力量。随着技术的不断成熟和市场的…

瓶子类型检测系统源码分享

瓶子类型检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

论文阅读:A Generalization of Transformer Networks to Graphs

论文阅读:A Generalization of Transformer Networks to Graphs 论文地址1 摘要2 贡献Graph TransformerOn Graph Sparsity(图稀疏)On Positional Encodings(位置编码)3 Graph Transformer Architecture(架…

关于Fake Location定位,运动世界校园问题

不好意思,之前那个文章其实是很早之前的,不知道为什么审核了很久一直没有通过,然后前几周莫名其妙点了一下重新发布,竟然发布成功了,这个方法已经失效了,要可以稳定,我建议是买一台root的手机&a…

给Ubuntu虚拟机设置静态IP地址(固定IP)

查看 为Ubuntu虚拟机配置静态IP地址(固定IP)的方法经过亲自测试,已被证实有效。 这里你记得网关就可以了,等下要用 查看配置前的网络信息 ifconfig 查看网关 route -n 配置 配置网络文件 cd /etc/netplan/ ls 查看自己的文件的名…

o1规划能力首测!已超越语言模型范畴,preview终于赢mini一回

克小西 发自 凹非寺 量子位 | 公众号 QbitAI o1-preview终于赢过了mini一次! 亚利桑那州立大学的最新研究表明,o1-preview在规划任务上,表现显著优于o1-mini。 相比于传统模型的优势更是碾压级别,在超难任务上的准确率比Llama3.…

C++第五讲(1):STL--string--各个函数的使用方法

C第五讲:STL--string 1.STL简介2.string类2.1string类的常见构造2.1.1重点1: string()2.1.2重点2:string(const string& str)2.1.3使用3:string(const string& str, size_t pos, size_t len npos)…

4.5 了解大数据处理基本流程

文章目录 1. 引言2. 数据采集2.1 数据库采集2.2 实时数据采集2.3 网络爬虫采集 3. 数据预处理3.1 数据清洗3.2 数据集成3.3 数据归约3.4 数据转换 4. 数据处理与分析4.1 数据处理4.2 数据分析 5. 数据可视化与应用5.1 数据可视化5.2 ECharts框架5.3 课堂作业 6. 结语 1. 引言 …

光控资本:什么是优质股,近期估值创历史新低的优质股盘点?

在股票商场中,选到优质股进行出资,可以让出资者取得更高的出资酬谢。美联储发布降息,关于A股商场而言,估值创新低的优质股或许将获益于美联储降息。 根据近期数据,归纳10家以上安排评级的个股中,有19只个股…

Delphi实现计算器——状态机

成品展示: 方案: 采用状态机和静态工厂模式实现。 1.使用工厂方法模式来创建操作对象 定义了一个抽象的操作类TOperation,其中声明了Calculate方法用于执行具体的计算。 然后针对不同的操作(加、减、乘、除、取模)分别创建了具体的操作类,如TAddOp…

JWT令牌技术介绍及使用

一、JWT介绍 JWT是JSON Web Token的缩写,即JSON Web令牌,是一种自包含令牌。 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。 JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务…

数组解构是如何降低 JavaScript 的运行速度

在JavaScript开发中,解构赋值是一个广受欢迎的特性,它让代码更加简洁易读。然而,不同的解构模式可能会对性能产生显著影响。本文将深入探讨数组解构赋值可能带来的性能问题,并提供优化建议。 解构赋值的两种模式 JavaScript中的解…

Vscode超好看的渐变主题插件

样式效果: 插件使用方法: 然后重启,之后会显示vccode损坏,不用理会,因为这个插件是更改了应用内部代码,直接不再显示即可。

Spring Boot集成Redis向量数据库实现相似性搜索

1.什么是Redis向量数据库? Redis 是一个开源(BSD 许可)的内存数据结构存储,用作数据库、缓存、消息代理和流式处理引擎。Redis 提供数据结构,例如字符串、哈希、列表、集合、带范围查询的有序集合、位图、超对数日志、…

mac怎么设置ip地址映射

最近开发的项目分为了两种版本,一个自己用的,一个是卖出去的。 卖出的域名是和自己的不一样的,系统中有一些功能是只有卖出去的版本有的,但我们开发完之后还得测试,那就需要给自己的电脑配置一个IP地址映射了&#xf…

C++ STL容器(四) —— vector底层剖析

这篇讲解vector,不说废话,直接开始! 文章目录 原理UML类图代码实现构造函数插入元素删除元素清空容器析构函数赋值运算符 案例分析 原理 这里简单说一下 vector 的大致思想,动态数组,即它的长度会随着我们插入元素而产…

问:全国产业园数量增长,对中小企业意味着什么?

随着全国产业园数量的持续增长,这一趋势无疑为中小企业带来了前所未有的机遇与可能。产业园作为产业集聚的重要载体,不仅为中小企业提供了更广阔的发展空间,还通过资源共享、成本降低、创新协同等方式,助力企业快速成长。 对于中…