最近一次的 Google PageSpeed Insights 工具,進行了一次很大幅度的更新,增加了對 PWA (Progressive Web App) –漸進式網(wǎng)頁應用方面的得分提現(xiàn),導致之前用此工具檢測獲得高分的網(wǎng)站,此次再次檢測出現(xiàn)斷崖式分數(shù)下跌,讓好多網(wǎng)頁前端開發(fā)人員一臉懵逼,而又無可奈何。
究其原因就是Google此次更新再次提升了移動互聯(lián)網(wǎng)時代對移動端設備體驗的重視,新增了很多原生態(tài)APP才具有的功能,同時也側(cè)面再次將原生APP推向了萬劫不復的深淵。
PWA (Progressive Web App) –漸進式網(wǎng)頁應用概念介紹:
在開始此次旅程之前,我們有必要給大家簡單介紹幾個基礎概念。
1,Chrome 支持把 PWA 網(wǎng)頁直接保存為桌面應用,在?chrome://flags#enable-desktop-pwas
中打開即可嘗試。
2,Progressive Web Application,全稱“漸進式網(wǎng)頁應用”,是谷歌主導的一種新時代網(wǎ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)站建設、全網(wǎng)營銷、WordPress/Shopify網(wǎng)站開發(fā)、SEO/SEM優(yōu)化推廣、域名主機、Symantec SSL、ZOHO SAAS產(chǎn)品代理等服務項目。", "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
此軟件設置非常簡單,不做贅述,安裝好以后,通過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去測試得分的時候,應該會驚喜的看到得分有了明顯的提升。
Enjoy yourself now!