Google 的 Progressive Web Apps,即 PWAs是什么概念,它对SEO意味着什么?
“渐进式增强网页应用” ,PWA(Progressive Web App)是Google公司提出的,在移动端利用标准化框架,在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。
PWA并不是单指某一项技术,你可以把它理解成是一种思想和概念,目的是对标网站原生APP,通过一系列的Web技术优化移动网站,提升其安全性、性能、流畅性、用户体验等各方面指标,最后使得用户访问网页就像在用APP一样的感觉。
渐进式Web应用程序是具有Web可用范围的用户体验,
- 可靠 – 即使在不确定的网络条件下亦不受影响,真正做到即时加载。
- 快速 – 快速响应用户交互,流畅的动画,以及简洁的滚动效果。
- 沉浸式体验 – 使用时感觉就像设备上的原生应用程序,具有沉浸式的用户体验。
当用户从主屏幕启动时,无论设备的网络状态如何,service works都可以立即加载Progressive Web App。
使用JavaScript编写的service work就像客户端代理,它控制缓存以及如何响应资源请求逻辑,通过预缓存关键资源,可以消除移动设备对网络的依赖,确保为用户提供即时可靠的体验。
据Google统计,当站点加载时间超过3秒时,将有53%的用户将放弃等待。一般当网站页面开始加载,用户就会期望它们更为快速 – 没有多余的滚动以及响应速度慢的界面。
Progressive Web Apps可以安装在用户的主屏幕上显示,无需通过Play商店下载安装,提供一个身临其境的沉浸式全屏体验,甚至可以通过Web 推送通知重新吸引用户。
Web App Manifest允许你控制应用程序的显示方式及其启动方式。你可以指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向,甚至是否显示浏览器镶边。
参与PWA
Google规定了网站需要满足的基本要求,才有资格加入使用PWA。良好的用户体验,包括简单的导航,及时推送通知,跨浏览器兼容性,跨所有设备的响应式页面,这些都是重要的要求。
PWA通过用户在设备上的安装,来模仿真实的移动应用程序。从而促使用户与网站的互动增长。每次通过推送通知提供新内容时,都会通知用户。凭借闪电般快速的页面加载时间,快速过渡和轻型页面设计,福布斯的PWA成功实现了以下目标:
- 每位用户的会话数提高43%
- 广告可见度提高20%
- 访问深度增加3倍
- 用户参与率提高一倍意味着参与率提高100%
对于像福布斯这样的杂志类网站,高参与度等同于高转换率,这一切都归功于他们的新PWA。
我们知道网站互动指标(如会话持续时间,点击率和跳出率)会直接影响自然搜索排名。正如Larry Kim演示的那样,网站停留时间与网站的自然搜索排名有着明确的相关性。会话持续时间越长,网站在Google上的排名就越高。
Source: Medium
加强站点在用户端的体验,加快加载速度、离线运行、消息推送、在PC和移动端都可以添加到桌面,表现形式接近原生应用。构建高质量的Progressive Web App具有令人难以置信的优势,可以加强用户满意度,从而增加参与度以及转化率。
- 添加到主屏幕–当满足Progressive Web App标准时,Chrome会提示用户将Progressive Web App添加到其主屏幕。
- 提升参与度–通过Web推送通知帮助eXtra Electronics提高了4倍的参与度。这些用户在网站上停留时间提升为原来的两倍。
- 可在任何网络条件下正常工作–service works使Konga的初始页面加载时间减少了63%,同时为完成第一笔交易减少84%的时间。
- 提升转化率–提供惊人的用户体验的能力,帮助AliExpress在所有浏览器设备中提高了104%的转化率,在iOS上提高了82%的转化率。
PWA的其他优势:
- 无需安装&下载,只要输入网址访问并将其添加到设备主屏幕就可以如使用原生APP般持续使用。
- 不需要提交到APP商店进行审核发布;版本更新时不需要重新审核发布。
- 现有的web网页都能通过修改成为PWA。
- 不需要开发Android和IOS两套不同的APP版本。
渐进式网络应用程序真正意义上达到了SEO优化。从简明扼要的元描述到添加Schema.org数据,以便搜索机器人更好地索引和解析网站数据;从而更好的达到网站搜索优化的目的。
PWA不需要独立的“mobile.site.com”的URL,即可在移动设备上提供很好的用户体验。无论是什么设备,它都会自动匹配为与网站符合的用户体验。PWA的另一大好处是必须启用HTTPS,这不仅会在自然搜索结果中提升你的网站,还会提升你的网站的安全性,从而降低跳出率,提高点击率和转化率。
每个页面都有自己独立的URL,即使深度嵌入的页面也很容易被搜索引擎发现和抓取。每个页面独立的URL,也使得网站在社交媒体中更容易被分享,更不用说更透明地跟踪分析。
使用PWA服务进行预缓存,即使设备处于脱机状态,PWA上的所有URL也会加载,从而为使用旧设备或网络连接不稳定的用户提供支持。
智能手机用户非常善变,尽管据统计在2018年智能手机用户下载了超过1130亿个应用程序,但他们仍每天只使用大约9个常用应用程序。所以,你需要很棒的应用程序,你自己的PWA。构建一个结合移动应用程序的灵活,拥有友好的用户体验界面而无需实际创建应用程序的应用。
用户可以选择将PWA添加到手机中并像应用程序一样启动它。
PWA克服了同时构建和维护移动网站和移动应用程序的固有缺点。企业可以针对可能处于慢速数据连接的用户,甚至是脱机的用户,使用移动开发实践(如提前缓存内容,压缩等)。研究表明,网站速度和转换率之间存在相关性。随着时间的推移,站点速度的下降通常会导致转换率相应下降,反之亦然。
Source: Think with Google
Source: One North
通过PWA提高移动网站页面加载时间,可以有效地提高转网站换率。化妆品巨头兰蔻于2017年使用PWA,其移动网站的速度和转换率均有显着提升。他们的页面加载时间下降了84%,并在增加了页面交互后,转换率增长了17%。
如何实施PWA
PWA本质上与普通的网站没有什么不同 – 它也是由 HTML、CSS 和 JavaScript 组成,并且存活于浏览器中。与普通网站不同的是PWA需要满足10个核心概念列表:
- 安全 – 通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改。
- 渐进式 – 能够让每一位用户使用,无论用户使用什么浏览器,因为它是始终以渐进增强为原则
- 响应式 – 适应任何环境:桌面电脑、智能手机、平板电脑,或者其他设备。
- 不依赖网络连接 – 通过用 service workers 增强,可以在离线或者低质量网络下工作
- 类原生应用 – 有像原生应用般的交互和导航给用户原生应用般的体验,因为它是建立在 app shell model 上的。
- 持续更新 – 受益于 service worker 的更新进程,应用能够始终保持更新。
- 可发现 – 可识别为“应用程序”,是得益于 W3C manifests 元数据和 service worker 的登记,让搜索引擎能够找到 web 应用。
- 可再次访问 – 通过推送通知等特性让用户再次访问变得容易。
- 可安装 – 允许用户保留对他们有用的应用在主屏幕上,不需要通过应用商店。
- 可链接 – 通过 URL 可以轻松分享应用,不用复杂的安装即可运行。
遵循以上指南,可以确保你的Web在浏览器中查看时及单独通过主屏幕快捷键启动时,都运行的不错。
PWA中包含的核心功能及特性:
- 离线使用 – Service Worker + HTTPS +Cache API + IndexedDB 等一系列Web技术实现离线加载和缓存。
- 添加到桌面-通过Web App Manifest(manifest.json)文件配置,使得可以直接添加到手机的桌面上。
- 数据更新- Background Sync 后台同步技术。
- 实现推送- Push&Notification 实现推送与通知。
- 响应式设计
Service Worker是离线缓存的JS文件,相当于一个代理服务器,PWA 技术使用的主要就是它。Service Worker是浏览器在后台独立于网页运行的脚本,一旦在Web里通过JS进行加载后,就会一直在后台线程中运行。开发者能够在Service Worker中监听 Install、Activate、Fetch、Push、Sync、Message 事件。需要注意的事,目前Service Worker只能在 HTTPS 环境下才能使用,因为Service Worker 的权利比较大,能够直接截取和返回用户的请求,所以要考虑一下安全性问题。
另外,Service Worker可以操作Cache的,因此,第一次加载Service Worker时,可以把不常更新的文件混存起来,比如全局的CSS、JS、图片、主HTML,这样就创建了APP Shell,用户以后打开PWA应用时,这些被缓存的文件就不需要请求网络了。
Caches 不是HTML5 Application Cache。是在Service worker 中灵活的使用Caches是PWA开发的点,例如前面说的创建App Shell,离线时保存数据在重新联网时触发Sync后再处理以及Fetch事件中保存请求的数据在下次请求时从缓存中读取等,都要使用Caches来实现。
Web App Manifest(manifest.json) 文件是一个 W3C 规范,它定义了一个基于 JSON 的 List,里面定义了一些属性,例如 name、short_name、icons、start_url、display等。
Manifest 在 PWA 中的作用有:
- 将网页添加到手机主屏幕上;
- 在 Android 上全屏启动(不显示地址栏),值得注意的是IOS的Safari浏览器不支持此功能;
- 控制屏幕 横屏 / 竖屏 展示;
- 定义启动画面;
- 设置应用从主屏幕启动还是从 URL 启动;
- 设置添加到屏幕上的应用程序图标、名字、图标大小等。
Push&Notification,要注意的是Push和Notification 是两个不同的功能,涉及到两个API 。
Push的作用是服务器端将更新的信息传递给Service Worker,反之,Notification是Service Worker将更新的信息推送给用户。
随着用户更加清晰地表达了他们的偏好,企业应该更好的获取这些信号并满足目标受众的相关需求。如用户期望在他们的移动设备上进行快速且顺畅的用户访问体验,而不必为此下载大量的应用程序。
是时候使用PWA,建立属于你的将移动网络的易用性与移动应用程序的速度和用户友好性相结合的优质网站了。如果你的网站是Wordpress配置的,也可以试试相应的插件。