Downloaded 11 times
More Related Content
![[社内勉強会]SPAのすすめ](https://cdn.slidesharecdn.com/ss_thumbnails/spa-160304020346-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809
- 1. Challenge PWA!! Web の舞台はホーム画面へ進撃する！ TechnicalEdition 2018/09/19 @Japan Android Group Ryunosuke Shindo
- 2. 自己紹介 進藤 龍之介 エンジニア／日本Androidの会 Web WorkingGroup PWA 集中勉強会主催 www.crowdfarm.jp 運営 プラグイン「PWA for WordPress」開発 Twitter @ryu_compin Fb ryushindo
- 3. 2018/9/15 @WordCamp Tokyo2018 https://www.slideshare.net/RyuShindo/challenge-pwa-wordcamp-tokyo-2018 「できるだけ多くの人に PWA を知って欲しいと思いますの で、非技術者の方でもわかっ ていただけるようにコーディ ングレスな形でお話しを進め たいと思います。」
- 4. PWA を暑アツく語ってみて 実際のところ、Web 系、特にデザイン やディレクション、サイトオーナー、 マーケティングなど、技術系以外の人 にはまだPWA はあまり浸透していない。 知っていても難しそう、と思われて手 を出せないでいる。 でも、かなり興味はある。 PWA の導入を本来決断する層の人たち に知ってもらうことが PWA 普及にはと ても大事。
- 5.
- 6. What is aProgressive 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 ServiceWorker Local(offline) で実行
- 9. 「Web 側」から見てきた PWA の立ち位置 PWAはフロンティアになれるのか
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. 個人的見解、共感が得られるかな？ Home App1 Google Web1 Web2 Web3 ・・・ SNS SNS 多くのユースケースにおいて • 入り口は検索か SNS •ブックマークなんて使わない • Web サイトは全部ひっくるめ て、検索や SNS シェアの先にあ る世界としてひとくくり、ひと つのアプリみたいに（無意識下 に）思われ、使われていない か？
- 17.
- 18.
- 19.
- 20. 今日は「Technical Edition」 WordPress のPWA 化から見えてくる PWA 実装の勘所
- 21. WordPress を PWAにするということ • ほとんどの WordPress サイトは SPA じゃない （コンテンツだけ切り離せない） • サーバーサイド（PHP）で埋め込まれた新着情報群、複雑に入 り組んだコンテンツ • ユーザー（運用、構築）に技術系の人がいるとは限らない • PWA ニーズはわりとある • 情報発信系（ブログ、メディア、ニュース） • Web上のカタログをタブレットアプリ化して営業ツールに流用 • EC
- 22.
- 23. キャッシュの更新タイミング • ServiceWorkerはオンライン時に同期され、 次回起動時に更新されたものが動作する • Cacheは明示的に更新するか、ServiceWorker のActivate時に削除、再取得する実装が一般的 •先行の既存プラグインはほとんどこの実装 このままじゃ新しく書いた記事が新着リスト に載らない！？
- 24. キャッシュをどう扱うか • そもそものキャッシュの目的 • 高速化 •ネットワークの節約、オフライン対応 • 考慮点 • 更新の反映 • インタラクティブなコンテンツ
- 25. PWA におけるキャッシュのキホン Cachefirst Network first No cache (With OFFLINE Page) HIGH PERFORMANCE キャッシュの 利用度が高い ほどパフォー マンスはいい
- 26. WordPress のページ構成で PWA化 Template Data Cache ページまる ごとキャッ シュ
- 27. App Shell ライクにできるのが理想 TemplateData REST API JavaScript Cache ページの外 枠だけ キャッシュ
- 28. Progressive – 段階的導入 •WordPress で運用されている多くのサイトで、いきなり SPA 構 成や コンテンツの Ajax 化は困難 • ユーザーの習熟度に合わせていけるように • 今あるリソースをスタート地点に始められるように設計 • 最終目標は AppShell ライクなフレーム部とコンテンツ部の切り 離し
- 29. PWA for WordPress キャッシュのお悩みを解決できる Wordpressの PWA 化プラグイン作りました！
- 30. PWA4WP のここがいけてる • キャッシュの有効期限が設定できる ブログなどの新着記事一覧の埋め込み部分の反映 記事の内容などの更新 急がないけどずっと更新されないのはダメ、というコンテ ンツはわりと多い •キャッシュの除外が柔軟に指定できる Ajax などで取得するような API などの出力データの取り出し 元 リアルタイムで状況を表示するようなコンテンツ 画像だけキャッシュする、というような設定も可能
- 31.
- 32.
- 33. Demo – PWAfor WordPress インストール https://wordpress.org/plugins/pwa4wp/ 「プラグイン→新規追加」から 「PWA for WordPress」または「PWA4WP」を検索
- 34. Demo – PWAfor WordPress セットアップ •Manifest •ServiceWorker •PWA 発行
- 35. Demo – PWAfor WordPress メイン画面
- 36. Demo – PWAfor WordPress Manifest
- 37. Demo – PWAfor WordPress Manifest
- 38. Demo – PWAfor WordPress ServiceWorker
- 39. Demo – PWAfor WordPress ServiceWorker
- 40. Demo – PWAfor WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例１：画像（ jpg / png / gif ) だけキャッシュするには 以下の２行を指定 ^.*.(?!jpg|png|gif)(.{3,4})$ ^.*/$ 特定の拡張子以外（除外リストの指定なので、「以外」を除外する設定になる） 末尾が / で終わる
- 41. Demo – PWAfor WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例２：REST API を除外する ^.*/wp-json/.*$
- 42. Demo – PWAfor WordPress Chrome Developer Tool での確認 （Application タブ）
- 43. Demo – PWAfor WordPressキャッシュされたデータ
- 44. Demo – PWAfor WordPress 超高速！！ （Networkそもそも使わないんだから そりゃそうだ）
- 45. Demo – PWAfor WordPress Auditsしてみる Chromeのツール「Lighthouse」 １００点！
- 46. 生成される ServiceWorker トップディレクトリに生成 • WordPressのディレクトリ構成は仮想パスなので、Scopeのトップに置 こうとしても実在しない • ServiceWorker は自身が配置されたディレクトリ以下のコンテンツにし か適用されない パラメータを ServiceWorker 内に埋め込み、機能はプラグイン ディレクトリ内の JavaScript を呼び出し
- 47.
- 48. 機能追加予定 • Push • マルチサイト対応 •インストール提示タイミングのコントロール • コンテンツ内のウィジェットなどをAjaxに切り離す （別プラグイン？）
- 49.
- 50. 使ってみたい方へ • PWA forWordPress デモ＆ハンズオン 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リクお願い！
- 52.