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

2019年3月12日 MT東京のイベントの登壇内容です。

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. ありがとうございました。