初识 PWA
要完整介绍 PWA 是什么，需要扯一堆名词，毫无意义。
以改造公羊阅读的过程为例，简要的说明什么是 PWA。
公羊阅读是个网站，将它改造成 PWA 应用之后，在谷歌浏览器上点击右上角三个小点点，可以看到安装按钮。
（没有改造成 PWA 的网站是看不到安装按钮的~~）
图1
点击安装，完成后会发现生成了桌面应用图标，像原生 App 一样点击一下图标即可进入。
图2
PWA 不只是改变 Web 网站的入口，点击进入应用，可以看到没有浏览器中的地址栏，看起来就跟原生应用一毛一样。
图3
在谷歌浏览器中输入 chrome://apps 可以查看安装了哪些 PWA 应用，选择应用，右键可以卸载该应用。
图4
移动端也是一样的，在手机浏览器上访问公羊阅读的网址：https://novel.dkvirus.top ，在网页最下方可以看到提示框："将公羊阅读添加到主屏幕"，点击即可添加到桌面。
图5
注意：移动端并不是所有机型都支持添加到桌面功能。
- 360N6 手机就不支持，
- IPhone XR 可以支持添加到主屏幕。
身边测试手机机型有限，欢迎给我发邮件说明你的测试结果 me@dkvirus.com。
将网站改造成 PWA 应用
这部分从头介绍如何将一个网站改造成 PWA 应用。
搭建一个网站
PWA 要求一：网址必须是 https 协议，或者域名是 localhost。
本地测试只要保证访问域名是 localhost 即可，创建一个网页 index.html，然后部署到 nginx 服务器上，通过 localhost 访问 index.html。
不了解 Web 服务器的参考：图解 Web 服务器
创建 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PWA DEMO</title>
</head>
<body>
<h1>将网站改造成 pwa 应用</h1>
</body>
</html>
manifest.json
PWA 要求2：包含 manifest.json 中关键字段：short_name/name、icons、start_url、display；
manifest.json 定义了Web 应用的参数，比如：Web 应用叫什么名字、Web 应用的图标是啥等等。
在 index.html 同级目录下创建 manifest.json 文件
{
"name": "测试PWA",
"start_url": "/index.html",
"display": "standalone",
"icons": [
{
"src": "logo.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
属性说明：
- name 安装应用的名称，比如上面👆的
公羊阅读； - start_url 点击图标进入应用，访问的第一个页面；
- display 有三个值 fullscreen(全屏展示)、standalone(不包含浏览器的地址栏)、minimal-ui；
- icons 应用的图标，自己找个图标命名为 logo.png 放在根目录下即可。
在 index.html 的 header 属性中引入 manifest.json 文件
// index.html
<head>
// ......
<link rel="manifest" href="manifest.json">
</head>
sw.js
PWA 要求三：注册 Service Worker 并且监听 fetch 事件；
Service Worker 是 PWA 的另外一个知识点，主要用来做缓存，这里不多介绍。
在 index.html 同级目录下创建 sw.js 文件（sw 是 service worker 的首字母拼接），监听 fetch 事件。
self.addEventListener('fetch', function (evt) {
console.log('sw fetch() 发送的请求', evt.request.url)
})
在 index.html 中注册 sw.js
<body>
<h1>将网站改造成 pwa 应用</h1>
<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>
验证结果
启动 nginx 服务器，访问网址，浏览器右上角三个点点可以找到安装按钮。
图6
如果没有安装按钮，请检查是否符合上述介绍的三个要求，亦或是您已经安装过 Web 应用，也不会出现安装按钮。
网友评论