初識 PWA
要完整介紹 PWA 是什么，需要扯一堆名詞，毫無意義。
以改造公羊閱讀的過程為例，簡要的說明什么是 PWA。
公羊閱讀是個網(wǎng)站，將它改造成 PWA 應(yīng)用之后，在谷歌瀏覽器上點擊右上角三個小點點，可以看到安裝按鈕。
（沒有改造成 PWA 的網(wǎng)站是看不到安裝按鈕的~~）
點擊安裝，完成后會發(fā)現(xiàn)生成了桌面應(yīng)用圖標，像原生 App 一樣點擊一下圖標即可進入。
PWA 不只是改變 Web 網(wǎng)站的入口，點擊進入應(yīng)用，可以看到?jīng)]有瀏覽器中的地址欄，看起來就跟原生應(yīng)用一毛一樣。
在谷歌瀏覽器中輸入 chrome://apps 可以查看安裝了哪些 PWA 應(yīng)用，選擇應(yīng)用，右鍵可以卸載該應(yīng)用。
移動端也是一樣的，在手機瀏覽器上訪問公羊閱讀的網(wǎng)址：https://novel.dkvirus.top ，在網(wǎng)頁最下方可以看到提示框："將公羊閱讀添加到主屏幕"，點擊即可添加到桌面。
注意：移動端并不是所有機型都支持添加到桌面功能。
- 360N6 手機就不支持，
- IPhone XR 可以支持添加到主屏幕。
身邊測試手機機型有限，歡迎給我發(fā)郵件說明你的測試結(jié)果 me@dkvirus.com。
將網(wǎng)站改造成 PWA 應(yīng)用
這部分從頭介紹如何將一個網(wǎng)站改造成 PWA 應(yīng)用。
搭建一個網(wǎng)站
PWA 要求一：網(wǎng)址必須是 https 協(xié)議，或者域名是 localhost。
本地測試只要保證訪問域名是 localhost 即可，創(chuàng)建一個網(wǎng)頁 index.html，然后部署到 nginx 服務(wù)器上，通過 localhost 訪問 index.html。
不了解 Web 服務(wù)器的參考：圖解 Web 服務(wù)器
創(chuàng)建 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>將網(wǎng)站改造成 pwa 應(yīng)用</h1>
</body>
</html>
manifest.json
PWA 要求2：包含 manifest.json 中關(guān)鍵字段：short_name/name、icons、start_url、display；
manifest.json 定義了Web 應(yīng)用的參數(shù)，比如：Web 應(yīng)用叫什么名字、Web 應(yīng)用的圖標是啥等等。
在 index.html 同級目錄下創(chuàng)建 manifest.json 文件
{
"name": "測試PWA",
"start_url": "/index.html",
"display": "standalone",
"icons": [
{
"src": "logo.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
屬性說明：
- name 安裝應(yīng)用的名稱，比如上面??的
公羊閱讀； - start_url 點擊圖標進入應(yīng)用，訪問的第一個頁面；
- display 有三個值 fullscreen(全屏展示)、standalone(不包含瀏覽器的地址欄)、minimal-ui；
- icons 應(yīng)用的圖標，自己找個圖標命名為 logo.png 放在根目錄下即可。
在 index.html 的 header 屬性中引入 manifest.json 文件
// index.html
<head>
// ......
<link rel="manifest" href="manifest.json">
</head>
sw.js
PWA 要求三：注冊 Service Worker 并且監(jiān)聽 fetch 事件；
Service Worker 是 PWA 的另外一個知識點，主要用來做緩存，這里不多介紹。
在 index.html 同級目錄下創(chuàng)建 sw.js 文件（sw 是 service worker 的首字母拼接），監(jiān)聽 fetch 事件。
self.addEventListener('fetch', function (evt) {
console.log('sw fetch() 發(fā)送的請求', evt.request.url)
})
在 index.html 中注冊 sw.js
<body>
<h1>將網(wǎng)站改造成 pwa 應(yīng)用</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>
驗證結(jié)果
啟動 nginx 服務(wù)器，訪問網(wǎng)址，瀏覽器右上角三個點點可以找到安裝按鈕。
如果沒有安裝按鈕，請檢查是否符合上述介紹的三個要求，亦或是您已經(jīng)安裝過 Web 應(yīng)用，也不會出現(xiàn)安裝按鈕。
