Slide 1
Slide 1 text
PAGE
# MOONGIFT / 12
DAY 2018/11/24
業務システムでこそ使えるPWA
1
FRONTEND CONFERENCE 2018
Slide 2
Slide 2 text
PAGE
# MOONGIFT / 29
DAY 2018/11/24
自己紹介
2
@goofmint
fb.me/goofmint
中津川 篤司
株式会社MOONGIFT代表取締役
エバンジェリスト
コミュニティ
主催
https://www.moongift.jp
Slide 3
Slide 3 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
今日お話しすること
• 業務WebアプリにおけるPWA化のメリット
• スマートフォンアプリとPWAの相違
• PWA開発する上で使って欲しい機能
• PWA開発する上でのちょっとしたTips
3
Slide 4
Slide 4 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
今日お話ししないこと
• コンシューマ向けのPWA
• 各機能の実装方法
4
Slide 5
Slide 5 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
hifive?
• Web業務システム用のHTML5フレームワーク
• MVC
• jQuery/EJS
• 古いWebブラウザサポート（IE8など）
• 慎重なアップデート
（2016年01月28日 1.2.3 → 現在 1.3.2）
5
https://www.htmlhifive.com
Slide 6
Slide 6 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
日経 XTech での連載
6
Slide 7
Slide 7 text
PAGE
# MOONGIFT / 12
DAY 2018/11/24
What is PWA?
7
Slide 8
Slide 8 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
PWA = Progressive Web App
Googleが絶賛推奨中のWebアプリケーションを
よりネイティブアプリ風、高機能にするための
技術、テクニックの総称
8
特定の一技術を指し示すキーワードでは
"
Slide 9
Slide 9 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
• アプリ化しないといけない
• プッシュ通知がないといけない
• CACHE APIを使わないといけない
9
""" %%%
• 導入しやすいものから徐々に
• ユーザや提供側にとって最良なもの
を取り入れる
• ユーザ体験を向上させる
Slide 10
Slide 10 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
10
レスポンシブWebデザイン / HTTPS
ストレージ
Service Worker
(CACHE API / Webプッシュ通知)
マニフェスト
WebAuthn
Slide 11
Slide 11 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
ダイアログ・ヘル
• スマートフォンに溢れる
ダイアログ、バナー
• 無意識に無視、拒否する
癖
• Webはユーザプライバ
シーに配慮するため、許
可を取る機会が多い
11
Slide 12
Slide 12 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
Slide 13
Slide 13 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
旅行先にて
Gwifiは1日500MBまで
切れると128kbps制限
追加購入したい
サイトめっちゃ遅い…
JavaScript動かない
jQueryの読み込みでエラー出てる
13
常に高速なネットワークとは限らない
遅いWebサイトはもの凄いストレス
よく使うファイルだけでもキャッシュ
すれば高速化できる
いきなり100%ではなく、10%改善か
らはじめる
Slide 14
Slide 14 text
PAGE
# MOONGIFT / 12
DAY 2018/11/24
B2B Web App
14
Slide 15
Slide 15 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
業務システムにおける歴史
• iPad登場以降、続々と登場し
たタブレット版業務アプリ
• プッシュ通知、位置情報、オ
フライン利用がメイン
15
1. 黎明期
2. 利用技術
3. メリット
4. デメリット
Slide 16
Slide 16 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
業務システムにおける歴史
• Cordovaの利用
• アプリ化することで審査が発生
• JavaScript部分ではあまり落ちな
い、プラグイン（ネイティブコード）
部分で落ちることがある
• ただし速度…（現在は大幅に改善）
16
1. 黎明期
2. 利用技術
3. メリット
4. デメリット
Slide 17
Slide 17 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
業務システムにおける歴史
• 生産現場にコンピュータを持
ち込まない
• ネットワークがあればどこか
らでも社内データにアクセス
• 使いこなすのが（割と）楽
17
1. 黎明期
2. 利用技術
3. メリット
4. デメリット
Slide 18
Slide 18 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
業務システムにおける歴史
• OSの進化に追従できない
（開発リソース & 予算）
• 審査で落ちる
• アプリの更新が反映されない
18
1. 黎明期
2. 利用技術
3. メリット
4. デメリット
Slide 19
Slide 19 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
PWA!PWA!PWA!
• 審査なし
• 配布の手間なし
• アップデートの自動適用
19
• HTML5 APIで大抵の目的は果たせ
るようになった
• JavaScriptが高速化し、実用レベ
ルになった
• メモリが大きくなってWebブラウ
ザが落ちなくなった
%%% )*)*)*
Slide 20
Slide 20 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
業務システムのPWAメリット
利用者が限定される
定常的な利用が期待できる
高度なUIは求められない
Webブラウザ上で確実に動作する
20
オフライン化、表示の高速化
→ 生産性向上！
標準技術の採用による普遍性
→ 5〜10年以上の保守、運用
Web技術の採用
→ 技術者のアサインがしやすい
%%%
Slide 21
Slide 21 text
PAGE
# MOONGIFT / 12
DAY 2018/11/24
Technology
21
Slide 22
Slide 22 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
Service Worker
• CACHE API / リモートプッシュ通知で必須
• ワーカースレッド動作するので重たい処理をバックグラウン
ドで行わせるのに使える
• メッセージでメインスレッドとワーカースレッドでデータ送
受信可能
22
Slide 23
Slide 23 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
CACHE API
• Service Worker内で動作するキャッシュシステム
• URLをキー、レスポンスをバリューにしたKVS
• 有効期限などがないのでWorkboxと組み合わせると吉
23
リクエスト リクエスト
Service Worker
Webブラウザ
レスポンス レスポンス
サーバ
キャッシュなし
Slide 24
Slide 24 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
CACHE API
• Service Worker内で動作するキャッシュシステム
• URLをキー、レスポンスをバリューにしたKVS
• 有効期限などがないのでWorkboxと組み合わせると吉
24
リクエスト
Service Worker
Webブラウザ
レスポンス
サーバ
キャッシュあり
Slide 25
Slide 25 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
キャッシュパターン
25
ΦϯϥΠϯ ΦϑϥΠϯ උߟ
Ωϟογϡ ͋Γ ͳ͠ ͋Γ ͳ͠
ΩϟογϡϑΝʔετ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ جຊ
ωοτϫʔΫϑΝʔετ ωοτϫʔΫ ωοτϫʔΫ Ωϟογϡ Τϥʔ ։ൃ࣌ʹ͓קΊ
ΩϟογϡΦϯϦʔ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ
ωοτϫʔΫΦϯϦʔ ωοτϫʔΫ ωοτϫʔΫ ωοτϫʔΫ Τϥʔ ։ൃ࣌ʹ͓קΊ
ฏߦߋ৽ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ ΦϯϥΠϯͳΒΩϟογϡߋ৽
via Workbox
Slide 26
Slide 26 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
Webプッシュ通知
26
(PPHMF$ISPNF J044BGBSJ NBD044BGBSJ 'JSFGPY &EHF
7"1*% ˓ º º ˓ ˓
ಠࣗ ˓ º ˓ º º
Slide 27
Slide 27 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
IndexedDB
27
$PPLJF MPDBM4UPSBHF *OEFYFE%#
αΠζ ,# .# .#
͍ํ ಉظ ಉظ ඇಉظ
8FCϒϥβ ˓ ˓ ˓
4FSWJDF8PSLFS º º ˓
ܕ จࣈྻͷΈ จࣈྻͷΈ ˓
ݕࡧ º º ˓
Slide 28
Slide 28 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
WebAssembly
• コードの暗号化
• キーの隠蔽化
• Webアプリケーションの高速化
• Rustも良いけどGo1.11以降が個人的に本命
• GoではDOM操作、ネットワーク利用も可能
28
Slide 29
Slide 29 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
WebAuthn
• ハードウェアキーを使った認証
• Googleでは従業員全員に配布してフィッシン
グ被害がゼロに。さらにキーの自社開発、販
売も開始
• ハードウェアを手に入れるのが面倒な場合は
Kryptonが便利
• Google Chrome 70からTouch IDのサポート
29
Slide 30
Slide 30 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
マニフェストファイル
• アプリの仕様（マニフェスト）
を記述したファイル
• manifest.json といった名前
• アプリ名
• アイコン
• 最初に表示するURL
• 背景色
• テーマ色
30
{
"short_name": "短いアプリ名",
"name": "長いアプリ名",
"icons": [
{
"src": "アイコン.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Slide 31
Slide 31 text
PAGE
# MOONGIFT / 12
DAY 2018/11/24
Tips
31
Slide 32
Slide 32 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
キャッシュは注意
• 有効期限なし
• 間違ってキャッシュされるとアプリの設定から消さな
いと消えない（Android）
• 更新、有効期限、またはキャッシュ削除機能をあらか
じめ実装しておく
• メインスレッドでのレスポンスがそのままキャッシュ
される訳ではない
32
https://github.com/GoogleChrome/workbox
Slide 33
Slide 33 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
Chrome for Androidでの設定
33
chrome://flags で Bypass user engagement checks を有効にする
Slide 34
Slide 34 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
Lighthouseの利用
34
https://developers.google.com/web/tools/lighthouse/
Slide 35
Slide 35 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
オフラインを再現する
35
Chromeの開発者ツールでOfflineを有効にする
Slide 36
Slide 36 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
デスクトップでも使う
36
Slide 37
Slide 37 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
ネットワーク対応
• 判定
navigator.onLine
• イベント
window.addEventListener(‘online’, (e) => {})
window.addEventListener(‘offline’, (e) => {})
37
Slide 38
Slide 38 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
オフラインの考え方
• オフラインを意識させない仕組み
テキストデータ
• 下書きに保存する
写真とか添付する場合
38
Slide 39
Slide 39 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
マニフェストの便利Tips
• インストール数を知る
"start_url": "/?utm_source=homescreen"
• PWAの時だけ表示を変える
"start_url": “index.html?launcher=true"
• インストールダイアログを好きな時に出す
beforeinstallpromptイベントを使う
• ネイティブアプリを勧める（Android）
related_applicationsキーでアプリIDを指定
39
Slide 40
Slide 40 text
PAGE
# MOONGIFT / 12
DAY 2018/11/24
Conclusion
40
Slide 41
Slide 41 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
業務アプリのPWA化
• 中長期的な保守を考えるとオープンで安心なプラット
フォームがお勧め
• HTML5/JavaScriptが高機能化、高速化して実用的に
• 技術の組み合わせでアプリライクな機能、UXを実現
41
Slide 42
Slide 42 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
宣伝
PWAハンズオンの資料を公開中（オープンソース）
42
http://bit.ly/pwa_handson
Slide 43
Slide 43 text
PAGE
DAY 2018/11/24
# MOONGIFT / 12
ありがとうございました -
43
@goofmint
fb.me/goofmint
https://www.htmlhifive.com
この後のセッションもお楽しみください！