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

ウェブ技術者の視点から見たPWA

 ウェブ技術者の視点から見たPWA

Takeshi Nick Osanai

March 12, 2019
Tweet

More Decks by Takeshi Nick Osanai

Other Decks in Technology

Transcript

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

    Worker と プッシュ通知 • ウェブ開発者の視点から考えるPWAのメリット
  2. 技術面からみたPWAの特徴 • Web技術 (html、css、JavaScript、各種 Web API) を利用 • ウェブサイトで公開可能、Appストアを経由せずに配布 •

    スマートフォンにインストール可能 • Service Worker を利用し、ネット未接続でも動作 • プッシュ通知を使うことで、利用ユーザーに対する通知が可能
  3. プッシュ通知の流れ • ユーザーから通知許可をもらう • Push Subscriptionをサーバー側に 保存 • プッシュ通知を受信するためのスクリプ トをService

    Worker に設定 • サーバーからプッシュ通知を送る • 通知登録したユーザーへ届く • Service Worker が通知を処理 https://developers.google.com/web/fundamentals/push-notifications/how-push-works
  4. PWA開発でハマりそうなところ • Service Worker によるキャッシュのライフサイクルに注意 • キャッシュコントロールを間違えずに • 設定をミスすると古いバージョンが残り続ける •

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