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

1. Webアプリの向こうに見える
PWAアプリ開発
2018/9/28 タガヤス7
1

2. 自己紹介
瀬川正和＠グレープシティ株式会社
JavaScript製品の開発を担当
最近はPWA、Deep Learningに興味あり
2

3. PWAとは？
Progressive 段階的に強化される
Web Web
Apps アプリ
❓❓❓
👇
「Webアプリ」と「ネイティブアプリ」の
利点を兼ね備えたアプリ
3

4. PWAが実行される仕組み
WebブラウザでWebサイトにアクセスする
次回からオフラインで実行できる
インストールすると…
ホーム画面にアプリアイコンが追加される
ネイティブアプリのような外観で実行できる
4

5. PWAの例
日本経済新聞
https://r.nikkei.com/
5

6. PWAの事例
日本経済新聞
「速度が上がったことで、通常の1セッション当たりの閲
覧数が過去の数値に比べて、ホームに追加したユーザー
のアクセスは約2倍になっています。」
SUUMO
読み込み時間75%減
プッシュ通知の開封率が31％に
Twitter
訪問別ページビューが65％増加
ツイート（つぶやき）が75％増加
離脱率20％減
6

7. ネイティブアプリ vs PWA
7
動作環境
❌ ネイティブ
1つのOSでしか実行できない
⭕️ PWA
全ての主要OSで実行できる
iOS、Android、Windows、Mac、Linux
iOS以外はChromeが必要
デスクトップOSでは設定が必要
chrome://flags/#enable-desktop-pwasをEnabledに設定
将来は既定で有効になる予定

8. ネイティブアプリ vs PWA
8
開発方法
❌ ネイティブ
各OSで言語や開発方法が異なる
⭕️ PWA
HTML／JavaScriptだけで開発できる

9. ネイティブアプリ vs PWA
9
配布方法
❌ ネイティブ
各OSのアプリストアで公開しないといけない
アカウント登録費用が必要
iOS＝年11,800円、Android＝$25
審査に通らないとアプリが公開されない
⭕️ PWA
任意のWebサーバーで公開できる
登録費用と審査は不要

10. ネイティブアプリ vs PWA
10
インストール
❌ ネイティブ
インストールしないと実行できない
⭕️ PWA
インストールしなくても実行できる
インストールも可能

11. ネイティブアプリ vs PWA
11
アップデート
❌ ネイティブ
最新版をインストールしないといけない
⭕️ PWA
アプリ実行時に自動的にアップデートされる
更新したファイルだけダウンロードされる

12. ネイティブアプリ vs PWA
12
オフライン実行
⭕️ ネイティブ
インストール後はオフラインで実行できる
⭕️ PWA
キャッシュ保存後はオフラインで実行できる

13. ネイティブアプリ vs PWA
13
パフォーマンス
⭕️ ネイティブ
高速
❌ PWA
ネイティブに比べると劣る
ゲーム以外のアプリなら問題ないレベル

14. PWAの利点（vs ネイティブアプリ）
1⃣ コスト削減
1つのアプリで全てのOSをカバーできる
Webサーバーで公開するだけで配布できる
2⃣ ユーザビリティ向上
インストールしなくてもすぐに実行できる
➡️ 試しに実行するユーザーが増える
アップデート時に待たされない
14

15. PWAの利点（vs Webアプリ）
1⃣ オフラインで実行できる
2⃣ 読み込み速度が速い
3️⃣ ネイティブアプリのような外観で実行できる
15

16. ネイティブアプリとPWAの使い分け
ネイティブ
ゲームなど実行速度が重要な場合
アプリストアで販売したい場合
PWA
上記以外
16

17. 参考：MicrosoftのPWA対応方針
PWAをUWPアプリに変換する方法を推進
通常のPWAとは異なる
⭕️ Microsoft Storeで公開できる
アカウント登録費用（$19）と審査が必要
Webサーバーで公開できない
インストールしないと実行できない
⭕️ UWP APIを利用できる
Windows 10でしか実行できない
Windows 10アプリを開発しやすくする
17

18. PWAを構成する基本技術
Service Worker
Webアプリマニフェスト
18

19. Service Worker
PWAの中核となる機能
データ通信とキャッシュ管理を行う
19

20. データ通信方法の例
キャッシュ→ネットワークの順に読み込む
普段はキャッシュから読み込む
キャッシュがない場合にネットワークから読み込む
参考：オフラインクックブック
20

21. データ通信方法の例
ネットワーク→キャッシュの順に読み込む
普段はネットワークから読み込む
オフライン時にキャッシュから読み込む
参考：オフラインクックブック
21

22. 参考：Webアプリのデータ通信方法
ブラウザがデータ通信を行う
1. HTTP要求を送信する
2. HTTP応答を受信してファイルが更新されていない場
合にキャッシュから読み込む
オフラインでは接続エラーが発生する
22

23. Webアプリマニフェスト
JSONファイルで次の情報を設定する
アプリ名
アイコン
スプラッシュ画面の背景色
ブラウザUIの有無
etc
23

24. デモ：現在時刻を表示するアプリ
アプリ
https://gc-segawa.github.io/pwa-time
プロジェクト
git clone https://github.com/gc-segawa/pwa-time.git
24

25. オプション機能
Push通知
サーバーから送信される通知メッセージを表示する
Webストレージ
データをローカルに永続的に保存する
IndexedDBが主流
PouchDB：サーバー側のApache CouchDBと同期できる
ネイティブAPI
カメラ、位置情報、モーションセンサー、決済、指紋／
顔認証（WebAuthn）など
25

26. オプション機能
モバイルUIフレームワーク
モバイルネイティブアプリのようなUIを提供できる
Ionic、Framework7、Onsen UIなど
JSフレームワーク
Webアプリの開発効率を向上できる
Angular、React、Vue.jsなど
高機能なUIライブラリ by GrapeCity
Wijmo：業務アプリ用コントロール集（PWAデモ）
SpreadJS： ExcelライクUI
InputManJS：日本仕様の入力フォーム
26

27. PWA学習の参考情報
Google Developersが情報量が多くお勧め
はじめてのプログレッシブ ウェブアプリ
Service Worker の紹介
オフライン クックブック
ウェブアプリ マニフェスト
27

28. まとめ
💡 PWAは開発者にやさしい
💡 PWAはユーザーにやさしい
💡 PWAはそんなに難しくない
👍 PWAを作ろう
28