阅读笔记 – 什么是 PWA,为什么你需要关心?

原文网址

What is a PWA and why should you care?

笔记

文章一开始提到了一个很重要的数据 – 60% 的网络流量是经由手机进行的,所以网页服务在手机上的用户体验非常重要

但是开发原生的手机 App 对于许多小公司是需要更多开发成本的 – 例如同时要支持 iOS ,Android,所以将既有的网页服务升级成具有手机的用户体验这项技术也趋于流行与受到重视

如果想要了解 PWA 可以做的到的功能,可以先来看看一般  Web 应用程序所缺少的核心属性

  1. 可靠性 :如果网页的加载时间超过 3 秒,Google 发现 53% 的用户放弃了这个网站
  2. 快速:网页的页面切换和滑动在手机上不如原生应用程序来的平顺
  3. 响应 ( Responsive ) : 适应不同设备的屏幕大小 ( 这部分其实有很多 CSS 框架开始支持,例如 Bootstrap )
  4. 可安装性:像原生应用程序一样安装,然后用户可以直接使用应用程序
  5. 程序启动画面 ( Splash Screen )
  6. 高度参与 ( Highly engage-able ) :例如通知功能,在手机屏幕 Home icon ,全屏幕支持,可脱机

以上这些传统的 Web 应用程序的缺点,PWA 都可以做的到

PWA 是独立于 ReactJS,Angular ,VueJS 这些最新的网页前端框架,没有相依关系

PWA 可以支持脱机浏览是由 Service Workers 所达成的

PWA 的技术组件组成 – Service Worker/Manifest.json/HTTPS ( 很像在开发一个 Chrome extension ) 

文章最后有展示一个 PWA 应用程序 Fidgetspin.xys ,文章中有教你如何透过 Chrome DevTools 来观看 Service Workers 如何运作

更多的 PWA 应用程序可以到 https://pwa.rocks/ 上观摩,Google 也有一系列的 PWA Case Studies 

PWA 辅助开发工具

  1. Lighthouse 这是 Google 所提供的辅助工具,用来 audit 将目前的网页升级成 PWA 所需要进一步的体验改善建议
  2. Workbox  这也是 Google 提供的开源工具,可以用来产生 Service Worker文件

相关在线课程/电子书

♥欢迎关注 Soft & Share 微博

 

发表评论

Powered by WordPress.com.

Up ↑

%d 博主赞过: