PWA 框架和工具

Stephen Fluin

渐进式网页应用 (PWA) 席卷网络的速度超出任何人的预测。两年前,开发者还需要自行完成大部分组装工作,才能较好地利用浏览器中新推出的 API,但现在我们拥有了强大而又可靠的工具,可以帮助任何背景的开发者快速交付更具吸引力的应用。

在此会议中,您将了解以下内容: • 您应该加以利用的 PWA 最佳做法 • 旨在辅助各类背景开发者进行开发的工具 • 这些工具背后的原理和愿景 • 实用入门诀窍

完整的PWA

3 metrics

  • fast
  • reliable
    • offline user?
  • attractive

Tools

What are tools for?

  • time
  • bandwidth
    • users are spending more than they get
  • browser-specific customization
    • theme color, icon
  • push message
  • code generator
  • lighthouse best practices

Behind-the-scene Technologies

  • manifest
  • service worker
  • cache
    • advanced cache strategy
      • user-dependent based on profiles
  • push notifications
    • user-dependent method
  • code generation
    • a build environment that integrates native pipeline

PWA Tools

  • Generic tools
    • Like Chrome DevTools, since 60
      • tab Application
      • tab Audits, lighthouse (Activity, Performance, Accessability, Best-Practices)
  • Framework-specific tools
    • selekton

Generic Tools

  • Workbox (Developed by Chrome Team, a JS lib for PWA)
    • Offline caching
    • Offline analytics
    • Background sync (get data & sync information)
  • Offline plugin for Webpack
    • File caching
      • Ahead of time caching
      • Caching later
      • Optional caching
  • pinterest/service-workers
  • sw-precache & sw-toolbox (pre-Workbox age tool, outdated)
  • HNPWA

目标和理念

Goal

  • Simplify mental model
    • Right abstaraction layer, learn to evolve
  • Edge case
  • Save time for developers

Simplify Mental Model

Difficult problems

  • cache validation
  • naming things Focus on getting things done first.

Lifecycle management is difficult, leave it to tools.

Edge Cases

  • What if connectivity goes out at first installation?
  • What can service worker serve when user has superb internet connection?
  • What if cache header settings are out of control (backend people are responsible for them, but frontend people are doing the devworks)

Tools Overview

First touchpoints

  • React
  • Preact
  • Polymer
  • Vue
  • Angular

Preact

preact-cli
  • It generates App Shell
  • automatic explorer
  • server Firebase push
  • built on sw-precache

Polymer

polymer-clipolymer-starter-kit

Vue

vuejs-templates/pwa

Angular

@angular/cli

yarn global add @angular/cli

  • service worker generation

  • PWA.rocks

  • PWA Builder

  • Angular ng-pwatools

最佳实践

  • bit.ly/debugging-sw by Rob Dodson Debugging manuals
  • Exploit tool features
  • 不要单纯依赖开发工具
  • 端对端的 Service Worker 测试 bit.ly/angular-pwa-harns
  • Keep Updated

Try these tools. Add more value to your users.