最近一次的 Google PageSpeed Insights 工具，進行了一次很大幅度的更新，增加了對 PWA (Progressive Web App) –漸進式網(wǎng)頁應(yīng)用方面的得分提現(xiàn)，導致之前用此工具檢測獲得高分的網(wǎng)站，此次再次檢測出現(xiàn)斷崖式分數(shù)下跌，讓好多網(wǎng)頁前端開發(fā)人員一臉懵逼，而又無可奈何。
究其原因就是Google此次更新再次提升了移動互聯(lián)網(wǎng)時代對移動端設(shè)備體驗的重視，新增了很多原生態(tài)APP才具有的功能，同時也側(cè)面再次將原生APP推向了萬劫不復的深淵。
PWA (Progressive Web App) –漸進式網(wǎng)頁應(yīng)用概念介紹：
在開始此次旅程之前，我們有必要給大家簡單介紹幾個基礎(chǔ)概念。
1，Chrome 支持把 PWA 網(wǎng)頁直接保存為桌面應(yīng)用，在?chrome://flags#enable-desktop-pwas中打開即可嘗試。
2，Progressive Web Application，全稱“漸進式網(wǎng)頁應(yīng)用”，是谷歌主導的一種新時代網(wǎng)頁（應(yīng)用）。
簡單的理解，就是你的網(wǎng)頁，可以通過某種方式達到離線使用。是不是很神奇，網(wǎng)頁可以離線使用。
他牽扯到兩個關(guān)鍵文件，如下：
- manifest.json
這個嚴格意義上來說，與離線的關(guān)系不大，更確切的講，他是手機上用到的關(guān)鍵，讓你的網(wǎng)頁可以具有類似App的效果，比如logo，啟動頁面等等。
安卓的Chrome，蘋果的Safari都已經(jīng)兼容，不過兼容程度有區(qū)別而已
簡單DEMO如下：
{
"short_name": "雋永東方",
"name": "雋永東方--技術(shù)驅(qū)動型全網(wǎng)品牌營銷公司--雋永于心 聞達東方",
"description": "雋永東方隸屬于無錫雋永信息科技有限公司旗下高端品牌營銷機構(gòu)，專業(yè)從事外貿(mào)網(wǎng)站建設(shè)、全網(wǎng)營銷、WordPress/Shopify網(wǎng)站開發(fā)、SEO/SEM優(yōu)化推廣、域名主機、Symantec SSL、ZOHO SAAS產(chǎn)品代理等服務(wù)項目。",
"icons": [
{
"src": "https://www.eastdesign.net/wp-content/uploads/2018/11/latest-logo-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "https://www.eastdesign.net/wp-content/uploads/2018/11/latest-logo-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/?source=pwa",
"background_color": "#d9534f",
"display": "standalone",
"scope": "/",
"theme_color": "#d9534f"
}
在iPhone上的效果截圖如下：
從上面幾張圖可以看出，PWA實現(xiàn)的APP與原生態(tài)的APP已經(jīng)沒太大差別了，關(guān)閉了網(wǎng)址輸入框和進度條，載入速度也挺不錯的。
以上說了這么多PWA的好處，那么基于WordPress如何來打造呢，其實沒有我們想象的那么難，我們就來看看如何在WordPress上輕松部署PWA。
基于WordPress上的PWA部署方法：
經(jīng)過一段時間的摸索，發(fā)現(xiàn)老外早就針對此寫好了多個不錯的插件，經(jīng)過對比，我們最終選擇了這款插件：Super Progressive Web Apps
此軟件設(shè)置非常簡單，不做贅述，安裝好以后，通過Chrome瀏覽器的 Developer Tools 可以查看到網(wǎng)站已經(jīng)具備了所有PWA的屬性：
這個時候我們給Chrome安裝一個 Lighthouse 這個擴展：?https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en-US
通過這個擴展可以對網(wǎng)站進行PWA屬性的測試如下：
至此，基于WordPress的PWA就基本搞定，當你再次用Google PageSpeed Insights去測試得分的時候，應(yīng)該會驚喜的看到得分有了明顯的提升。
Enjoy yourself now!