前言
虽然个人有个人的习惯，但我想作为程序猿或者相关使用电脑的人员来说，默认Chrome应该不夸张吧...
当然也不是非要Chrome。移动端等也可以。
这篇文章将快速的讲解把网站应用化，达到手机打开网页会提示：将“该网站”添加到主屏幕。
【更新】
在使用了一段时间Mac后，我突然想起这篇文章来，当时写的时候因为我的缺点，以及也不屑进入苹果生态，所以干脆就忽略了Mac。果然人总是会长大...没想过终有一日我也会...
那么废话不多嗦，Safari自然是有程序坞可以使用，相较于Chrome，Mac的网页app那自然是更加好用。图片放在最下方
PWA
关于PWA是什么，有什么好处，百度可以搜到太多太多
我就直接进行一个干货的讲
注：有一些平台还是不能够使用PWA应用的
网站要求
必须是https协议。
如果你的网站已经可以正常在互联网上浏览了，那么你就应该晓得SSL。不晓得也可自己去查...所以这里我也不多废话。
如果是本地自己测试的话，就可以是localhost。（废话就和数据库一样，在本地自己给自己捣鼓还怕个毛...）
正题
分为两部分，足够简单
就好比要安装一个app、软件、应用程序。
1. manifest.json
一个应用程序的话，从安装开始就要知道名字、图标等参数吧
manifest.json就定义了Web引用的参数。
{
"name": "收心～掌控翻涌波涛神者心境！",
"start_url": "/index.html",
"display": "standalone",
"icons": [
{
"src": "logo.png",
"sizes": "192x192",
"type": "image/png"
}
]
}你需要在你的网站根目录，也就是index.html同级目录下创建manifest.json文件。
主要参数
name：应用名称。注意如果编码格式，中文的话应该使用utf8。start_url：首页。进入应用后访问的第一个页面。display：有3种类型可以选择。fullscreen、standalone、minimal-ui。icons：就是图标logo。自己找喽，也放在一起。
引入
将manifest.json引入到header代码块
那肯定的呀，不然怎么用呢？
<head>
//...
<link rel="manifest" href="manifest.json">
</head>注意了，网站所使用的header不一定在index.html中。
如果你的博客和我一样使用了主题皮肤什么的，需要找到你的header文件，在里面写下代码。如果不懂的话，文章最后有演示视频可以观看。
2. sw.js
Service Worker主要用来做缓存，我们需要一个sw.js文件来监听fetch事件。
依然是网站根目录下
self.addEventListener('fetch', function (evt) {
console.log('sw fetch() 发送的请求', evt.request.url)
})引入
在index.html中
<body>
<script>
//判断浏览器是否支持service worker
if ('serviceWorker' in navigator) {
//load事件完成之后才注册service worker
window.addEventListener('load', function () {
//注册sw.js
navigator.serviceWorker.register('/sw.js')
.then(function (registration) {
//注册成功
console.log('sw.js 注册成功', registration.scope);
})
.catch(function (err) {
//注册失败:(
console.log('sw.js 注册失败 ', err);
});
});
}
</script>
</body>3. 注意
如果没有出现安装或相似按钮的话
- 首先，检查你的浏览器是否支持
- 文件位置和引入
header位置是否正确 - 是否已经安装过Web引用
- 检查步骤有错吗，代码有错吗
4.【更新】苹果生态
在第一步中，我们添加了一些信息并引入到了header代码块
<head>
//...
<link rel="manifest" href="manifest.json">
</head>苹果生态就很简单，在iOS上Safari显示为添加到主屏幕，在Mac上则是添加到程序坞。只需1行代码引入即可
<link rel="apple-touch-icon" href="/512logo.png">注意，在iOS上不同的型号有一些差距，不过无所屌谓，统一使用==512px无透明png==
我试过带透明通道的图片，会自动添加底色并缩放留外圈
或许有其他方式能够保持透明不缩放，我就不思索了，可以直接问问AI
关键点视频
结果
【更新】添加到程序坞后，再使用Safari打开就会提示：在网页 App 中打开
右边被挡着的是 打开 的按钮
在程序坞中我们设置的图标会自动识别，注意格式，以上是我用有透明通道的格式所显示的，以下则是我添加底色后显示的
整体图如下，配合上Mac好用的触控，刷起来是很舒服
小头图版权：
