Challenge PWA!! Technical Edition @JAG201809
- 1. Challenge PWA!! Web の舞台はホーム画面へ進撃する！ Technical Edition 2018/09/19 @Japan Android Group Ryunosuke Shindo
- 2. 自己紹介 進藤 龍之介 エンジニア／日本Androidの会 Web Working Group PWA 集中勉強会主催 www.crowdfarm.jp 運営 プラグイン「PWA for WordPress」開発 Twitter @ryu_compin Fb ryushindo
- 3. 2018/9/15 @WordCamp Tokyo 2018 https://www.slideshare.net/RyuShindo/challenge-pwa-wordcamp-tokyo-2018 「できるだけ多くの人に PWA を知って欲しいと思いますの で、非技術者の方でもわかっ ていただけるようにコーディ ングレスな形でお話しを進め たいと思います。」
- 4. PWA を暑アツく語ってみて 実際のところ、Web 系、特にデザイン やディレクション、サイトオーナー、 マーケティングなど、技術系以外の人 にはまだ PWA はあまり浸透していない。 知っていても難しそう、と思われて手 を出せないでいる。 でも、かなり興味はある。 PWA の導入を本来決断する層の人たち に知ってもらうことが PWA 普及にはと ても大事。
- 6. What is a Progressive Web App? • Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. • Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. • Connectivity independent - Enhanced with service workers to work offline or on low-quality networks. • App-like - Feels like an app, because the app shell model separates the application functionality from application content . • Fresh - Always up-to-date thanks to the service worker update process. • Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. • Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it. • Re-engageable - Makes re-engagement easy through features like push notifications. • Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store. • Linkable - Easily share the application via URL, does not require complex installation. https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ 「はじめてのプログレッシブウェブアプリ」より
- 7. ざっくり言うと Web アプリがローカルアプリになる！ • ホーム画面にアイコン • インストール時にWeb コンテンツやリソースのキャッシュ • キャッシュされた JavaScript がオフラインでアプリを制御 • 以下今のところAndroidだけ • バックグラウンドでの動作（Background Sync） • Push通知
- 8. PWA の動作概要 キャッシュとオンラインコンテンツをService Workerが仲立ち Cache Online Service Worker Local(offline) で実行
- 9. 「Web 側」から見てきた PWA の立ち位置 PWA はフロンティアになれるのか
- 16. 個人的見解、共感が得られるかな？ Home App1 Google Web1 Web2 Web3 ・・・ SNS SNS 多くのユースケースにおいて • 入り口は検索か SNS • ブックマークなんて使わない • Web サイトは全部ひっくるめ て、検索や SNS シェアの先にあ る世界としてひとくくり、ひと つのアプリみたいに（無意識下 に）思われ、使われていない か？
- 20. 今日は「Technical Edition」 WordPress の PWA 化から見えてくる PWA 実装の勘所
- 21. WordPress を PWA にするということ • ほとんどの WordPress サイトは SPA じゃない （コンテンツだけ切り離せない） • サーバーサイド（PHP）で埋め込まれた新着情報群、複雑に入 り組んだコンテンツ • ユーザー（運用、構築）に技術系の人がいるとは限らない • PWA ニーズはわりとある • 情報発信系（ブログ、メディア、ニュース） • Web上のカタログをタブレットアプリ化して営業ツールに流用 • EC
- 23. キャッシュの更新タイミング • ServiceWorkerはオンライン時に同期され、 次回起動時に更新されたものが動作する • Cacheは明示的に更新するか、ServiceWorker のActivate時に削除、再取得する実装が一般的 • 先行の既存プラグインはほとんどこの実装 このままじゃ新しく書いた記事が新着リスト に載らない！？
- 24. キャッシュをどう扱うか • そもそものキャッシュの目的 • 高速化 • ネットワークの節約、オフライン対応 • 考慮点 • 更新の反映 • インタラクティブなコンテンツ
- 25. PWA におけるキャッシュのキホン Cache first Network first No cache (With OFFLINE Page) HIGH PERFORMANCE キャッシュの 利用度が高い ほどパフォー マンスはいい
- 26. WordPress のページ構成で PWA 化 Template Data Cache ページまる ごとキャッ シュ
- 27. App Shell ライクにできるのが理想 Template Data REST API JavaScript Cache ページの外 枠だけ キャッシュ
- 28. Progressive – 段階的導入 • WordPress で運用されている多くのサイトで、いきなり SPA 構 成や コンテンツの Ajax 化は困難 • ユーザーの習熟度に合わせていけるように • 今あるリソースをスタート地点に始められるように設計 • 最終目標は AppShell ライクなフレーム部とコンテンツ部の切り 離し
- 29. PWA for WordPress キャッシュのお悩みを解決できる Wordpress の PWA 化プラグイン作りました！
- 30. PWA4WP のここがいけてる • キャッシュの有効期限が設定できる ブログなどの新着記事一覧の埋め込み部分の反映 記事の内容などの更新 急がないけどずっと更新されないのはダメ、というコンテ ンツはわりと多い • キャッシュの除外が柔軟に指定できる Ajax などで取得するような API などの出力データの取り出し 元 リアルタイムで状況を表示するようなコンテンツ 画像だけキャッシュする、というような設定も可能
- 32. 事前に用意しておく オフラインページ 普通の固定ページでOK アイコン画像 png形式必須 サイズ 512px x 512px 以 上推奨
- 33. Demo – PWA for WordPress インストール https://wordpress.org/plugins/pwa4wp/ 「プラグイン→新規追加」から 「PWA for WordPress」または「PWA4WP」を検索
- 34. Demo – PWA for WordPress セットアップ •Manifest •ServiceWorker •PWA 発行
- 35. Demo – PWA for WordPress メイン画面
- 36. Demo – PWA for WordPress Manifest
- 37. Demo – PWA for WordPress Manifest
- 38. Demo – PWA for WordPress ServiceWorker
- 39. Demo – PWA for WordPress ServiceWorker
- 40. Demo – PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例１：画像（ jpg / png / gif ) だけキャッシュするには 以下の２行を指定 ^.*.(?!jpg|png|gif)(.{3,4})$ ^.*/$ 特定の拡張子以外（除外リストの指定なので、「以外」を除外する設定になる） 末尾が / で終わる
- 41. Demo – PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例２：REST API を除外する ^.*/wp-json/.*$
- 42. Demo – PWA for WordPress Chrome Developer Tool での確認 （Application タブ）
- 43. Demo – PWA for WordPressキャッシュされたデータ
- 44. Demo – PWA for WordPress 超高速！！ （Networkそもそも使わないんだから そりゃそうだ）
- 45. Demo – PWA for WordPress Auditsしてみる Chromeのツール「Lighthouse」 １００点！
- 46. 生成される ServiceWorker トップディレクトリに生成 • WordPress のディレクトリ構成は仮想パスなので、Scopeのトップに置 こうとしても実在しない • ServiceWorker は自身が配置されたディレクトリ以下のコンテンツにし か適用されない パラメータを ServiceWorker 内に埋め込み、機能はプラグイン ディレクトリ内の JavaScript を呼び出し
- 48. 機能追加予定 • Push • マルチサイト対応 • インストール提示タイミングのコントロール • コンテンツ内のウィジェットなどをAjaxに切り離す （別プラグイン？）
- 50. 使ってみたい方へ • PWA for WordPress デモ＆ハンズオン 9/22(土) 14:00～ WordPressもくもく勉強会@日本橋 #21 https://wpmokumoku.connpass.com/event/98544/ 9/30(日) 10:00～ 羽田 WordPress Meetup https://www.meetup.com/ja-JP/Tokyo-WordPress- Meetup/events/254132755/
- 51. 最新ソースは Github にあります https://github.com/ryu-compin/pwa4wp 欲しい機能とかあったらリクエストください！ ・・・って WordCamp では言いましたが今日は違う。 欲しい機能があったら付け足してPullリクお願い！