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

news2024/9/30 20:14:30

文章目录

  • 引言
  • 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.coloradmin.cn/o/2180601.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

dwceqos网络驱动性能优化

文章介绍 本文会介绍优化QNX系统下io-pkt-v6-hc驱动模块cpu loading过高问题,经过优化可以降低约一半的cpu loading. 问题背景 激光雷达通过以太网发送数据到ADAS域控中,测试发现在激光功能激活的情况下,会出现比较明显的网络丢帧现象。 …

HT8731 内置自适应H类升压和防破音功能的10W D类及AB类音频功率放大器

1、特点 防削顶失真功能(防破音,Anti-Clipping Function, ACF) 免滤波器数字调制&#xff0c;直接驱动扬声器 输出功率 10W(VBAT4.2V,RL3Ω,THDN10%, fiN 1kHz) 6W(VBAT3.3~4.2V,RL4Ω,THDN<1%,20-20kHz 全频段) 3W (VBAT3.3~4.2V,RL8Ω, THDN<1%, 20- 20kHz 全频段 VB…

DPLL的DCO与PLL的VCO(数控振荡器与压控振荡器)

1.概述 无论DPLL还是PLL都是由PD&#xff0c;LPF和DCO/VCO组成。 PD&#xff1a;鉴相器&#xff0c;是将VCO/DCO输出的频率信号分频后与refclk进行相位比对&#xff0c;输出一个相位差信号 LFP&#xff1a;是将相位差信号转换为VCO的压控信号或DCO的延迟信号。 VCO&#xf…

js将对象的键和值分别归纳进对象,并将多层对象转化成数据的方法

前言&#xff1a; 后端传给我一个没有处理过的json串&#xff0c;但是我要传入el-tree做渲染&#xff0c;此篇来记录一下整个数据处理过程以及el-tree的使用 需求描述&#xff1a; 一、树结构可以展开可以收缩&#xff0c;默认全部展开 二、有一些关键词需要高亮展示红色 …

第十三届蓝桥杯真题Python c组D.数位排序(持续更新)

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;蓝桥杯关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 问题描述 小蓝对一个数的数位之和很感兴趣, 今天他要按照数位之和给数排序。…

Knots_3D 9.3.0 一款教你绑绳结的手机应用

Knots 3D (3D绳结)是一款教你绑绳结的手机应用&#xff0c;可以掌握一些必备的绳结系法&#xff0c;拥有 120 个 3D 效果的绳结&#xff0c;教你系上、解开&#xff0c;户外爱好者必备。Knots 3D已经被全世界的园艺师、渔民、消防员、登山者、军人和童子军使用&#xff0c;它将…

9.2 Linux_I/O_标准I/O相关函数

打开与关闭 文件打开就是判断这个文件资源可不可以被占用&#xff0c;如果可以&#xff0c;就能够打开成功&#xff0c;否则打开失败 文件关闭就是释放文件资源 1、打开文件 1.1 函数声明 FILE *fopen(const char *pathname, const char *mode); 返回值&#xff1a;出错返…

永不失联!遨游双卫星三防手机成为高效应急关键所在

今年9月被戏称为“台风月”&#xff0c;台风“摩羯”、“贝碧嘉”以及热带气旋“普拉桑”接连来袭&#xff0c;极端天气不仅导致了电力中断、道路损毁&#xff0c;更使得传统的通信网络遭受重创&#xff0c;给应急通信保障工作带来了极大的压力。面对“三断”的实战难题&#x…

铰链+屏幕齐发力,告诉你 Mate XT 是如何让折痕变得“无存在感”

“折痕”是折叠手机永恒的话题&#xff0c;每一款折叠屏手机产品的问世&#xff0c;都逃不过对折痕的关注和讨论。 为什么会存在折痕&#xff1f; 材料在弯折的状态下会受到力的作用&#xff0c;在内部产生“压缩”的应力和“拉伸”的应力&#xff0c;这些应力集中在弯折的区…

pytorch线性/非线性回归拟合

一、线性回归 1. 导入依赖库 import numpy as np import matplotlib.pyplot as plt import torch from torch import nn, optim from torch.autograd import Variable numpy&#xff1a;用来构建数据matplotlib.pyplot&#xff1a; 将构建好的数据可视化torch.nn&#xff1a…

《向量数据库指南》——Fivetran 的 Partner SDK:构建自定义连接器和目标

哈哈,说到 Fivetran 的 Partner SDK,这可真是个好东西啊!作为向量数据库领域的“老司机”,我今天就来给大家详细讲讲这个 SDK 的厉害之处,以及如何用它来构建自定义连接器和目标,实现与 Fivetran 自动化数据移动平台的无缝集成。 一、Fivetran Partner SDK:开启自定义连…

二叉树深搜专题篇

目录 计算布尔二叉树的值 求根节点到叶节点数字之和 二叉树剪枝 验证二叉搜索树 二叉搜索树中第K小的元素 二叉树的所有路径 计算布尔二叉树的值 题目 思路 这道题其实是比较简单的&#xff0c;对二叉树来一次后序遍历即可&#xff0c;当遇到叶子结点直接返回叶子节点中…

干部画像系统怎么实现人岗智能匹配的?

人岗匹配的核心在于实现“岗得其人”和“人适其岗”&#xff0c;即根据不同人的个体特征将不同的人安排在各自最合适的岗位上&#xff0c;达到人尽其才的目标。干部画像系统作为一种辅助领导智慧识才的工具&#xff0c;通过集成多种技术手段和分析方法&#xff0c;对干部的定性…

【代码实现】torch实现F.pixel_shuffle和F.pixel_unshuffle

原理 pixel_shuffle 和 pixel_unshuffle 常用于神经网络减少特征图尺寸以减少计算量&#xff0c;由于有些硬件不支持这两个算子&#xff0c;可以根据原理使用torch实现。 代码实现 import torch.nn.functional as F import torch def pixelshuffle_inv(tensor, scale2):N, c…

C++详解vector

目录 构造和拷贝构造 赋值运算符重载&#xff1a; vector的编辑函数&#xff1a; assign函数&#xff1a; push_back和pop_back函数&#xff1a; insert函数&#xff1a; erase函数&#xff1a; swap函数&#xff1a; clear函数&#xff1a; begin函数&#xff1a; e…

【以图搜图代码实现2】--faiss工具实现犬类以图搜图

第一篇&#xff1a;【以图搜图代码实现】–犬类以图搜图示例 使用保存成h5文件&#xff0c;使用向量积来度量相似性&#xff0c;实现了以图搜图&#xff0c;说明了可以优化的点。 第二篇&#xff1a;【使用resnet18训练自己的数据集】 准对模型问题进行了优化&#xff0c;取得了…

汽修行业的知识库搭建:赋能在线教育与知识付费

随着汽修行业的蓬勃发展&#xff0c;其业务范围和技术要求日益多元化。为了应对这一趋势&#xff0c;许多汽修公司开始探索线上教育模式&#xff0c;通过开设汽修知识课程&#xff0c;实现知识的有偿分享与传播。这一转变不仅拓宽了企业的盈利渠道&#xff0c;也为广大汽修爱好…

深度学习之贝叶斯分类器

贝叶斯分类器 1 图解极大似然估计 极大似然估计的原理&#xff0c;用一张图片来说明&#xff0c;如下图所示&#xff1a; ​ 例&#xff1a;有两个外形完全相同的箱子&#xff0c;1号箱有99只白球&#xff0c;1只黑球&#xff1b;2号箱有1只白球&#xff0c;99只黑球。在一次…

【Spark 实战】基于spark3.4.2+iceberg1.6.1搭建本地调试环境

基于spark3.4.2iceberg1.6.1搭建本地调试环境 文章目录 基于spark3.4.2iceberg1.6.1搭建本地调试环境环境准备使用maven构建sparksql编辑SparkSQL简单任务附录A iceberg术语参考 环境准备 IntelliJ IDEA 2024.1.2 (Ultimate Edition)JDK 1.8Spark 3.4.2Iceberg 1.6.1 使用mave…

C++----类和对象(一)

一.类的定义 1.类定义的格式 • class为定义类的关键字&#xff0c;ST为类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后面分号不能省 略。类体中内容称为类的成员&#xff1a;类中的变量称为类的属性或成员变量; 类中的函数称为类的方法或 者成员函数。 …