PWA（Progressive Web Apps）雖然是網頁應用，但是可以帶來媲美原生的用戶體驗，其中包含離線可用，後臺推送等功能。PWA 不是一個新名詞，早在 2015 年已經開始提出這個思想並明明，但是直到 iOS12 發佈，PWA 終於可以在 iOS 中添加到主屏，只有安卓和 iOS 都能使用 PWA 的基本功能，它纔算是真的開始走近大衆。想了解 PWA，可以看看百度的 LAVAS 官網，在國內網站中 LAVAS 官網會有比較完整的 PWA 資料。
本文可以提前讓大家熟悉 PWA 搭建，文中提到的配置來自一個 Redesign 的 nipponcolors，最近才做好的，使用的各種庫都是現在（2018.09.14）最新的，可用的，另外本文不討論應用功能，單純講講 PWA 的搭建。
倉庫地址：https://github.com/ssshooter/...
網頁地址：https://ssshooter.github.io/n...
搭建
使用 Vue-cli3
Vue-cli3 與 2 的區別挺大的，3 默認搭建工程並非像 2 一樣拉取模板，而是自己選擇需要的 feature 生成項目。
要生成 PWA 項目請勾上 PWA Support
Vue-cli3 的一個關於 HMR 的已知問題
Issue 地址
假設大家都知道 HMR（熱模塊更新）是什麼了，vue-cli3 的某些版本可能會有這麼一個問題，HMR 無法使用，控制檯就一直顯示 waiting 連接，文件一改直接顯示連接斷開。解決方案有二：
- 如果你的依賴使用 cnpm 安裝，嘗試刪掉
node_modules後使用 npm 下載。 -
在
vue.config.js作以下配置chainWebpack: config => { config.resolve.symlinks(true) return config },
值得注意的配置
eslint 配置
在這裏首先推薦一下尾逗號，加上尾逗號的好處只有一個，但真的十分重要，那就是 diff 會非常好看。然後 eslint-plugin-vue 插件是一些預設規則組合，分 base，essential，strongly-recommended，recommended 四級，請自由選擇，沒有最好的搭配，只要用得舒服就好，團隊合作還是非常推薦定好 eslint 規則，使用盡量詳細的同一套規則，在代碼合併時感覺會非常爽快。
設置 eslint 後建議配置開發服務器的 overlay 選項，在 eslint 報錯時會覆蓋在頁面上，時刻提醒你寫代碼得有信條。
devServer: {
overlay: {
warnings: true,
errors: true,
},
},資源優化
圖片
vue-cli3 搭建的工程沒有自帶圖片優化插件，所以請自行安裝。有更好的圖片壓縮插件求推薦啦，這裏使用的是 imagemin-webpack-plugin，基本配置如下：
var ImageminPlugin = require('imagemin-webpack-plugin').default
// Or if using ES2015:
// import ImageminPlugin from 'imagemin-webpack-plugin'
module.exports = {
plugins: [
// Make sure that the plugin is after any plugins that add images
new ImageminPlugin({
disable: process.env.NODE_ENV !== 'production', // Disable during development
pngquant: {
quality: '95-100'
}
})
]
}字體
對於中文站點，字體問題可是個大問題，因爲中文字體實在太太太太大了，隨隨便便一個都 10m 了，等待這東西下載真的給用戶體驗帶來致命打擊，但是！但是！有這麼一個程序！
font-spider-plus
之前一直知道 font-spider，它的功能是獲取使用到的字體，然後分析出使用了改字體的字符，最後把字符抽離出來。這大大減少了中文字體的體積，但是缺不能用於 js 渲染的網頁，後來才找到 font-spider-plus，雖然要手動操作一下（最簡單的方法：發佈網頁之後用 fsp 把用到的字爬出來），但是得到的優化真的很大哦！
響應式設計
PWA 給了我們一個很簡單的跨平臺方法，不只有移動端可以添加到首屏，PC 端也同樣可以，所以響應式設計對 PWA 可以說是必須的。
PC 端的添加方法在 F12 裏，至於更加方便的方法...好像是要改 flag 才能用，那麼也談不上多方便了，所以不介紹了，等到此項技術更加成熟，想必這個按鈕就會出現在顯眼的位置 😂
PWA 專屬問題
建議使用 LightHouse 給你的 PWA 評分，報告中還會帶有修改建議，十分實用。
manifest.json
PWA 添加至桌面的功能實現依賴於 manifest.json。這個文件結構很簡單，填寫對應字段即可，可在這裏瞭解詳情。
Service Worker 刷新
針對 PWA 功能來說，項目成功生成就已經配置好離線緩存功能，對 Service Worker 不熟悉的同學來說可以說很方便了。但是對於推送功能和 Service Worker 的更多細節仍然需要深入研究才能流暢使用這個新興玩意。
（以下稱 Service Worker 爲 SW）
有一個問題特別值得注意，那就是 SW 的更新問題。SW 控制項目環境的緩存，但是 SW 更新後怎麼刷新緩存就不那麼容易理解了。SW 更新後，會進入 waiting 狀態，舊的 SW 依舊正常運行，所以新的 SW 無法激活，你需要關閉整個瀏覽器才能把舊的 SW 關閉，再次打開網頁就能看到新的 SW 運作了。
有一個方便一點的方法，配置
workboxOptions: {
skipWaiting: true,
clientsClaim: true,
},之後，第一個選項如其字面意思，會跳過 Waiting 狀態，而 clientsClaim 可以讓 SW 進入 activated 狀態後立即控制頁面（但是實際上，SW 即使立刻控制頁面並輸出新數據，SPA 也要刷新才能渲染爲最新版本，但這也總比關閉瀏覽器好多了）。
詳細原理請查閱谷歌官方資料（需要梯子）。
最後，給你一個佛系刷新方法
Service Worker 的特殊之處除了由瀏覽器觸發更新之外，還應用了特殊的緩存策略： 如果該文件已 24 小時沒有更新，當 Update 觸發時會強制更新。這意味着最壞情況下 Service Worker 會每天更新一次。
Preload
這個是 Lighthouse 提醒我的。對於一些必要的資源，可以使用 Preload 預先下載（特別是字體或圖片等資源），不必等使用時再下載，這又將會是幾百毫秒的等待。更多信息可以參考 vue-cli 官網相關頁面：https://cli.vuejs.org/zh/guid...
最後
完整配置地址
https://github.com/ssshooter/...
https://github.com/ssshooter/...
這是一個最最簡單的 PWA，沒有對 SW 進行深度配置，很多功能沒有用上。Vue-cli3 搭建的項目使用 workbox-webpack-plugin，SW 默認是自己生成的，需要自己附加 SW 功能可以使用 InjectManifest 插件。最後提一下 Lavas App，可以把你的 PWA 包裝成一個 apk，本質是快捷方式，方便了還沒支持 PWA 的安卓系統。
如果有其他問題，可以在評論區討論~