2022 年了,还不了解 PWA ? 教你 VuePress 博客如何快速兼容 PWA
前言
在 《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档。
本篇我们讲讲如何兼容 PWA。
PWA
PWA,英文全称:Progressive Web Apps
, 中文翻译:渐进式 Web 应用。
引用 MDN 的介绍:
PWA 指的是使用指定技术和标准模式来开发的 Web 应用,这同时赋予它们 Web 应用和原生应用的特性。
例如一方面,Web 应用更加易于发现:相比于安装应用,访问一个网站显然更加容易和迅速。你还可以通过链接来分享 Web 应用。
另一方面,原生应用与操作系统可以更加完美的整合,也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行;相较于使用浏览器访问,用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。
PWA 赋予了我们创建同时拥有以上两种优势的应用的能力。
体验
如果你之前没有了解过 PWA,大概率可能也不明白这是个什么效果,没有关系,我们直接看一个 PWA 应用示例,我们打开 https://m.weibo.cn/,这里是在电脑端打开的:
我们可以看到,在地址栏还有一个安装图标,点击一下,就会弹出安装应用的选项框:
我们点击安装后,该页面会自动关闭,然后开启一个应用窗口:
同时,打开 Mac 的启动台,我们会看到已经添加了微博的图标:
点击就会直接打开上面的应用窗口。
简单的来说,我们兼容 PWA,就是想要实现这样的桌面图标的功能,当然了, PWA 其他还有离线缓存、推送通知等功能,这里就不多说了。
开启 PWA
开启 PWA,需要注意三个点:
- 提供一个 manifest.json 文件,描述应用的名称、图标等信息
- 开启 Service Worker,这个交给现有的 PWA 插件来实现
- 开启 HTTPS
实践
1. 安装
插件地址:https://v1.vuepress.vuejs.org/zh/plugin/official/plugin-pwa.html
yarn add -D @vuepress/plugin-pwa
# OR npm install -D @vuepress/plugin-pwa
2. 修改 config.js
module.exports = {
head: [
['link', { rel: 'icon', href: '/logo.png' }],
['link', { rel: 'manifest', href: '/manifest.json' }],
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
['meta', { name: 'msapplication-TileColor', content: '#000000' }]
],
plugins: [
[
'@vuepress/pwa',
{
serviceWorker: true,
updatePopup: {
message: "发现新内容可用",
buttonText: "刷新"
}
}
]
]
}
3. 添加 manifest.json 等资源
接下来我们添加所需要的资源,在 .vuepress
目录下建立 public
文件夹,然后添加所需要的文件如 manifest.json
文件:
{
"name": "TypeScript中文文档",
"short_name": "TypeScriptDocs",
"display": "standalone",
"background_color": "#fff",
"start_url": "/learn-typescript-test/",
"scope": "/learn-typescript-test/",
"description": "TypeScript 中文文档 进阶教程",
"icons": [{
"src": "logo52.png",
"sizes": "52x52",
"type": "image/png"
},{
"src": "logo288.png",
"sizes": "288x288",
"type": "image/png"
}]
}
这其中字段的具体含义,可以查看 MDN 的 Manifest 介绍。
要注意其中的 start_url
和scope
,如果你使用的是 GitHub 或者 Gitee 仓库的 Pages 服务,并且地址上带了仓库名,你需要将这里的learn-typescript-test
替换为你的仓库名,如果是直接的域名,start_url 写成 \
,scope
写成 .
或者直接不写。
然后是补齐所需要的图标图片:
4. 部署生产环境测试
虽然我们在上篇《VuePress 博客如何开启本地 HTTPS 访问》 讲了如何在本地开启 HTTPS,但是因为我们使用的这个插件只有在生产环境才会开启 Service Worker:
所以呢,我们部署到线上看一下效果,如果顺利的话,你就会看到地址栏上也出现了安装图标:
常见问题
但如果没有显示该图标,我们可以查看开发者工具里的「应用」 -「清单」,其中会显示出现的错误:
根据这里的报错进行排查。
如果出现了可安装性中的:
为检测到任何匹配的 service worker。您可能需要重新加载页面,或者检查当前页面的 service worker 是否也控制了清单错误中的起始 URL。
这也有可能是因为你的 start_url
和 scope
设置的有问题。
正常安装后,如果打开应用发现背景色是 Vue 绿色,比如这种:
这是因为你忘记修改 config.js 里的背景色了:
系列文章
博客搭建系列是我至今写的唯一一个偏实战的系列教程,预计 20 篇左右,讲解如何使用 VuePress 搭建、优化博客,并部署到 GitHub、Gitee、私有服务器等平台。本篇为第 23 篇,全系列文章地址:https://github.com/mqyqingfeng/Blog
微信:「mqyqingfeng」,加我进冴羽唯一的读者群。
如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。
2022 年了,还不了解 PWA ? 教你 VuePress 博客如何快速兼容 PWA的更多相关文章
- Understand:高效代码静态分析神器详解(一) | 墨香博客 http://www.codemx.cn/2016/04/30/Understand01/
Understand:高效代码静态分析神器详解(一) | 墨香博客 http://www.codemx.cn/2016/04/30/Understand01/ ===== 之前用Windows系统,一 ...
- 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入
使用react全家桶制作博客后台管理系统 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...
- 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)
备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...
- iOS中 HTTP/Socket/TCP/IP通信协议详解 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 简单介绍: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 ...
- GCC参数详解-(转自:篱笆博客)
gcc and g++分别是gnu的c & c++编译器 gcc/g++在执行编译工作的时候,总共需要4步 1.预处理,生成.i的文件[预处理器cpp] 2.将预处理后的文件不转换成汇编语言, ...
- iOS中 CoreGraphics快速绘图(详解) 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 第一步:先科普一下基础知识: Core Graphics是基于C的API,可以用于一切绘图操作 Core Graph ...
- iOS中 最新微信支付/最全的微信支付教程详解 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博! 亲们, 首先让我们来看一下微信支付的流程吧. 1. 注册微信开放平台,创建应用获取appid,appSecret, ...
- iOS中 语音识别功能/语音转文字教程详解 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 原文地址:http://blog.csdn.net/qq_31810357/article/details/5111 ...
- iOS中 本地通知/本地通知详解 韩俊强的博客
布局如下:(重点讲本地通知) iOS开发者交流QQ群: 446310206 每日更新关注:http://weibo.com/hanjunqiang 新浪微博 Notification是智能手机应用编 ...
随机推荐
- linux内核可以接受的参数 | Linux kernel启动参数 | 通过grub给内核传递参数
在Linux中,给kernel传递参数以控制其行为总共有三种方法: 1.build kernel之时的各个configuration选项. 2.当kernel启动之时,可以参数在kernel被GRUB ...
- 抽象类,interface接口,接口和继承的区别
一.抽象类 需要抽象类的原因:父类方法不确定性的问题.考虑将该方法设计为抽象(abstract)方法所谓抽象方法就是没有实现的方法.所谓没有实现就是指,没有方法体.当一个类中存在抽象方法时,需要将该类 ...
- 1、Linux基础--相关软件安装与网络配置
1.虚拟机(VM安装) 2.网络配置 3.Linux操作系统安装 4.xshell安装
- Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- 面向对象—多态、鸭子类型(Day21)
编程原则java具有自己的编程原则和设计模式,不能多继承.python的编程原则:1.开放封闭原则:开放是对扩展是开放的,封闭是对修改是封闭的(已经写完的代码程序是不能修改的).2.依赖倒置原则:高层 ...
- Hyperledger Fabric 2.x 动态更新智能合约
一.说明 在上一篇文章中分享了智能合约的安装与使用,如果业务有变更代码需要修改怎么办呢?本文分享如何对已安装的合约进行版本更新. 二.环境准备 区块链网络安装:<Hyperledger Fabr ...
- 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...
- [Unity] 编辑器运行中动态编译执行C#代码
(一)问题 之前写Lua时,修改完代码 reload 就可以热重载代码,调试起来十分方便(重构则十分痛苦). 现在使用 C# 做开发,目前还没找到比较方便地进行热重载的方式.只能退而求其次,在调试上找 ...
- RENIX操作之XML报文模板说明——网络测试仪实操
我们在网络测试仪的日常使用过程中,经常涉及到编辑和修改报文.利用RENIX软件,可以把当前编辑好的报文模板导出为XML文件,下次使用时可以直接导入使用,从而提升测试工作效率.本文以"添加UD ...
- DBCHM -最简单、最实用的数据库文档生成工具
项目介绍 DBCHM 是一款数据库文档生成工具! 该工具从最初支持chm文档格式开始,通过开源,集思广益,不断改进,又陆续支持word.excel.pdf.html.xml.markdown等文档格式 ...