网站添加PWA支持，仅需三步，无视框架的类型

总结起来，网站配置PWA简单步骤为：

  1. 编写 manifest.json；
  2. 编写 serviceWorker.js；
  3. 在 index.html 引入上述两个文件；
  4. 把上述三个文件放在网站根目录(或者同一目录下)；
  5. 网站需要部署在https环境才能触发；

这个是我按照本文做的Demo，可以参考一下：https://lx164.netlify.app/ ，如果你的是Vue项目原理也是一样的。

开始之前建议先检查一下你的环境是否支持，支持PWA的浏览器请看这里：https://caniuse.com/?search=pwa

最新内容请以原文为准： https://www.cnblogs.com/LiangSenCheng/p/16702710.html

1、编写 manifest.json

manifest.js 是用来定义名称、icon等信息的；

{"name": "完整名称", // 用于安装横幅、启动画面显示"short_name": "名称缩写", // 不为空时,桌面icon的名称优先为short_name"theme_color": "#f85758", // 主题色"background_color": "#f85758", // 背景色"display": "fullscreen", // 启动过渡动画, standalone或fullscreen"scope": "/","start_url": "/", //启动页面,如果首页是https://www.abc.com/,则直接用“/”即可。"icons": [{"src": "logo72x72.png","type": "image/png","sizes": "72x72"},{"src": "logo96x96.png","type": "image/png","sizes": "96x96"},{"src": "logo144x144.png","type": "image/png","sizes": "144x144"}]
}

1.1 字段描述

  • name

完整名称，用于安装横幅、启动画面显示

  • short_name

名称缩写，用于显示桌面Icon名称；不为空时,桌面icon的名称优先为short_name

  • theme_color

主题色，指定 PWA 的主题颜色；通过该属性来控制浏览器 UI 的颜色。比如 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色，会被 theme_color 所影响。

注：在指定了 theme_color 的值之后，地址栏依然呈白色。针对这种情况，可以在页面 HTML 里设置 name 为 theme-color 的 meta 标签，例如：，这个标签的色值会覆盖 manifest.json 里设置的 theme_color；

  • background_color

背景色，用来指定启动画面的背景颜色。

  • scope

作用域，通过 scope 属性去限定作用域，超出范围的部分会以浏览器的方式显示。

  • 如果没有在 manifest 中设置 scope，则默认的作用域为 manifest.json 所在文件夹；

  • scope 可以设置为 …/ 或者更高层级的路径来扩大PWA的作用域；

  • start_url 必须在作用域范围内；

  • 如果 start_url 为相对地址，其根路径受 scope 所影响；

  • 如果 start_url 为绝对地址（以 / 开头），则该地址将永远以 / 作为根地址；
    在这里插入图片描述

  • start_url

启动页面,如果首页是https://www.abc.com/,则直接用“/”即可。

  • icons

不同尺寸的icon，一般这个三个尺寸的都要，否则浏览器会出现警告： 72x72、96x96、144x144。

注意：三种尺寸的图片最好是保证图片的真实尺寸是72x72、96x96、144x144, 否则浏览器出现的警告可能会导致无法正常触发地址栏的install按钮。

  • display

可选值有：

  1. fullscreen: 应用的显示界面将占满整个屏幕
  2. standalone: 浏览器相关UI（如导航栏、工具栏等）将会被隐藏
  3. minimal-ui：显示形式与standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同

移动端效果如下：

注：1. 在移动端如果要自动显示 “添加到桌面” 的弹窗，则display的值必须为：fullscreen 或 standalone；2. 在windows桌面fullscreen和standalone的样式差不多，在移动端就有区别了；

在这里插入图片描述

1.2 浏览器识别效果

浏览器识别后的内容类似下图，直接拿语雀的来举例：

在这里插入图片描述

2、编写 serviceWorker.js

// cache名, 在控制台Application的CaChe下可以看到
const cacheName = "penueling";
// cache文件
const cacheFiles = ["/", "/index.html", "/manifest.json"];/*** 安装 Service Worker* install事件是 Service Worker 执行的第一个事件，同一个 Service Worker 只会调用一次* 即使 Service Worker 脚本文件只有一个字节不同，浏览器也将视为一个新的 Service Worker*/
self.addEventListener("install", e => {e.waitUntil(caches.open(cacheName).then(cache => {return cache.addAll(cacheFiles);}),);
});/*** 激活 Service Worker* Service Worker 安装成功之后,会触发activate事件* 在这个阶段我们一般做一些清理旧缓存相关的工作*/
self.addEventListener("activate", (e) => {// e.waitUntil(caches.delete(cacheName));e.waitUntil(caches.keys().then((keys) => {return Promise.all(keys.map((key) => {// 清理缓存if (cacheName !== key) {return caches.delete(key);}}));}).then(() => {console.log("cache deleted");}));
});self.addEventListener("fetch", event => {event.respondWith(caches.open(cacheName).then(cache => cache.match(event.request, { ignoreSearch: true })).then(response => {return response || fetch(event.request);}),);
});

注：

  • self: 这是 Service Worker 中特有的全局对象，类似与主线程中的window对象。

  • event.waitUntil: 该函数接受一个Promise对象，它告诉 Service Worker，内部的Promise对象没有resolve之前，缓存工作就还没有完成，安装阶段也就没有完成，并且不应该转移到下一个阶段。

  • caches: CacheStroge对象，它用来控制缓存相关的工作，caches对象的很多方法都是异步的，会返回一个Promise对象，更多详细的API可以参考这里（参考资料 6）。

  • 缓存会保存在cacheName选项下：

在这里插入图片描述

3、编写 index.html

最后一步是在index.html引入即可。

<head>// 引入manifest.json<link rel="manifest" href="/manifest.json" /><script>// serviceWorker// 检查serviceWorker属性是否可用if ("serviceWorker" in navigator) {window.addEventListener("load", function () {navigator.serviceWorker.register("./serviceWorker.js").then(res => console.log("service worker registered")).catch(err => console.log("service worker not registered", err));})}</script>
</head>

注意：

如果serviceWorker.js是注册在域名的根目录下即 /，这意味着我们可以在serviceWorker.js的fetch事件里，捕获到域名下所有的网络请求。换句话说，如果serviceWorker.js文件路径是/module/serviceWorker.js，那么就只能在脚本里处理以/module为开头的网络请求，比如 /module/app.js

4、主动触发安装弹窗（可选）

按照上述的步骤配置好，在浏览器运行后，即可点击浏览器地址栏的安装按钮来触发安装弹窗。也可以通过点击Button来主动触发安装弹窗。

<script>var deferredPrompt = null;// 判断用户是否安装此应用：beforeinstallprompt,如果用户已经安装过了,那么该事件不会再次触发// 需要卸载，然后重新打开浏览器才能再次触发window.addEventListener("beforeinstallprompt", e => {e.preventDefault();deferredPrompt = e;});// 安装完成后触发,即点击安装弹窗中的“安装”后被触发window.addEventListener("appinstalled", () => {deferredPrompt = null;});function addToDesktop() {// 调用prompt()方法触发安装弹窗deferredPrompt.prompt();deferredPrompt = null;}
</script><button onclick="addToDesktop()">点击安装</button>

5、本地调试：使用localhost

本地调试是,使用 localhost访问可以看到效果，如 vue 项目的本地调试地址为：localhost:8080，那么直接访问localhost:8080即可；

注意：使用 127.0.0.1 访问是没有效果的，或者是 host 127.0.0.1 www.abc.com 访问也是没有效果的。换句话来说就是，用域名或者IP访问，需要是HTTPS才行；

6、线上调试：部署到服务器

通过HTTPS访问，等待浏览器加载完页面，可以看到两个地方的入口；

在这里插入图片描述

5、参考链接

  • 如何在 Vue3 中使用 pwa （Chrome）
  • Vue 项目新增 PWA 支持初次尝试

6、踩坑记录

  1. 建议 manifest.json 和 serviceWorker.js 文件放在网站的根目录,否则会出现作用域的问题；
  2. 在Application的manifest.json 出现报错 page does not work offline，可能是因为 serviceWorker.js 中没对fetch进行监听,加上 self.addEventListener('fetch', (e) => {}) 即可；

7、原文 https://www.cnblogs.com/LiangSenCheng/p/16702710.html

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

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

相关文章

Cosmopolitan Libc 工作原理与多平台使用方法教程（x64 Linux / WSL2 / Windows）

Cosmopolitan Libc 工作原理与多平台使用方法教程（x64 Linux / WSL2 / Windows）

⚠️阅读前请注意 本博客适用于Cosmopolitan Libc 3.X版本&#xff0c;不适用于Cosmopolitan Libc 2.X版本。Cosmopolitan Libc 是一个非常年轻的项目&#xff0c;可能存在各种问题。Cosmopolitan Libc 仍处于快速迭代开发之中&#xff0c;本文内容在一定时期内会持续更新。 Co…
阅读更多...
如何使用CANoe进行LINstress测试

如何使用CANoe进行LINstress测试

1.创建Stress测试工程 依次按照1-3的步骤建立工程 4部分&#xff0c;主要是Description of the sample configurations&#xff08;对示例工程的描述&#xff09; 5部分主要是显示示例工程的位置和简单描述 工程打开后如下图所示 重点关注红框标注的地方&#xff0c;重新截一…
阅读更多...
《由浅入深学习SAP财务》：第2章 总账模块 - 2.6 定期处理 - 2.6.5 年末操作：维护新财政年度会计凭证编号范围

《由浅入深学习SAP财务》：第2章 总账模块 - 2.6 定期处理 - 2.6.5 年末操作：维护新财政年度会计凭证编号范围

2.6.5 年末操作&#xff1a;维护新财政年度会计凭证编号范围 财务系统的维护者要在每年年末预先设置好下一年度的会计凭证编号范围&#xff08;number range&#xff09;&#xff0c;以便下一年度会计凭证能够顺利生成。这一操作一定要在下一年度1月1日以前预先完成。 …
阅读更多...
半导体材料（二）——半导体导电特性

半导体材料（二）——半导体导电特性

本篇为西安交通大学本科课程《电气材料基础》的笔记。 本篇为这一单元的第二篇笔记&#xff0c;上一篇传送门。 半导体导电特性 载流子的迁移 外电场下电子和空穴定向位移产生电流。电流密度可写作&#xff1a; J e ( μ n n μ p p ) E σ E Je(\mu_n n\mu_p p)E\sigm…
阅读更多...
行式存储VS列式存储对比

行式存储VS列式存储对比

行式存储&#xff1a; 一行代表一个记录的所有字段。 可以快速读取和写入单条记录。 如果要检索一条数据&#xff0c;数据库会读取or写入整条记录&#xff0c;包含所有相关字段。 列式存储&#xff1a; 表中每一列的数据连续存放。这种方式在需要对某一列进行大量运算或分析时…
阅读更多...
「 典型安全漏洞系列 」14.NoSQL注入漏洞详解

「 典型安全漏洞系列 」14.NoSQL注入漏洞详解

NoSQL注入是一个漏洞&#xff0c;攻击者能够干扰应用程序对NoSQL数据库进行的查询&#xff0c;本文我们将研究如何测试一般的NoSQL漏洞&#xff0c;然后重点研究如何利用MongoDB中的漏洞&#xff08;MongoDB是最流行的NoSQL数据库&#xff09;。 1. 什么是NoSQL注入 NoSQL注入…
阅读更多...
【C++语言】初步认识面向对象编程类和对象（上）

【C++语言】初步认识面向对象编程类和对象（上）

文章目录 前言一.初步认识面向过程和面向对象编程1.面向过程编程初步认识2.面向对象编程初步认识 二.C类1. 类的引入&#xff1a;2. 类的定义3.类的访问限定符&&封装3.1 访问限定符3.2 封装 4.类的实例化5.如何计算类的大小 总结C语言系列学习目录 前言 面向对象编程 类…
阅读更多...
什么数据集成（Data Integration）：如何将业务数据集成到云平台？

什么数据集成（Data Integration）：如何将业务数据集成到云平台？

说到数据集成&#xff08;Data Integration&#xff09;&#xff0c;简单地将所有数据倒入数据湖并不是解决办法。 在这篇文章中&#xff0c;我们将介绍如何轻松集成数据、链接不同来源的数据、将其置于合适的环境中&#xff0c;使其具有相关性并易于使用。 数据集成&#xff1…
阅读更多...
今年消费新潮流：零元购商业模式

今年消费新潮流：零元购商业模式

今天给大家推荐一种极具创新的电子商务模式&#xff1a;零元购商业模式 这个模式支持消费者以零成本或极低成本购买商品。这种模式主要通过返现、积分、优惠券等方式来减少支付金额&#xff0c;使消费者实现“零成本”购物的目标。 人民网在去年发表了一篇文章。 总结了一下&a…
阅读更多...
【基础物理实验】【AFM虚拟实验】基于AFM的物质表面微观结构及力学性质表征仿真实验（上）【北京航空航天大学】

【基础物理实验】【AFM虚拟实验】基于AFM的物质表面微观结构及力学性质表征仿真实验（上）【北京航空航天大学】

基于AFM的物质表面微观结构及力学性质表征仿真实验 说明&#xff1a; 本次实验为本科生《基础物理实验》课程中的虚拟实验部分&#xff0c;在虚拟实验平台中进行。 一、实验目的&#xff1a; 1. 掌握AFM的基本成像原理及系统结构&#xff1b; 2. 掌握AFM的基本操作技巧及操…
阅读更多...
使用 Tranformer 进行概率时间序列预测实战

使用 Tranformer 进行概率时间序列预测实战

使用 Transformers 进行概率时间序列预测实战 通常&#xff0c;经典方法针对数据集中的每个时间序列单独拟合。然而&#xff0c;当处理大量时间序列时&#xff0c;在所有可用时间序列上训练一个“全局”模型是有益的&#xff0c;这使模型能够从许多不同的来源学习潜在的表示。…
阅读更多...
HCIP的学习（9）

HCIP的学习（9）

OSPF的接口网络类型 ​ OSPF的接口在某种网络类型下的工作方式。 网络类型OSPF接口的工作方式BMABroadcast&#xff1b;可以建立多个邻居关系。需要进行DR选举。hello 10S&#xff1b;dead 40S。P2PP2P&#xff1b;只能建立一个邻居关系&#xff0c;不需要进行DR选举。Hello …
阅读更多...
操作系统：进程(二)

操作系统：进程(二)

进程的状态 进程状态反映进程执行过程的变化。这些状态随着进程的执行和外界条件的变化而转换。在三态模型中&#xff0c;进程状态分为三个基本状态&#xff0c;即运行态&#xff0c;就绪态&#xff0c;阻塞态。 一个进程从创建而产生至撤销而消亡的整个生命期间&#xff0c;…
阅读更多...
强化学习-Reinforcement learning | RL

强化学习-Reinforcement learning | RL

目录 什么是强化学习？ 强化学习的应用场景 强化学习的主流算法 强化学习是机器学习的一种学习方式，它跟监督学习、无监督学习是对应的。本文将详细介绍强化学习的基本概念、应用场景和主流的强化学习算法及分类。 什么是强化学习？ 强化学习并不是某一种特定的算法，而是…
阅读更多...
【好书推荐-第十五期】《 机器学习基础：从入门到求职》(博文视点出品)

【好书推荐-第十五期】《 机器学习基础：从入门到求职》(博文视点出品)

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公众号&#xff1a;洲与AI。 &#x1f388; 本文专栏&#xff1a;本文收录…
阅读更多...
python 重载内置函数吗

python 重载内置函数吗

python中是不支持函数重载的&#xff0c;但在python3中提供了这么一个装饰器functools.singledispatch&#xff0c;它叫做单分派泛函数&#xff0c;可以通过它来完成python中函数的重载&#xff0c;让同一个函数支持不同的函数类型&#xff0c;它提供的目的也正是为了解决函数重…
阅读更多...
Problem #8 [Easy]

Problem #8 [Easy]

This problem was asked by Google. A unival tree (which stands for “universal value”) is a tree where all nodes under it have the same value. Given the root to a binary tree, count the number of unival subtrees. For example, the following tree has 5 un…
阅读更多...
osg渲染过程

osg渲染过程

目录 1、渲染最简单代码 2、详解run方法 3、详细过程 4、回调函数 5、Node Visitor 1、渲染最简单代码 2、详解run方法 3、详细过程 3.1 advance()方法 进行帧计数 3.2 eventTraversal() eventTraversal()响应用户操作,eventTraversal()遍历的是事件队列&#xff0c;而…
阅读更多...
小型时间继电器ST3PA-C DC24V 带插座PF085A 导轨安装 JOSEF约瑟

小型时间继电器ST3PA-C DC24V 带插座PF085A 导轨安装 JOSEF约瑟

ST3P系列时间继电器 系列型号 ST3PF-2Z(JSZ3F-2Z) 5s AC110V ST3PF(JSZ3F) 10s AC48V ST3PC-1(AH3-3) 5s DC24V ST3PC-1(AH3-3) 2h AC220V ST3PC-F(JSZ3C-F) AC380V ST3PA-E(JSZ3A-E) DC24V ST3PA-F(JSZ3A-F) DC24V ST3PF(JSZ3F) 10s AC36V ST3PC-1(AH3-3) 10s AC24V ST3PC-1…
阅读更多...
OpenHarmony开发实例：【分布式游戏鉴权应用】

OpenHarmony开发实例：【分布式游戏鉴权应用】

1.介绍 本文将介绍分布式游戏鉴权应用。操作过程为&#xff1a; 设备A点击“开始游戏”按钮&#xff0c;开始搜索周边设备。 设备A显示周边设备&#xff0c;点击设备B并发起连接请求&#xff0c;远程拉起设备B的FA。 设备B收到请求后&#xff0c;选择是否允许“开启游戏”。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023