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

自己紹介 • ⾧内毅志 • ディベロッパーリレーションマネージャー、エバンジェリスト • AWS認定ソリューションアーキテクト • 趣味 ジョギング、野球観戦 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと @Nick_smallworld 

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

アジェンダ • PWA (Progressive Web Apps)とは • PWAを構成する技術 • Service Worker と プッシュ通知 • ウェブ開発者の視点から考えるPWAのメリット 

PWAとは • Google が提唱・推進しているアプリ • Progressive Web Apps の略称 • ウェブアプリ、スマホアプリともに含まれる 

PWAの事例 

PWAの事例 

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

個人的に作ったPWA • 君の名は。聖地ナビ • 映画「君の名は。」の名所案内 • 2017年にローンチ • MT+AWSで構築 • Service Worker でオフライン利用可に 

技術面からみたPWAの特徴 • Web技術 (html、css、JavaScript、各種 Web API) を利用 • ウェブサイトで公開可能、Appストアを経由せずに配布 • スマートフォンにインストール可能 • Service Worker を利用し、ネット未接続でも動作 • プッシュ通知を使うことで、利用ユーザーに対する通知が可能 

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

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

SERVICE WORKER の登録(例) 

PUSH通知について • Web技術の通知用APIは大きく分けて2つある • Notifications API • Push API • PWAでは「Push API」を利用した通知を指すことが多い 

プッシュ通知の流れ • ユーザーから通知許可をもらう • Push Subscriptionをサーバー側に 保存 • プッシュ通知を受信するためのスクリプ トをService Worker に設定 • サーバーからプッシュ通知を送る • 通知登録したユーザーへ届く • Service Worker が通知を処理 https://developers.google.com/web/fundamentals/push-notifications/how-push-works 

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

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

GOOGLEが推奨するオフラインキャッシュの方法 • App Shell + データフェッチ • App Shell はURLで指定できるファイルをコンパクトに設計、 Cache APIでキャッシュ • フェッチした データは IndexedDB を利用して保存・管理 

PWA開発でハマりそうなところ • Service Worker によるキャッシュのライフサイクルに注意 • キャッシュコントロールを間違えずに • 設定をミスすると古いバージョンが残り続ける • プッシュ通知の実装はそれなりに工数かかる • VAPID Key の発行 • サブスクリプション用DBの準備が必要 • ｍBaaSを使うのが手っ取り早い（Firebase、Nifty Cloudなど） 

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

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

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

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

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