Why PWA?

Make WebApps competiable with Mobile Apps. Make it more reliable / fast / engaging.

Increase of App’s session duration and users increment.

What is PWA?

Progressive Web Apps（以下简称 PWA）以及构成 PWA 的一系列关键技术的出现，终于让我们看到了彻底解决这两个平台级别问题的曙光：

  • 能够显著提高应用加载速度、甚至让 Web 应用可以在离线环境使用的 Service Worker 与 Cache Storage；
  • 用于描述 Web 应用元数据（metadata）、让 Web 应用能够像原生应用一样被添加到主屏、全屏执行的 Web App Manifest；
  • 进一步提高 Web 应用与操作系统集成能力，让 Web 应用能在未被激活时发起推送通知的 Push API 与 Notification API 等等。

A Progressive Web App is:

  • Progressive - Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
  • Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
  • Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
  • App-like - Feels like an app, because the app shell model separates the application functionality from applicationcontent .
  • Fresh - Always up-to-date thanks to the service worker update process.
  • Safe - Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
  • Discoverable - Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
  • Re-engageable - Makes re-engagement easy through features like push notifications.
  • Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
  • Linkable - Easily share the application via URL, does not require complex installation.

ServicesWorker

ServiceWorkers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.

  • run in a worker thread and all operations should be async.
  • run in HTTPS for security reasons.

Service workers are also intended to be used for such things as:

  • Background data synchronization
  • Responding to resource requests from other origins
  • Receiving centralized updates to expensive-to-calculate data such as geolocation or gyroscope, so multiple pages can make use of one set of data
  • Client-side compiling and dependency management of CoffeeScript, less, CJS/AMD modules, etc. for dev purposes
  • Hooks for background services
  • Custom templating based on certain URL patterns
  • Performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the next few pictures in a photo album.

How to work with PWA?

Use LightHouse to help you work with PWA.

Ref