Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
自己紹介
進藤 龍之介
エンジニア/日本Androidの会
Web Working Group PWA 集中勉強会主催
www.crowdfarm.jp 運営
プラグイン「PWA for WordPress」開発
Twitter @ryu_co...
PWA : Progressive Web Apps
Progressiveであるということ
Progressive Web Apps
Progressive
「進歩」「革新」「前進」「段階」「累進」「進行」
段階的な実装、累進的な進歩が可能な Web アプリ
ローカルインストールされたアプリのような挙動
インストール
• ホーム画面...
What is a Progressive Web App?
• Progressive - Works for every user, regardless of browser choice because it's built with ...
ざっくり言うと
Web アプリがローカルアプリになる!
• ホーム画面にアイコン
• インストール時にWeb コンテンツやリソースのキャッシュ
• キャッシュされた JavaScript がオフラインでアプリを制御
• 以下今のところAndro...
PWA の動作概要
キャッシュとオンラインコンテンツをService Workerが仲立ち
Cache
Online
Service Worker
Local(offline) で実行
PWA のいいところ
Web とアプリのいいとこどり
はやい
• 動作が速い
• オフラインこそ最速
• 導入が早い
• 既存コンテンツにちょっと足すだけ
うまい
• アプリのいいとこ
• ホーム画面のアイコン
• Push通知
• バックグラウンド
• Web のいいとこ
• 検索に載る
• 更新が容易
• ひとつのコードで多くのプラットフォームに対応
安い
• 導入コストが安い
• 既にWebサイト(Webアプリ)があればそのままアプリ化で
きる
• アプリとWebを別個に開発しなくていい
• 通信量が抑えられる
• サーバー負荷を抑えて事業者に優しい
• 通信量を抑えて利用者に優しい
• ...
あらゆるプラットフォームへ
なぜ今 PWA なのか
PWA に対応するプラットフォーム – 3月
https://caniuse.com/#search=Service%20Worker
PWA に対応するプラットフォーム - 9月
Safari の対応は日本でのインパクト大
3月末のバージョンアップで iOS / Safari に ServiceWorker が
実装された
日本ではiOSのシェアが高いのでSafariの対応によって対応環
境の割合が飛躍的にアップ!
An...
Windows & Edge での対応
Windows はパッケージ化した PWA をストアで配布できる
ようになる
PWA のパッケージ化ツールとしてMicrosoft から PWA
BUILDER を公開(もちろんフリー)
https://...
75.41
43.12
12.6
37.09
11.99
19.79
GLOBAL
JAPAN
Global Japan
対応済 75.41 43.12
新規対応 12.6 37.09
未対応 11.99 19.79
SERVICE WORKE...
これだけ対応してれば導入の価値あり
Japan:43.12% → 80.21%
Global:75.41% → 88.01%
※モバイルに対象を絞れば
Japan/Globalともに99%!!
導入によるデメリットは?
• PWA の導入によって既存の Web サイトの機能を毀損す
ることはない。
※正しく導入すれば!
• ServiceWorker が利用可能な場合だけ動作させる実装で
これまで動いていた環境はそのままに、新しい環境...
ひとつだけ気をつけて!
PWA でアドレスバーを表示しないとき・・・
iPhoneだと「戻る」ボタンがないので戻れませ
ん。
行き止まりページなんかがあると悲惨です。
ページ構成はリンクの遷移をちゃんと意識したナ
ビゲーションを実装しましょう。
段階的導入
「Progressive」 なアプローチ
• いきなり全部ゼロから作らなくてもいい
• 段階的に機能を追加できる
• SPA (シングルページ)でなくてもいい
「Progressive Enhancement」
環境の差異を受け入れ...
アプリ化は必須じゃない
• ServiceWorkerは「アプリ化」しなくても動
きます。
• Android/Windowsならchromeで
• chrome://serviceworker-internals/
を見てみよう。
• 「アプ...
PWAの構成
2つのファイルと、ほんのちょっとのコード追加
ファイル構成は大きく分けて3種
• コンテンツ/アセット ( →既存の Web サイト)
• HTML/CSS/JS
• 画像、アイコン
• データ
• manifest
• json
• service worker
• JS
コンテンツ / アセット
• ResponsiveならWebサイトそのままでもとりあえずOK
• キャッシュするもの、しないもの
• アイコンはお忘れなく
• オフライン時に表示するコンテンツを追加
if('serviceWorker' in ...
Manifest
• jsonで記述
• 各種設定項目
• アイコン、スプラッシュ、背景色、テーマカラー、縦横表
示、など
{
"name": "Weather",
"short_name": "Weather",
"icons": [{
"s...
Service Worker
• キャッシュの制御、Push通知、バックグラウンド処理
var filesToCache = [
'/',
'/index.html',
'/scripts/app.js’,
//キャッシュするURL
];
se...
ひとまずの「 PWA 化」
サイトそのまんまでも、今フルHTTPSサイトなら
• Manifest
• Service Worker
を追加して、インストール部分を追記したらと
りあえずPWA化
既存サイトを PWA 化
WordPress + WooCommerce の EC サイトをそのまま PWA 化
インストール
OLD Version
NEW Version
インストール完了
• スプラッシュいいね
• やっぱキャッシュすると速
い!
• ホーム画面のアイコンも
ブラウザ表示と PWA
ブラウザ PWA
アドレスバー
の有無
オフライン
で見てみる
OK!
アプリのサイズ
わずか201K、
とてもコンパクト!
インストール発生条件
• https
• 5分以上間隔を空けて、2回目以降のアクセス
• Manifest, ServiceWorker が存在する
最低限設定するところ
• サイト名、アプリケーション短縮名
デフォルトでサイトタイトルが入るのでそのままでよければOK
• アイコン、スプラッシュ用アイコン
アプリの顔、超重要。pngファイルを用意する
• 背景色とテーマカラー
スプラッ...
Cache Plan
Cache の運用計画こそが PWA の命
キャッシュ
※ここで言うキャッシュは、サーバーサイドの
キャッシュではなく、ブラウザ側でキャッシュさ
れるデータを言います。
PWA におけるキャッシュのキホン
 Cache first
 Network first
 No cache
Cache API
• 有効期限的なものはありません。
• だからほっといても消えません。
• 同期、更新、削除は自分でやります。
サイト構成によるCache制御
• SPA
• AppShell 部分とそれ以外に明確に分けられるので
設計がシンプル
• Multiple Page
• サイト構成によるが、固定コンテンツとそれ以外
の個別の制御
• WordPress のほ...
一般的な PWA の Cache 削除
Activate時に削除
self.addEventListener('activate', function(e) {
e.waitUntil(
caches.keys().then(function(...
更新タイミング
• ServiceWorkerはオンライン時に同期され、次回起動時に
更新されたものが動作する
• Cacheは明示的に更新するか、ServiceWorkerのActivate時
に削除、再取得される
このままじゃ新しく書いた記...
キャッシュをどう扱うか
• そもそものキャッシュの目的
• 高速化
• ネットワークの節約、オフライン対応
• 考慮点
• 更新の反映
• インタラクティブなコンテンツ
悩みどころ
更新を反映したいところ
即時反映したいところ
WordPress ではほとんどのコン
テンツがサーバー側で生成され
てページに埋め込まれた状態で
ブラウザに届く
6/23 WordBench Tokyo
こんな宣言しました
PWA for WordPress
キャッシュのお悩みを解決できる
Wordpress の PWA 化プラグイン作りました!
PWA4WP のここがいけてる
• キャッシュの有効期限が設定できる
ブログなどの新着記事一覧の埋め込み部分の反映
記事の内容などの更新
急がないけどずっと更新されないのはダメ、というコンテ
ンツはわりと多い
• キャッシュの除外が柔軟に...
使ってみよう
DEMO... うまくいきますように
事前に用意しておく
オフラインページ
普通の固定ページでOK
アイコン画像
png形式必須
サイズ 512px x 512px 以
上推奨
Demo – PWA for WordPress
インストール
https://wordpress.org/plugins/pwa4wp/
「プラグイン→新規追加」から
「PWA for WordPress」または「PWA4WP」を検索
Demo – PWA for WordPress
セットアップ
•Manifest
•ServiceWorker
•PWA 発行
Demo – PWA for WordPress
メイン画面
Demo – PWA for WordPress
Manifest
Demo – PWA for WordPress
Manifest
Demo – PWA for WordPress
ServiceWorker
Demo – PWA for WordPress
ServiceWorker
Demo – PWA for WordPress
ServiceWorker キャッシュ制御 ( 正規表現 )
例1:画像( jpg / png / gif ) だけキャッシュするには
以下の2行を指定
^.*.(?!jpg|png|gif)(...
Demo – PWA for WordPress
ServiceWorker キャッシュ制御 ( 正規表現 )
例2:REST API を除外する
^.*/wp-json/.*$
Demo – PWA for WordPress
Chrome Developer Tool での確認
(Application タブ)
Demo – PWA for WordPress
キャッシュされたデータ
Demo – PWA for WordPress
超高速!!
(Networkそもそも使わないんだから
そりゃそうだ)
Demo – PWA for WordPress
Auditsしてみる
Chromeのツール「Lighthouse」
100点!
機能追加予定
• Push
• マルチサイト対応
• インストール提示タイミングのコントロール
• コンテンツ内のウィジェットなどをAjaxに切り離す
(別プラグイン?)
欲しい機能とかあればリクエストください!
最後に
キャッシュ制御がとても大事。
いきなり完成型は難しいかもしれないし、
ちょっとずつでも。
(Progressive = 段階的に)
ぜひ試してみてください。
One more thing?
PWA for WordPress は Gutenberg Ready です!
(特になにも干渉しないだけだけどね)
もっと知りたい方へ
• 「Challenge PWA!! - テクニカルエディション」
9/19(水) 19:00~
日本Androidの会 9月定例会
https://japan-android-group.connpass.com/even...
ありがとうございました。
プラグインのフィードバックぜひお寄せください♪
https://wordpress.org/plugins/pwa4wp/
Challenge PWA!!  WordCamp Tokyo 2018
Próxima SlideShare
Cargando en…5
×

Challenge PWA!! WordCamp Tokyo 2018

5.574 visualizaciones

Publicado el

2018年3月末、iOS+Safari の ServiceWorker 搭載により、いよいよスマートフォンの99%のデバイスで PWA が稼働できる下地が整いました。

私たちの Web サイト、Web アプリケーションは、これから「アプリ」としてユーザーのホーム画面へ進出していくことができるのです!

このセッションでは、PWA (Progressive Web Apps) とはどんなものなのか、その利点ご紹介しつつ、WordPress の PWA化について、その簡単な手法や注意点などのノウハウを時間の許す限りお伝えしたいと思います。

また、WordPress PWA 化プラグイン「PWA for WordPress」を利用したクイックな WordPress サイトの PWA化のデモもお披露目したいと思っています。
https://wordpress.org/plugins/pwa4wp/

できるだけ多くの人に PWA を知って欲しいと思いますので、非技術者の方でもわかっていただけるようにコーディングレスな形でお話しを進めたいと思います。

Publicado en: Software
  • Sé el primero en comentar

Challenge PWA!! WordCamp Tokyo 2018

  1. 1. 自己紹介 進藤 龍之介 エンジニア/日本Androidの会 Web Working Group PWA 集中勉強会主催 www.crowdfarm.jp 運営 プラグイン「PWA for WordPress」開発 Twitter @ryu_compin Fb ryushindo
  2. 2. PWA : Progressive Web Apps Progressiveであるということ
  3. 3. Progressive Web Apps Progressive 「進歩」「革新」「前進」「段階」「累進」「進行」 段階的な実装、累進的な進歩が可能な Web アプリ ローカルインストールされたアプリのような挙動 インストール • ホーム画面にアイコン ネットワーク非依存での動作 • つながらなくてもなんとかする技術 Push通知などのアプリライクな機能
  4. 4. 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/ 「はじめてのプログレッシブウェブアプリ」より
  5. 5. ざっくり言うと Web アプリがローカルアプリになる! • ホーム画面にアイコン • インストール時にWeb コンテンツやリソースのキャッシュ • キャッシュされた JavaScript がオフラインでアプリを制御 • 以下今のところAndroidだけ • バックグラウンドでの動作(Background Sync) • Push通知
  6. 6. PWA の動作概要 キャッシュとオンラインコンテンツをService Workerが仲立ち Cache Online Service Worker Local(offline) で実行
  7. 7. PWA のいいところ Web とアプリのいいとこどり
  8. 8. はやい • 動作が速い • オフラインこそ最速 • 導入が早い • 既存コンテンツにちょっと足すだけ
  9. 9. うまい • アプリのいいとこ • ホーム画面のアイコン • Push通知 • バックグラウンド • Web のいいとこ • 検索に載る • 更新が容易 • ひとつのコードで多くのプラットフォームに対応
  10. 10. 安い • 導入コストが安い • 既にWebサイト(Webアプリ)があればそのままアプリ化で きる • アプリとWebを別個に開発しなくていい • 通信量が抑えられる • サーバー負荷を抑えて事業者に優しい • 通信量を抑えて利用者に優しい • PWA はとてもコンパクト
  11. 11. あらゆるプラットフォームへ なぜ今 PWA なのか
  12. 12. PWA に対応するプラットフォーム – 3月 https://caniuse.com/#search=Service%20Worker
  13. 13. PWA に対応するプラットフォーム - 9月
  14. 14. Safari の対応は日本でのインパクト大 3月末のバージョンアップで iOS / Safari に ServiceWorker が 実装された 日本ではiOSのシェアが高いのでSafariの対応によって対応環 境の割合が飛躍的にアップ! Android が8割を超える海外では既にPWAは一般化している
  15. 15. Windows & Edge での対応 Windows はパッケージ化した PWA をストアで配布できる ようになる PWA のパッケージ化ツールとしてMicrosoft から PWA BUILDER を公開(もちろんフリー) https://www.pwabuilder.com/ Bing 検索による PWA 収集
  16. 16. 75.41 43.12 12.6 37.09 11.99 19.79 GLOBAL JAPAN Global Japan 対応済 75.41 43.12 新規対応 12.6 37.09 未対応 11.99 19.79 SERVICE WORKER 対応状況 対応済 新規対応 未対応
  17. 17. これだけ対応してれば導入の価値あり Japan:43.12% → 80.21% Global:75.41% → 88.01% ※モバイルに対象を絞れば Japan/Globalともに99%!!
  18. 18. 導入によるデメリットは? • PWA の導入によって既存の Web サイトの機能を毀損す ることはない。 ※正しく導入すれば! • ServiceWorker が利用可能な場合だけ動作させる実装で これまで動いていた環境はそのままに、新しい環境で 新しい機能の恩恵を受ける →これこそ Progressive Enhancement
  19. 19. ひとつだけ気をつけて! PWA でアドレスバーを表示しないとき・・・ iPhoneだと「戻る」ボタンがないので戻れませ ん。 行き止まりページなんかがあると悲惨です。 ページ構成はリンクの遷移をちゃんと意識したナ ビゲーションを実装しましょう。
  20. 20. 段階的導入 「Progressive」 なアプローチ • いきなり全部ゼロから作らなくてもいい • 段階的に機能を追加できる • SPA (シングルページ)でなくてもいい 「Progressive Enhancement」 環境の差異を受け入れて、機能に制約のある環境でも情報は 表示できるようにしつつ、リッチな機能がある環境ではそれ を存分に利用する。
  21. 21. アプリ化は必須じゃない • ServiceWorkerは「アプリ化」しなくても動 きます。 • Android/Windowsならchromeで • chrome://serviceworker-internals/ を見てみよう。 • 「アプリ」としてじゃなくても、キャッ シュを制御した高速化の手段として活用で きます。
  22. 22. PWAの構成 2つのファイルと、ほんのちょっとのコード追加
  23. 23. ファイル構成は大きく分けて3種 • コンテンツ/アセット ( →既存の Web サイト) • HTML/CSS/JS • 画像、アイコン • データ • manifest • json • service worker • JS
  24. 24. コンテンツ / アセット • ResponsiveならWebサイトそのままでもとりあえずOK • キャッシュするもの、しないもの • アイコンはお忘れなく • オフライン時に表示するコンテンツを追加 if('serviceWorker' in navigator) { navigator.serviceWorker .register('/service-worker.js') .then(function() { console.log('Service Worker Registered'); }); } ※Service Workerのインストールを追記
  25. 25. 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" }, {
  26. 26. 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); }) ); });
  27. 27. ひとまずの「 PWA 化」 サイトそのまんまでも、今フルHTTPSサイトなら • Manifest • Service Worker を追加して、インストール部分を追記したらと りあえずPWA化
  28. 28. 既存サイトを PWA 化 WordPress + WooCommerce の EC サイトをそのまま PWA 化
  29. 29. インストール OLD Version NEW Version
  30. 30. インストール完了 • スプラッシュいいね • やっぱキャッシュすると速 い! • ホーム画面のアイコンも
  31. 31. ブラウザ表示と PWA ブラウザ PWA アドレスバー の有無
  32. 32. オフライン で見てみる OK!
  33. 33. アプリのサイズ わずか201K、 とてもコンパクト!
  34. 34. インストール発生条件 • https • 5分以上間隔を空けて、2回目以降のアクセス • Manifest, ServiceWorker が存在する
  35. 35. 最低限設定するところ • サイト名、アプリケーション短縮名 デフォルトでサイトタイトルが入るのでそのままでよければOK • アイコン、スプラッシュ用アイコン アプリの顔、超重要。pngファイルを用意する • 背景色とテーマカラー スプラッシュ画面で使用 • オフラインページ 固定ページを用意 jsでゲームとか作ったり、ちょっとした遊び心があってもよし
  36. 36. Cache Plan Cache の運用計画こそが PWA の命
  37. 37. キャッシュ ※ここで言うキャッシュは、サーバーサイドの キャッシュではなく、ブラウザ側でキャッシュさ れるデータを言います。
  38. 38. PWA におけるキャッシュのキホン  Cache first  Network first  No cache
  39. 39. Cache API • 有効期限的なものはありません。 • だからほっといても消えません。 • 同期、更新、削除は自分でやります。
  40. 40. サイト構成によるCache制御 • SPA • AppShell 部分とそれ以外に明確に分けられるので 設計がシンプル • Multiple Page • サイト構成によるが、固定コンテンツとそれ以外 の個別の制御 • WordPress のほとんどのサイトはこの構成
  41. 41. 一般的な PWA の Cache 削除 Activate時に削除 self.addEventListener('activate', function(e) { e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if ( key !== cacheName ) { return caches.delete(key); } })); }) ); return self.clients.claim(); });
  42. 42. 更新タイミング • ServiceWorkerはオンライン時に同期され、次回起動時に 更新されたものが動作する • Cacheは明示的に更新するか、ServiceWorkerのActivate時 に削除、再取得される このままじゃ新しく書いた記事が新着リストに載らな い!?
  43. 43. キャッシュをどう扱うか • そもそものキャッシュの目的 • 高速化 • ネットワークの節約、オフライン対応 • 考慮点 • 更新の反映 • インタラクティブなコンテンツ
  44. 44. 悩みどころ 更新を反映したいところ 即時反映したいところ WordPress ではほとんどのコン テンツがサーバー側で生成され てページに埋め込まれた状態で ブラウザに届く
  45. 45. 6/23 WordBench Tokyo こんな宣言しました
  46. 46. PWA for WordPress キャッシュのお悩みを解決できる Wordpress の PWA 化プラグイン作りました!
  47. 47. PWA4WP のここがいけてる • キャッシュの有効期限が設定できる ブログなどの新着記事一覧の埋め込み部分の反映 記事の内容などの更新 急がないけどずっと更新されないのはダメ、というコンテ ンツはわりと多い • キャッシュの除外が柔軟に指定できる Ajax などで取得するような API などの出力データの取り出し 元 リアルタイムで状況を表示するようなコンテンツ 画像だけキャッシュする、というような設定も可能
  48. 48. 使ってみよう DEMO... うまくいきますように
  49. 49. 事前に用意しておく オフラインページ 普通の固定ページでOK アイコン画像 png形式必須 サイズ 512px x 512px 以 上推奨
  50. 50. Demo – PWA for WordPress インストール https://wordpress.org/plugins/pwa4wp/ 「プラグイン→新規追加」から 「PWA for WordPress」または「PWA4WP」を検索
  51. 51. Demo – PWA for WordPress セットアップ •Manifest •ServiceWorker •PWA 発行
  52. 52. Demo – PWA for WordPress メイン画面
  53. 53. Demo – PWA for WordPress Manifest
  54. 54. Demo – PWA for WordPress Manifest
  55. 55. Demo – PWA for WordPress ServiceWorker
  56. 56. Demo – PWA for WordPress ServiceWorker
  57. 57. Demo – PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例1:画像( jpg / png / gif ) だけキャッシュするには 以下の2行を指定 ^.*.(?!jpg|png|gif)(.{3,4})$ ^.*/$ 特定の拡張子以外(除外リストの指定なので、「以外」を除外する設定になる) 末尾が / で終わる
  58. 58. Demo – PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例2:REST API を除外する ^.*/wp-json/.*$
  59. 59. Demo – PWA for WordPress Chrome Developer Tool での確認 (Application タブ)
  60. 60. Demo – PWA for WordPress キャッシュされたデータ
  61. 61. Demo – PWA for WordPress 超高速!! (Networkそもそも使わないんだから そりゃそうだ)
  62. 62. Demo – PWA for WordPress Auditsしてみる Chromeのツール「Lighthouse」 100点!
  63. 63. 機能追加予定 • Push • マルチサイト対応 • インストール提示タイミングのコントロール • コンテンツ内のウィジェットなどをAjaxに切り離す (別プラグイン?) 欲しい機能とかあればリクエストください!
  64. 64. 最後に キャッシュ制御がとても大事。 いきなり完成型は難しいかもしれないし、 ちょっとずつでも。 (Progressive = 段階的に) ぜひ試してみてください。
  65. 65. One more thing? PWA for WordPress は Gutenberg Ready です! (特になにも干渉しないだけだけどね)
  66. 66. もっと知りたい方へ • 「Challenge PWA!! - テクニカルエディション」 9/19(水) 19:00~ 日本Androidの会 9月定例会 https://japan-android-group.connpass.com/event/100674/ • 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/
  67. 67. ありがとうございました。 プラグインのフィードバックぜひお寄せください♪ https://wordpress.org/plugins/pwa4wp/

×