我是少數派的一個讀者，成為少數派已經 419 天。
從少數派裡面學到了很多東西，也豐富了自己的眼界，所以少數派 APP 也是我手機上的常用應用之一，在去年將手機換成了 Android 後，發現到現在為止 Android 的 APP 已經很久沒有更新過了，Android 客戶端一直處於一個 “年久失修” 的狀態，反倒是 IOS 的一直在更新迭代，更新了 UI 以及一些新的功能，這讓我十分眼紅。
但是在少數派 3 月 31 號發布的文章中，他們為 Android 客戶端做出了一個解釋，並且提出了一個更優解。
繼去年少數派網站改版升級後，更符合新版設計的少數派 iOS 客戶端 2.0 也在不久前正式上線。可惜由於開發能力實在有限，Android 平台繁雜的機型適配和兼容性問題也著實令人頭疼，少數派的 Android 客戶端此前一直處於「年久失修」的狀態。
好在少數派最終為 Android 客戶端找到了個「更優解」—— 漸進式網頁應用（以下簡稱 PWA）。在保證內容呈現完整的前提下，PWA 有著比客戶端應用更輕量、比網頁版功能更強大的全新體驗，同時還能兼容 Android、iOS 甚至 Windows 等多個平台。
關於 PWA 這個概念我是第一次知道，抱著新奇的態度開始 Google……
關於 PWA#
PWA 是 Google 於 2016 年提出的概念，於 2017 年正式落地，於 2018 年迎來重大突破，全球頂級的瀏覽器廠商，Google、Microsoft、Apple 已經全數宣布支持 PWA 技術。
PWA 全稱為 Progressive Web App，中文譯為漸進式 Web APP，其目的是通過各種 Web 技術實現與原生 App 相近的用戶體驗。
縱觀現有 Web 應用與原生應用的對比差距，如離線緩存、沉浸式體驗等等，可以通過已經實現的 Web 技術去彌補這些差距，最終達到與原生應用相近的用戶體驗效果。
好吧說完上面的官方發言，地道一點說下我自己的體驗，就是一個 Web 頁面拿掉了瀏覽器的殼子，以一個近似 app 的形式存在手機桌面，與一般的將網頁添加到桌面不同，它還有本地通知的能力以及一個緩存的能力，除此以外它可以兼容 Android、IOS 以及 Windows 多個平台，對我來說它在打開的時候還有一個頁面 logo 閃屏，很有吸引力。
將自己的博客變成 PWA#
在體驗過少數派的 PWA後，我萌生了能否把自己的博客變成 PWA 的想法，在網上查詢了資料後發現入門意外的簡單，接下來說說我自己的操作。
添加 manifest.json#
這裡新建一個 manifest.json 文件，主要是配置應用圖標以及名稱等信息，然後這裡分享下我的配置，具體的配置介紹可以參考下MDN。
{
"dir": "ltr", //指定名稱、短名稱和描述成員的主文本方向
"lang": "zh-cn", //語言
"name": "Magren's Blog", //名字
"short_name": "Magren's Blog", //短名稱
"theme_color": "##ffffff", //主題顏色
"background_color": "##d4d4d4", //啟動時閃屏的背景顏色
"display": "standalone", //定義開發人員對Web應用程序的首選顯示模式。
"start_url": "./index.html", //開始加載的url
"icons": [ //程序圖標
{
"src": "avatar152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "avatar192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "avatar384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "avatar512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
接著就要在我們的 HTML 文件中引入啦，如果你也是博客的話就去翻翻你的主題文件夾，在裡面找下吧。
<link rel="manifest" href="manifest.json" />
添加 Service Worker#
這個 API 是用來實現頁面緩存和離線，還有後台通知，不過因為這就是我的一個個人博客，所以我沒有加上通知的功能。
首先判斷瀏覽器是否支持 serviceWorker，如果支持則調用函數來註冊站點的 service worker，service worker 只是個駐留在我們的 app 內的個 JavaScript 文件。
在 html 的頁面下加上：
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js', {scope: '/'})
.then(function (registration) {
// 註冊成功
console.log('ServiceWorker registration successful');
})
.catch(function (err) {
// 註冊失敗:(
console.log('ServiceWorker registration failed');
});
});
}
</script>
接著是 sw.js，即我們的 serviceWorker，這裡可以定義需要緩存的路徑，以及需要緩存的靜態文件的列表，這個列表也可以通過 Webpack 插件生成，我這裡就只緩存了首頁。
//監聽service worker事件
self.addEventListener('install', function (event) {
var homePage = new Request('index.html');
event.waitUntil(
//請求首頁並將首頁存入緩存
fetch(homePage).then(function (response) {
//建立cache-homePage緩存
return caches.open('cache-homePage').then(function (cache) {
return cache.put(homePage, response);
});
}));
});
//請求頁面
self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request).catch(function (error) {
//請求失敗，從緩存中讀取緩存的頁面
return caches.open('cache-homePage').then(function (cache) {
return cache.match('index.html');
});
}));
});
//刷新首頁
self.addEventListener('refreshHomePage', function (response) {
return caches.open('cache-homePage').then(function (cache) {
//將刷新後的頁面緩存
return cache.put(offlinePage, response);
});
});
最後#
最後說說如何使用 pwa 吧，在手機上，只需通過支持的瀏覽器（如 Chrome 以及小米自帶的瀏覽器）訪問 PWA 頁面地址，Chrome 會在加載完頁面後彈出添加頁面的提示，如果沒有的話（如 IOS 的 Safari），需要手動點擊瀏覽器的更多，然後直接添加到桌面上即可。
PC 端的話 Chrome 的右上角（網頁鏈接的最右端）有一個下載按鈕，點擊後就會添加到電腦桌面。如果要卸載的話只是刪除電腦桌面的快捷方式是不可以的，需要打開來然後在 PWA 頁面的上方點擊卸載按鈕。