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