Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

385aac3a7e30c149bf03d3499ba9b121?s=128

Takeshi Nick Osanai

March 12, 2019
Tweet

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の準備が必要 • mBaaSを使うのが手っ取り早い(Firebase、Nifty Cloudなど)
  20. 宣伝 • MovableType.net はどちらも設定が楽 • PWA用のmBaaSとして一考の価値あり • とくにプッシュ通知の管理はかなり楽

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

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

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

    • Qiita で「PWA」で検索ください。
  24. ありがとうございました。