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