業務システムでこそ使えるPWA

FRONTEND CONFERENCE 2018

https://2018.kfug.jp/

での発表資料です。

Transcript

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