网站添加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…
阅读更多...
【Java】HOT100 链表

【Java】HOT100 链表

代码随想录的链表题在这里&#xff1a; 链表1、链表2做过总结 目录 HOT 100&#xff1a;链表 LeetCode160&#xff1a;相交链表 LeetCode206&#xff1a;反转链表 LeetCode206&#xff1a;回文链表 LeetCode141&#xff1a;环形链表 LeetCode142&#xff1a;环形链表ii …
阅读更多...
mixins

mixins

mixins Mixins的基本概念: 什么是mixins&#xff0c;它们用于解决什么问题&#xff1f; Mixins是Vue.js的一个功能&#xff0c;允许你创建可重用的代码片段&#xff0c;包括数据、生命周期钩子、方法、计算属性等&#xff0c;可以混入到单个Vue组件中。它们用于解决代码重用和…
阅读更多...
大数据概述：大数据时代的发展与挑战

大数据概述：大数据时代的发展与挑战

随着互联网、物联网、云计算等技术的飞速发展&#xff0c;大数据作为一种新兴产业&#xff0c;已经渗透到了各个领域。大数据时代&#xff0c;带来了前所未有的发展机遇&#xff0c;也带来了诸多挑战。本文将从大数据的概念、大数据的影响、大数据的应用、大数据关键技术、大数…
阅读更多...
如何使用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日以前预先完成。 …
阅读更多...
vue 组件通信的几种方法

vue 组件通信的几种方法

vue是js一个非常热门的框架&#xff0c;组件之间的通信是vue基础也是重要的一部分。 1.props, 可以实现父子组件通信&#xff0c;但其数据是只读&#xff0c;不可修改 &#xff08;使用child之前需先接受一下&#xff0c;已下同理&#xff09; //父组件 <script setup la…
阅读更多...
C++中STL迭代器如何使用

C++中STL迭代器如何使用

1.概念 迭代器是一种检查容器内元素并遍历元素的数据类型。 C 更趋向于使用迭代器而不是下标操作&#xff0c;因为标准库为每一种标准容器&#xff08;如vector &#xff09;定义了一种迭代器类型&#xff0c;而只用少数容器&#xff08;如 vector &#xff09;支持下标 操作访…
阅读更多...
半导体材料（二）——半导体导电特性

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

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

Swift中的运算符

Swift中的运算符可以分为以下几种&#xff1a; 算术运算符&#xff1a;用于执行基本的数学运算&#xff0c;如加法&#xff08;&#xff09;、减法&#xff08;-&#xff09;、乘法&#xff08;*&#xff09;、除法&#xff08;/&#xff09;和取余&#xff08;%&#xff09;等…
阅读更多...
行式存储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语言系列学习目录 前言 面向对象编程 类…
阅读更多...
linux服务器配置conda和torch环境踩坑记录

linux服务器配置conda和torch环境踩坑记录

anaconda环境安装torch时候报错 CondaValueError: Malformed version string ~: invalid character(s) 网上所有方法都试过，包括重新设置.condarc文件，换清华源 尝试更新conda conda update -n base conda,无法更新，还是报错上面的错 推测是版本过低导致 conda --version ,结…
阅读更多...
什么数据集成（Data Integration）：如何将业务数据集成到云平台？

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

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

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

今天给大家推荐一种极具创新的电子商务模式&#xff1a;零元购商业模式 这个模式支持消费者以零成本或极低成本购买商品。这种模式主要通过返现、积分、优惠券等方式来减少支付金额&#xff0c;使消费者实现“零成本”购物的目标。 人民网在去年发表了一篇文章。 总结了一下&a…
阅读更多...
设计模式学习笔记（知识点与代码实践）

设计模式学习笔记（知识点与代码实践）

文章目录 0 背景1 设计模式 0 背景 设计模式其实很早就想学习了&#xff0c;但是由于懒 &#xff0c;所以一直拖到现在。之前写项目也接触过一些零散的设计模型&#xff0c;却一直没有系统的学习过&#xff0c;这次就是系统的学习这方面的知识。 本文就是学习心得和代码实践的…
阅读更多...
【基础物理实验】【AFM虚拟实验】基于AFM的物质表面微观结构及力学性质表征仿真实验（上）【北京航空航天大学】

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

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

stable diffusion本地部署教程

Stable Diffusion是一种生成模型&#xff0c;用于根据给定的文本输入生成图像。要在本地部署Stable Diffusion&#xff0c;您需要完成以下步骤&#xff1a; 安装依赖项 首先&#xff0c;确保您的计算机上已安装了Python&#xff08;推荐使用3.8或更高版本&#xff09;和pip。然…
阅读更多...
EDA重新成为热点，中国正在成为参与者

EDA重新成为热点，中国正在成为参与者

EDA正在从一个沉淀已久的领域转变为一个热门的市场&#xff0c;这得益于市场中对定制设计的呼声&#xff0c;以及人工智能等先进技术的推出&#xff0c;这些工具将需要开发具有更高性能的芯片架构。 因为市场更需要定制芯片&#xff0c;这意味着更多的芯片设计工作正在发生&…
阅读更多...
最新文章

Copyright @ 2022~2023