隽永东方
隽永东方主菜单

隽永东方关于提升Google最新PWA(Progressive Web App)得分的秘籍

1 星2 星3 星4 星5 星
(2 票, 评分: 5.00 总分 5)  

最近一次的 Google PageSpeed Insights 工具,进行了一次很大幅度的更新,增加了对 PWA (Progressive Web App) –渐进式网页应用方面的得分提现,导致之前用此工具检测获得高分的网站,此次再次检测出现断崖式分数下跌,让好多网页前端开发人员一脸懵逼,而又无可奈何。

究其原因就是Google此次更新再次提升了移动互联网时代对移动端设备体验的重视,新增了很多原生态APP才具有的功能,同时也侧面再次将原生APP推向了万劫不复的深渊。

PWA (Progressive Web App) –渐进式网页应用概念介绍:

在开始此次旅程之前,我们有必要给大家简单介绍几个基础概念。

1,Chrome 支持把 PWA 网页直接保存为桌面应用,在 chrome://flags#enable-desktop-pwas中打开即可尝试。

2,Progressive Web Application,全称“渐进式网页应用”,是谷歌主导的一种新时代网页(应用)。

简单的理解,就是你的网页,可以通过某种方式达到离线使用。是不是很神奇,网页可以离线使用。

他牵扯到两个关键文件,如下:

  • manifest.json

这个严格意义上来说,与离线的关系不大,更确切的讲,他是手机上用到的关键,让你的网页可以具有类似App的效果,比如logo,启动页面等等。

安卓的Chrome,苹果的Safari都已经兼容,不过兼容程度有区别而已

简单DEMO如下:

在iPhone上的效果截图如下:




从上面几张图可以看出,PWA实现的APP与原生态的APP已经没太大差别了,关闭了网址输入框和进度条,载入速度也挺不错的。

以上说了这么多PWA的好处,那么基于WordPress如何来打造呢,其实没有我们想象的那么难,我们就来看看如何在WordPress上轻松部署PWA。

基于WordPress上的PWA部署方法:

经过一段时间的摸索,发现老外早就针对此写好了多个不错的插件,经过对比,我们最终选择了这款插件:Super Progressive Web Apps

此软件设置非常简单,不做赘述,安装好以后,通过Chrome浏览器的 Developer Tools 可以查看到网站已经具备了所有PWA的属性:

这个时候我们给Chrome安装一个 Lighthouse 这个扩展: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en-US

通过这个扩展可以对网站进行PWA属性的测试如下:

至此,基于WordPress的PWA就基本搞定,当你再次用Google PageSpeed Insights去测试得分的时候,应该会惊喜的看到得分有了明显的提升。

Enjoy yourself now!



 

隽永东方温馨提示:隽永东方已正式成为Shopify官方Partner,享有以下特权:
1,凡是通过隽永东方申请的Shopify测试账号,均可以60天免费试用,而无需支付任何费用,只需要正式开通以后才开始付费;
2,隽永东方将提供Shopify官方第一手资源,助力企业最快捷搭建电商营销平台;
3,隽永东方将不定期举办线下Shopify交流研讨会,为广大客户提供相互交流提升的平台。

立即注册 Shopify 账号



Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用
  Google Ads 推广
  隽永东方全网营销
  隽永智库