ウェブ開発者の視点からおさらいするPWA

Transcript

1. ウェブ開発者の視点から おさらいする PWA 2019年3月12日 シックス・アパート株式会社 ⾧内毅志

2. 自己紹介 • ⾧内毅志 • ディベロッパーリレーションマネージャー、エバンジェリスト • AWS認定ソリューションアーキテクト • 趣味 ジョギング、野球観戦

   英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと @Nick_smallworld

3. 本スライドの対象 • PWAに興味を持っているWeb開発者 • すでにPWAを開発している方には物足りないかもしれません • 個人的に調べ直したことをまとめました

4. アジェンダ • PWA (Progressive Web Apps)とは • PWAを構成する技術 • Service

   Worker と プッシュ通知 • ウェブ開発者の視点から考えるPWAのメリット

5. PWAとは • Google が提唱・推進しているアプリ • Progressive Web Apps の略称 •

   ウェブアプリ、スマホアプリともに含まれる

6. PWAの事例

7. PWAの事例

8. 個人的に作ったPWA • 英単語レッスンアプリ • ランダムに10問の英単語クイズを出題 • JavaScript(Vue.js)でフルスクラッチ開 発 • デモ用に公開したものなので、2019/3月末に一度削除します

9. 個人的に作ったPWA • 君の名は。聖地ナビ • 映画「君の名は。」の名所案内 • 2017年にローンチ • MT+AWSで構築 •

   Service Worker でオフライン利用可に

10. 技術面からみたPWAの特徴 • Web技術 (html、css、JavaScript、各種 Web API) を利用 • ウェブサイトで公開可能、Appストアを経由せずに配布 •

    スマートフォンにインストール可能 • Service Worker を利用し、ネット未接続でも動作 • プッシュ通知を使うことで、利用ユーザーに対する通知が可能

11. APP SHELL とは • PWAのコア概念 • 特別な技術ではなく、 「アプリ用テンプレート」の概念 を言語化したもの https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja

12. SERVICE WORKERについて • ブラウザのバックグラウンドで動 作するJavaScript • プッシュ通知やバックグラウンド 同期などを行う https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/?hl=ja

13. SERVICE WORKER の登録(例)

14. PUSH通知について • Web技術の通知用APIは大きく分けて2つある • Notifications API • Push API •

    PWAでは「Push API」を利用した通知を指すことが多い

15. プッシュ通知の流れ • ユーザーから通知許可をもらう • Push Subscriptionをサーバー側に 保存 • プッシュ通知を受信するためのスクリプ トをService

    Worker に設定 • サーバーからプッシュ通知を送る • 通知登録したユーザーへ届く • Service Worker が通知を処理 https://developers.google.com/web/fundamentals/push-notifications/how-push-works

16. PWAを開発するためには • Web技術を利用したアプリ作成 • manifest.jsonでアプリの定義 • Service Worker を登録し、ブラウザにデータキャッシュ、バックグ ラウンドで動作

    • プッシュ通知でユーザーへ通知

17. 必須知識 • HTML5、JavaScript • Promise オブジェクトを多用するためおさらいを • プッシュ通知を使う場合、サーバーサイドの知識 • 通知登録者の管理はDBが必要となる

18. GOOGLEが推奨するオフラインキャッシュの方法 • App Shell + データフェッチ • App Shell はURLで指定できるファイルをコンパクトに設計、

    Cache APIでキャッシュ • フェッチした データは IndexedDB を利用して保存・管理

19. PWA開発でハマりそうなところ • Service Worker によるキャッシュのライフサイクルに注意 • キャッシュコントロールを間違えずに • 設定をミスすると古いバージョンが残り続ける •

    プッシュ通知の実装はそれなりに工数かかる • VAPID Key の発行 • サブスクリプション用DBの準備が必要 • ｍBaaSを使うのが手っ取り早い（Firebase、Nifty Cloudなど）

20. 宣伝 • MovableType.net はどちらも設定が楽 • PWA用のｍBaaSとして一考の価値あり • とくにプッシュ通知の管理はかなり楽

21. ウェブ開発者の視点から見たPWAのメリット • 既存のスキルでアプリ開発・配布ができる • ネイティブアプリ用言語の習得が必要ない • ハイブリッドアプリのようにパッケージ化の必要がない • ビジネスサービスの幅を広げるチャンス •

    これまでアプリ開発をしたことがない方はチャレンジの価値あり

22. エンド・制作会社からみたメリット • ウェブサイトとウェブアプリ・スマホアプリの開発を並行して進め ることができる • スマホアプリ投入のトライアルとして利用 • ネイティブアプリは開発・メンテナンスコストが高い • さきにPWAを投入、メリットが検証できたらネイティブ開発

23. 今日の内容 • Qiitaというサービスに、もう少し詳しく書いています • 「Progressive Web Apps (PWA) 学習者のメモ 」

    • Qiita で「PWA」で検索ください。

24. ありがとうございました。