PWA
如果你是一名現代前端，那麼恭喜你，你需要了解並使用這麼個神器。
如果你還不知道PWA，那麼恭喜你，你看到了這篇文章。
本文只簡單介紹概念入門，具體請查閱相關資料與官網文檔。
Progressive Web Application，全稱“漸進式網頁應用”，是谷歌主導的一種新時代網頁（應用）。
簡單的理解，就是你的網頁，可以通過某種方式達到離線使用。是不是很神奇，網頁可以離線使用，那還叫什麼網頁（網頁，網頁，沒網還頁啥？）。
他牽扯到兩個關鍵文件，如下：
- manifest.json
這個嚴格意義上來說，與離線的關係不大，更確切的講，他是手機上用到的關鍵。
讓你的網頁可以具有類似App的效果，比如logo，啟動頁面等等。
安卓的Chrome，蘋果的Safari都已經兼容，不過兼容程度有區別而已
具體Demo如下：
{
"name": "GoTop",
"short_name": "衝頂大會",
"display": "standalone",
"orientation": "landscape",
"start_url": "/",
"theme_color": "purple",
"background_color": "purple",
"icons": [
{
"src": "logo_48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "logo_144.png",
"sizes": "144x144",
"type": "image/png"
}
]
}
對應效果如下：
1、正常打開
就是正常的網頁，不過此時已經獲取manifest.json裡面的相關配置
2、添加主屏幕
3、桌面效果
本例子沒有縮略圖，尷尬。然後桌面上就跟普通的App一樣了。相當的輕量。
4、啟動頁
這是從桌面打開的效果，一個是歡迎頁的效果；一個是，注意，看上面已經沒有了瀏覽器地址欄。整體效果與App無異。
- sw.js
這個js命名隨便啦，只是說其功能叫Service Workers，所以習慣寫作sw.js而已。
1、作用
讓你的Web App離線使用的關鍵js配置。
實例如下：
var cacheName = 'gotop-01' // 決定是否更新本地資源，每次要更新記得替換
var cacheList = [ // 需要保存本地資源列表，支持*匹配
"/",
"index.html",
"dist/app.js",
]
// Service Worker 註冊完成事件，寫入緩存
self.addEventListener('install', e => {
e.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll(cacheList))
.then(() => self.skipWaiting())
)
})
// Service Worker 啟動事件，處理更新緩存
self.addEventListener('activate', e => {
e.waitUntil(
Promise.all(
caches.keys().then(keys => keys.map(key => {
if(key !== cacheName) {
return caches.delete(key)
}
}))
).then(() => {
self.clients.claim()
})
)
})
// 請求接口事件，處理相關邏輯
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(res => res || fetch(e.request.url))
)
})
差不多是官網的示例修改了下，基本可以跑起來，關鍵說明已經在註釋裡面，其他都是代碼即註釋，就那麼用即可。
2、調試
在Chrome調試器中的位置如下：
保存的資源如下：
3、應用效果
- 調試器
模擬斷網的情況，刷新頁面依然可以正常使用。
- 手機實際效果
注意看，當前是飛行模式，從手機桌面點開，依然可以類似App正常打開使用。
有什麼用
這個怎麼說呢，用處不小，並且還在快速增長中。
舉例來說：
- 脫機遊戲
- 有幸依賴於Canvas和WebGL的快速發展，現在純js寫出的遊戲，不單單瀏覽器可以運行，並且可以無縫打包到各個平臺運行，其性能相當不錯，有興趣可以瞭解下，如：Cocos2D-js，Layabox，白鷺引擎等。
- 於是，你做的遊戲，假如像一些知名的單機遊戲，如flappy bird等，那麼就可以實現離線玩耍了。加速響應
- 以前資源的緩存需要前後端協調，重頭戲在後端。現在就可以把緩存相關的東西，重點放在前端，前端每次更新自己當然知道什麼資源需要更新，什麼資源萬年不動，後端專注實現業務邏輯即可。
- 要知道有些網頁的初次請求可是非常要命的，一是真的資源很大而服務器較差；二是得益於我大天朝的牆，唉~
- 尤其，現如今AI熱潮，以及機器學習啦，深度學習什麼的，未來可能一個網頁依賴的原始框架大小超乎你的想象，如果每次請求都需要重新加載資源，我的天。。。應用市場
- 沒想到吧？
- 臭名昭著的巨硬，在去年還是今年年初來著，正式在win10的應用市場中，支持PWA應用（詳情戳我）。這意味什麼呢？
- 這可就厲害了，你一個PWA，做好自適應，然後：
- PC網頁版手機網頁版微信網頁版（比如公眾號）Electron分別提供Mac，Linux，Win7版Win10就用官方支持的PWA版HBuilder或Cordova開發真實App應用版其他奇葩版。。。
到這裡，你大概瞭解PWA的相關知識沒？
Vue夠潮了沒？vue-cli已經官方支持PWA的模板了，如下：
vue init pwa yourprojectname
那麼，想作為當今的潮流前線的前端，你還能不去接觸PWA，不去學習嗎？
這裡是PWA官網，官網請翻牆食用。
源碼相關
GitHub
如果文章對你又一點點幫助，我就非常開心了~
我是風藍小棲，如果喜歡我的文章，請務必關注一波啊！！！我必會定期更新技術文章。
鏈接：http://www.imooc.com/article/44794
閱讀更多 前端小學生 的文章
