Progressive Web Apps

9781617294587

第1章

1.1 PWA有什么优势

PWA应该具备以下特点:

  • 响应式
  • 独立于网络连接
  • 类似原生应用的交互体验
  • 始终保持更新
  • 安全
  • 可发现
  • 可重连
  • 可安装
  • 可链接

如果你构建了一个PWA,即使在一个不支持的老旧浏览器上运行,它仍然可以作为一个普通的网站运行。这就是PWA最棒的一点——渐进式。

1.1.1 PWA基础

PWA指向一个清单文件(manifest),其中包含网站相关信息,包括图标,背景屏幕和默认方向等。

PWA使用了叫做Service Workers的重要新功能,它可以拦截并缓存任何来自网站的网络请求。

简而言之,PWA不仅仅是一组非常棒的新功能,它们实际上是我们构建更好的网站的一种方式。

1.1.2 构建PWA的业务场景

  • 在线报纸服务,人们通过它来了解当地新闻。如果你知道有人经常访问你的网站并浏览多个网页,为什么不提前缓存这些页面,这样他们就可以完全离线浏览行文?
  • 慈善机构Web应用服务,是他们在没有网络连接的现场也能收集信息。一旦他们回到办公室或有网络连接的区域,数据就可以同步到服务器。

对于Web开发者来说,PWA是个彻底的颠覆者。PWA另一个很棒的点是他们用Web开发者所熟悉和喜爱的技术所构建。如CSS、JavaScript和HTML都是构建PWA的基石。

1.2 Service Workers: PWA 的关键

就其核心来说,Service Workers 只是后台运行的 worker 脚本。只需短短几行代码,他们便可以使开发者能够拦截网络请求,处理推送消息并执行其它任务。

1.2.1 理解 Service Workers

“将你的网络请求想象成飞机起飞。Service Worker 是路由请求的空中交通管制员。它可以通过网络加载,或甚至通过缓存加载。”

Service Workers 的几个特点:

  • 运行在它自己的全局脚本上下文中
  • 不绑定到具体的网页
  • 无法修改网页中的元素,因为它无法访问 DOM
  • 只能使用 HTTPS

Service Workers 是基于事件驱动的。

Service Workers 能够拦截进出的 HTTP 请求,从而完全控制你的网站。

Service Worker 运行在 worker 上下文中,这意味着它无法访问 DOM,它与应用的主要 JavaScript 运行在不同的线程上,所以它不会被阻塞。它们被设计成是完全异步的,因此你无法使用诸如同步 XHR 和 localStorage 之类的功能。

1.2.2 Service Worker 生命周期

1.4

1.5

Service Worker 生命周期经历了不同阶段,这有点像交通灯系统

  • 注册过程中,属于红灯状态,此时它在下载和解析;
  • 执行过程中,属于黄灯状态,此时它正被执行,还没有准备好;
  • 以上两部都完成后,属于绿灯状态,此时它可以随意使用。

1.2.3 Service Worker 基础示例

<html>
  <head>The best web page ever</head>
  <body>
  <script>
    // 注册 service worker
    if ('serviceWorker' in navigator) {                                                               //❶
      navigator.serviceWorker.register('/sw.js').then(function(registration) {                        //❷
        // 注册成功
        console.log('ServiceWorker registration successful with scope: ', registration.scope);        //❸
      }).catch(function(err) {                                                                        //❹
        // 注册失败 :(
        console.log('ServiceWorker registration failed: ', err);
      });
    }
  </script>
  </body>
</html>
self.addEventListener('fetch', function(event) {     //❶
  if (/\.jpg$/.test(event.request.url)) {            //❷
    event.respondWith(fetch('/images/unicorn.jpg')); //❸
  }
});
  • ❶ 为 fetch 事件添加事件监听器
  • ❷ 检查传入的 HTTP 请求是否是 JPEG 类型的图片
  • ❸ 尝试获取独角兽的图片并用它作为替代图片来响应请求

1.2.4 安全考虑

为了让 Service Worker 能在网站上运行,需要通过 HTTPS 来提供服务。

1.4 总结

  • 在用户体验方面,相比于传统网站,原生应用可以提供更好的体验。
  • Web 正在发展,我们没有任何理由不去为用户提供快速、有弹性和吸引人的 Web 应用。
  • PWA 能够为你的用户提供更快的、富有弹性的和更吸引人的网站。
  • Service Workers 是解锁浏览器力量的关键。可以把它们当做是能够拦截 HTTP 请求的空中交通管制员。
  • Web 一直都很棒,但是我们没有理由不去改进它,并向用户提供更多的功能。每一天,我们都要为用户多创造一些。

第2章 构建 PWA 的第一步

2.1 建立在现有基础之上

Lighthouse的谷歌插件 工具非常适用于衡量 PWA 的审核和生产性能。

2.2 构建 PWA 的前端架构方式

在开发者之中,通常会讨论是构建原生应用还是 Web 应用,到底哪个更好。就我个人而言,我认为你应该根据用户的需要来构建应用。不应该出现 PWA 和原生应用相争的状况,作为开发者,我们应该不断探索提升用户体验的方法。

Last Updated: 6/29/2018, 3:06:00 PM