Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webアプリの向こうに見えるPWAアプリ開発

2018年9月28日(金)開催
「タガヤス その7 ークロスプラットフォームアプリ開発を学ぶ」
セッション2資料

  • Be the first to comment

Webアプリの向こうに見えるPWAアプリ開発

  1. 1. Webアプリの向こうに見える PWAアプリ開発 2018/9/28 タガヤス7 1
  2. 2. 自己紹介 瀬川正和@グレープシティ株式会社 JavaScript製品の開発を担当 最近はPWA、Deep Learningに興味あり 2
  3. 3. PWAとは? Progressive 段階的に強化される Web Web Apps アプリ ❓❓❓ 👇 「Webアプリ」と「ネイティブアプリ」の 利点を兼ね備えたアプリ 3
  4. 4. PWAが実行される仕組み WebブラウザでWebサイトにアクセスする 次回からオフラインで実行できる インストールすると… ホーム画面にアプリアイコンが追加される ネイティブアプリのような外観で実行できる 4
  5. 5. PWAの例 日本経済新聞 https://r.nikkei.com/ 5
  6. 6. PWAの事例 日本経済新聞 「速度が上がったことで、通常の1セッション当たりの閲 覧数が過去の数値に比べて、ホームに追加したユーザー のアクセスは約2倍になっています。」 SUUMO 読み込み時間75%減 プッシュ通知の開封率が31%に Twitter 訪問別ページビューが65%増加 ツイート(つぶやき)が75%増加 離脱率20%減 6
  7. 7. ネイティブアプリ vs PWA 7 動作環境 ❌ ネイティブ 1つのOSでしか実行できない ⭕️ PWA 全ての主要OSで実行できる iOS、Android、Windows、Mac、Linux iOS以外はChromeが必要 デスクトップOSでは設定が必要 chrome://flags/#enable-desktop-pwasをEnabledに設定 将来は既定で有効になる予定
  8. 8. ネイティブアプリ vs PWA 8 開発方法 ❌ ネイティブ 各OSで言語や開発方法が異なる ⭕️ PWA HTML/JavaScriptだけで開発できる
  9. 9. ネイティブアプリ vs PWA 9 配布方法 ❌ ネイティブ 各OSのアプリストアで公開しないといけない アカウント登録費用が必要 iOS=年11,800円、Android=$25 審査に通らないとアプリが公開されない ⭕️ PWA 任意のWebサーバーで公開できる 登録費用と審査は不要
  10. 10. ネイティブアプリ vs PWA 10 インストール ❌ ネイティブ インストールしないと実行できない ⭕️ PWA インストールしなくても実行できる インストールも可能
  11. 11. ネイティブアプリ vs PWA 11 アップデート ❌ ネイティブ 最新版をインストールしないといけない ⭕️ PWA アプリ実行時に自動的にアップデートされる 更新したファイルだけダウンロードされる
  12. 12. ネイティブアプリ vs PWA 12 オフライン実行 ⭕️ ネイティブ インストール後はオフラインで実行できる ⭕️ PWA キャッシュ保存後はオフラインで実行できる
  13. 13. ネイティブアプリ vs PWA 13 パフォーマンス ⭕️ ネイティブ 高速 ❌ PWA ネイティブに比べると劣る ゲーム以外のアプリなら問題ないレベル
  14. 14. PWAの利点(vs ネイティブアプリ) 1⃣ コスト削減 1つのアプリで全てのOSをカバーできる Webサーバーで公開するだけで配布できる 2⃣ ユーザビリティ向上 インストールしなくてもすぐに実行できる ➡️ 試しに実行するユーザーが増える アップデート時に待たされない 14
  15. 15. PWAの利点(vs Webアプリ) 1⃣ オフラインで実行できる 2⃣ 読み込み速度が速い 3️⃣ ネイティブアプリのような外観で実行できる 15
  16. 16. ネイティブアプリとPWAの使い分け ネイティブ ゲームなど実行速度が重要な場合 アプリストアで販売したい場合 PWA 上記以外 16
  17. 17. 参考:MicrosoftのPWA対応方針 PWAをUWPアプリに変換する方法を推進 通常のPWAとは異なる ⭕️ Microsoft Storeで公開できる アカウント登録費用($19)と審査が必要 Webサーバーで公開できない インストールしないと実行できない ⭕️ UWP APIを利用できる Windows 10でしか実行できない Windows 10アプリを開発しやすくする 17
  18. 18. PWAを構成する基本技術 Service Worker Webアプリマニフェスト 18
  19. 19. Service Worker PWAの中核となる機能 データ通信とキャッシュ管理を行う 19
  20. 20. データ通信方法の例 キャッシュ→ネットワークの順に読み込む 普段はキャッシュから読み込む キャッシュがない場合にネットワークから読み込む 参考:オフラインクックブック 20
  21. 21. データ通信方法の例 ネットワーク→キャッシュの順に読み込む 普段はネットワークから読み込む オフライン時にキャッシュから読み込む 参考:オフラインクックブック 21
  22. 22. 参考:Webアプリのデータ通信方法 ブラウザがデータ通信を行う 1. HTTP要求を送信する 2. HTTP応答を受信してファイルが更新されていない場 合にキャッシュから読み込む オフラインでは接続エラーが発生する 22
  23. 23. Webアプリマニフェスト JSONファイルで次の情報を設定する アプリ名 アイコン スプラッシュ画面の背景色 ブラウザUIの有無 etc 23
  24. 24. デモ:現在時刻を表示するアプリ アプリ https://gc-segawa.github.io/pwa-time プロジェクト git clone https://github.com/gc-segawa/pwa-time.git 24
  25. 25. オプション機能 Push通知 サーバーから送信される通知メッセージを表示する Webストレージ データをローカルに永続的に保存する IndexedDBが主流 PouchDB:サーバー側のApache CouchDBと同期できる ネイティブAPI カメラ、位置情報、モーションセンサー、決済、指紋/ 顔認証(WebAuthn)など 25
  26. 26. オプション機能 モバイルUIフレームワーク モバイルネイティブアプリのようなUIを提供できる Ionic、Framework7、Onsen UIなど JSフレームワーク Webアプリの開発効率を向上できる Angular、React、Vue.jsなど 高機能なUIライブラリ by GrapeCity Wijmo:業務アプリ用コントロール集(PWAデモ) SpreadJS: ExcelライクUI InputManJS:日本仕様の入力フォーム 26
  27. 27. PWA学習の参考情報 Google Developersが情報量が多くお勧め はじめてのプログレッシブ ウェブアプリ Service Worker の紹介 オフライン クックブック ウェブアプリ マニフェスト 27
  28. 28. まとめ 💡 PWAは開発者にやさしい 💡 PWAはユーザーにやさしい 💡 PWAはそんなに難しくない 👍 PWAを作ろう 28

    Be the first to comment

    Login to see the comments

  • KuniUjiie

    Nov. 5, 2018

2018年9月28日(金)開催 「タガヤス その7 ークロスプラットフォームアプリ開発を学ぶ」 セッション2資料

Views

Total views

768

On Slideshare

0

From embeds

0

Number of embeds

299

Actions

Downloads

3

Shares

0

Comments

0

Likes

1

×