More Related Content
What's hot
What's hot (20)
Similar to PWA has come!! / 2019/2/9 ABCD 浜松
Similar to PWA has come!! / 2019/2/9 ABCD 浜松 (20)
More from Ryu Shindo
Recently uploaded
Recently uploaded (16)
PWA has come!! / 2019/2/9 ABCD 浜松
- 1. PWA has come!! @ABCD Damonte Hamamatsu 2019/02/09 Ryunosuke Shindo
- 2. 自己紹介 進藤 龍之介 エンジニア／日本Androidの会 Web Working Group PWA 集中勉強会主催 WordPress プラグイン「PWA for WordPress」開発 最近の趣味は EC サイト運営 Twitter @ryu_compin Fb ryushindo
- 3. has come? 2018年3月「PWAがたぶんくる」 How is now? 2018年9月「進撃する！」
- 4. PWA ちょっと旬な感じです SoftwareDesign 3月号 TRY! PWA ( 2/18 発売 )
- 5. 非技術系の人にも ビジネス+IT PWA（Progressive Web Apps）はどうスゴイのか？ 基本知識と12のメリットを解説 ( 2/7 公開） https://www.sbbit.jp/article/cont1/35949
- 7. PWA : Progressive Web Apps って？ ざっくり言うと Web アプリがローカルアプリになる！ • ホーム画面にアイコン • インストール時にWeb コンテンツやリソースのキャッシュ • キャッシュされた JavaScript がオフラインでアプリを制御 • 以下今のところAndroidだけ、という機能もあり • バックグラウンドでの動作（Background Sync） • Push通知
- 8. 細かくすると Progressive すべてのブラウザで動作するように、Progressive Enhancement の理念で構築する。 Responsive デスクトップ、モバイル、タブレットなどあらゆる環境に対応する。 Connectivity independent ServiceWorker の機能により、オフラインや低速回線でも動作する。 App-like 機能とコンテンツを切り分けるアップシェルモデルによりアプリのような操作感を実現する。 Fresh ServiceWorker のアップデートプロセスにより、常に最新の状態を保つ。 Safe HTTPSによる通信で情報漏洩やコンテンツ改ざんからの安全性を確保する。 Discoverable W3C準拠の Manifest と ServiceWorker の「スコープ」により検索エンジンはアプリを検知することができる。 Re-engageable プッシュ通知などの機能により再エンゲージメントを容易にする。 Installable アプリストアを経由しなくてもホーム画面にアプリとしてインストールすることができる。 Linkable URLとしてシェアすることができ、複雑なインストール要件を必要としない。 （Google Developer Blogより）
- 10. PWA の動作概要 キャッシュとオンラインコンテンツをService Workerが仲立ち Cache Online Service Worker Internet Local Cache Browser
- 11. ファイル構成は大きく分けて３種 • コンテンツ/アセット ( →既存の Web サイト) • HTML/CSS/JS • 画像、アイコン • データ • manifest • json • service worker • JS
- 12. Manifest • jsonで記述 • 各種設定項目 • アイコン、スプラッシュ、背景色、テーマカラー、縦横表 示、など { "name": "Weather", "short_name": "Weather", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, {
- 13. Service Worker • キャッシュの制御、Push通知、バックグラウンド処理 var filesToCache = [ '/', '/index.html', '/scripts/app.js’, //キャッシュするURL ]; self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); });
- 14. ひとまずの「 PWA 化」 サイトそのまんまでも、今フルHTTPSサイトなら • Manifest • Service Worker を追加して、インストール部分を追記したらと りあえずPWA化
- 15. DEMO – PWA for WordPress PWAの動きを見てみよう
- 16. 既存サイトを PWA 化 WordPress + WooCommerce の EC サイトをそのまま PWA 化
- 17. 事前に用意しておく オフラインページ 普通の固定ページでOK アイコン画像 png形式必須 サイズ 512px x 512px 以 上推奨
- 18. Demo – PWA for WordPress インストール https://wordpress.org/plugins/pwa4wp/ 「プラグイン→新規追加」から 「PWA for WordPress」または「PWA4WP」を検索
- 19. Demo – PWA for WordPress セットアップ •Manifest •ServiceWorker •PWA 発行
- 20. Demo – PWA for WordPress メイン画面
- 21. Demo – PWA for WordPress Manifest
- 22. Demo – PWA for WordPress Manifest
- 23. Demo – PWA for WordPress ServiceWorker
- 24. Demo – PWA for WordPress ServiceWorker
- 25. Demo – PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例１：画像（ jpg / png / gif ) だけキャッシュするには 以下の２行を指定 ^.*.(?!jpg|png|gif)(.{3,4})$ ^.*/$ 特定の拡張子以外（除外リストの指定なので、「以外」を除外する設定になる） 末尾が / で終わる
- 26. Demo – PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例２：REST API を除外する ^.*/wp-json/.*$
- 27. Demo – PWA for WordPress Chrome Developer Tool での確認 （Application タブ）
- 28. Demo – PWA for WordPress キャッシュされたデータ
- 29. Demo – PWA for WordPress 超高速！！ （Networkそもそも使わないんだから そりゃそうだ）
- 30. Demo – PWA for WordPress Auditsしてみる Chromeのツール「Lighthouse」 １００点！
- 31. インストール
- 32. インストール完了 • スプラッシュいいね • やっぱキャッシュすると速 い！ • ホーム画面のアイコンも
- 34. オフライン で見てみる OK！
- 36. モバイルにおける Web の存在 Web サイト不遇の時代？
- 42. 「壁」を突破 • 「ホーム画面に追加」を押してもらえるか • Push 通知を許可してもらえるか →Web サイトで通知の許可に「Yes」押したことありますか？ →もっと言うと、初見のサイトで「Yes」押しますか？ • 追加したアイコン、起動してもらえるか
- 43. PWA と相性がいいサイトの例 • 地域型の小さなビジネス • 空き状況や予約状況 • 予約者向けの通知 • 直接来店したときにインストール誘導できる • イベントサイト • スケジュールや会場の確認 • インフォメーションの発信 • ファンサイト、コミュニケーションサイト（SNSなど）
- 45. PWA だから「Web アプリ」じゃないとダメ？ • Web サイトと Web アプリの違い？ どっちでもいい • アプリしか PWA になれないの？ そんなことない • サイトをアプリ化しても意味ない？ そんなことない
- 46. 事前考慮点 • 通知、インストールなどの「許可」をもらうタイミング、シ チュエーション • どこを見せたいか →空き状況、新着情報、など • インストールにこだわらず、パフォーマンス向上目的、という のもあり
- 47. Cache Plan Cache の運用計画こそが PWA の命
- 49. PWA におけるキャッシュのキホン Cache first Network first No cache
- 50. Cache API • 有効期限的なものはありません。 • だからほっといても消えません。 • 同期、更新、削除は自分でやります。
- 52. キャッシュをどう扱うか • そもそものキャッシュの目的 • 高速化 • ネットワークの節約、オフライン対応 • 考慮点 • 更新の反映 • インタラクティブなコンテンツ
- 53. サイト構成によるCache制御 • SPA • AppShell 部分とそれ以外に明確に分けられるので 設計がシンプル • Multiple Page • サイト構成によるが、固定コンテンツとそれ以外 の個別の制御 • WordPress のほとんどのサイトはこの構成
- 54. PWA4WP のここがいけてる • キャッシュの有効期限が設定できる ブログなどの新着記事一覧の埋め込み部分の反映 記事の内容などの更新 急がないけどずっと更新されないのはダメ、というコンテ ンツはわりと多い • キャッシュの除外が柔軟に指定できる Ajax などで取得するような API などの出力データの取り出し 元 リアルタイムで状況を表示するようなコンテンツ 画像だけキャッシュする、というような設定も可能
- 57. http の埋め込みを探して修正 • http → https 化したときに、http 埋め込みが残留しているケース が多い • 外部サイトのアイコン • JavaScript からの呼び出し • WordPress のプラグインからの呼び出し（見つけにくい） • DevTools の Console で確認する
- 58. キャッシュ焦げ付き問題 • IndexedDB などを利用して実装 • WorkBox にはキャッシュの有効期限を指定できるプラグインあ り • WordPress なら PWA4WP ！
- 59. iPhone キラー：行き止まり • 画像の全画面表示などでどん詰まり <a href="some-beautiful-picture.jpg"><img src="some-beautiful-picture.jpg" width=xxx height=xxx></a>
- 60. 外部ページとの行き来 • 外部ページに遷移すると、PWA はポップアウト画面（ブラウ ザ）を開くが、処理完了後正しく戻れない • 認証 • 決済 • ひとつ前の画面からポップアウトさせて結果を受け取るしか今 のところ手がない？ authwindow = window.open (”auth.html",”authentication", "width=480,height=480");
- 61. 番外編：WordPress プラグインの動作障害 • PWA にしたら特定のプラグインが動かなくなった • プラグインが JavaScript で自身のフォルダを参照してリアルタイム性の 必要な情報を取得していた場合など • キャッシュの除外設定でプラグインの導入先を除外することで多くは 回避可能（PWA for WordPress） ^.*/wp-content/plugins/plugin-name/.*$
- 63. WordPress の例： ページ構成そのまま PWA 化 Template Data Cache ページまる ごとキャッ シュ
- 64. App Shell ライクにできるのが理想 Template Data REST API JavaScript Cache ページの外 枠だけ キャッシュ
- 65. API 化して、URL をキャッシュ除外 Template Data REST API JavaScript Cache ページの外 枠だけ キャッシュ キャッシュ 除外する
- 66. まとめ PWA はキャッシュ制御がとても大事。 いきなり完成型は難しいかもしれないし、 ちょっとずつでも。 （Progressive ＝ 段階的に） ぜひ試してみてください。
- 67. ありがとうございました。 PWA for WordPress ぜひお試しください https://wordpress.org/plugins/pwa4wp/
- 68. 続く
- 69. 続き
- 70. PWA has come again!! @ABCD Damonte Hamamatsu 2019/02/09 Ryunosuke Shindo
- 71. 自己紹介 進藤 龍之介 エンジニア／日本Androidの会 Web Working Group PWA 集中勉強会主催 WordPress プラグイン「PWA for WordPress」開発 最近の趣味は EC サイト運営 Twitter @ryu_compin Fb ryushindo
- 72. PWA ちょっと旬な感じです SoftwareDesign 3月号 TRY! PWA ( 2/18 発売 )
- 73. 非技術系の人にも ビジネス+IT PWA（Progressive Web Apps）はどうスゴイのか？ 基本知識と12のメリットを解説 ( 2/7 公開） https://www.sbbit.jp/article/cont1/35949
- 74. スマホ Web の検証をしよう PWA のテストってちょっと面倒
- 75. Chrome DevTools • PC でのテスト • 実機テスト chrome://inspect/#devices
- 78. ありがとうございました。 PWA for WordPress ぜひお試しください https://wordpress.org/plugins/pwa4wp/