Progressive Web Apps

Progressive Web Apps (aka. PWApps)

• モバイルWebアプリをメインターゲット
• ネイティブアプリに近いユーザー体験（オフライン動作や高速なレスポンス性）を
• 漸進的(Progressive)に提供していこうという考え方

• ref. PRPL pattern: one design pattern to achieve PWApps concept.
  • Push
  • Render
  • Pre-cache
  • Lazy-load

---

Service Worker

• Progressive?

• ex. Service Worker

  • オフラインWebを実現する最新Web標準技術の一つ
  • 柔軟なキャッシュ制御が可能→リソース（HTMLやJavascriptファイルなど）のロード時間短縮が可能
  • プッシュ通知

• SW is progressive

  • SWに対応していないブラウザ環境においては、従来通りのWebサイトとして提供される

• ref. http://www.html5rocks.com/en/tutorials/service-worker/introduction/

---

Let's try the tutorial

• Push Notification on web browser (Chrome)

  • https://codelabs.developers.google.com/codelabs/push-notifications/index.html

• What you'll need

  • Chrome 42 or above
  • A basic understanding of git, and Chrome DevTools
  • Experience of Promises and Service Worker would also be useful, but is not crucial
  • The sample code
  • A text editor
  • A terminal window to run command line tools
  • Python or a local web server stack (see below)

• note

  • SW: only in https or localhost