Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Service Workerとは何者か

1,271 views

Published on

2018年3月26日に開催された日本Androidの会 Web Working Group「PWAに備える3ヶ月」vol.1 での講演資料です。
まずは労力最小でPWA対応したWordpress+WooCommerceのECサイトを動かしてみます。
そしてそこで中心となる「Service Worker」に焦点を絞ってその役割や挙動を掘り下げていきながら、Web制作者が欲しいものを作るのに何をすればいいのかを探ります

Published in: Technology
  • Be the first to comment

Service Workerとは何者か

  1. 1. Service Worker とは何者か JAGWWG「PWAに備える3ヶ月」Vol.1 Ryunosuke Shindo 2018/03/26
  2. 2. 自己紹介 進藤 龍之介 エンジニア 日本Androidの会(NPO理事/コミュニティ運営委 員) しいたけ菌床販売【NEW】
  3. 3. まず少しおさらい 3/14 JAG定例会の振り返りを少しだけ
  4. 4. PWA への対応状況 さくっと全ての環境が揃うかというと・・・
  5. 5. 現在PWA に対応するプラットフォーム https://caniuse.com/#search=Service%20Worker
  6. 6. 次期 Safari の対応は 日本でのインパクト大 日本ではiOSのシェアが高いのでSafariの対応によって対応環境の割 合が飛躍的にアップ! 皆さんのサイト、Analyticsでチェックしてみましょう。
  7. 7. 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 対応状況 対応済 次期対応 未対応
  8. 8. 対応させる価値アリ!? Japan:43.12% → 80.21% Global:75.41% → 88.01% ※モバイルに対象を絞れば Japan/Globalともに99%!!
  9. 9. 使えるAPIの違いには注意
  10. 10. まだ未確定要素は多いけど ひとつでもメリットの享受ができるのなら対応を検討する価値は ある 表示が速いよ! ホーム画面にアイコンが持てるよ! オフラインでもキャッシュが使えるよ!
  11. 11. 各社の動向に注目 Microsoft Build 5/7~9 ※MicrosoftはストアにPWAを追加予定とのアナウンスあり Apple WWDC 6/4~8 ※ちなみに日本Androidの会 ABC 2018 Spring はおそらく WWDC の直後ぐらい
  12. 12. コンテンツマイニング 既存コンテンツの見直し 埋もれた魅力的なコンテンツの発掘 発信した情報をより確実に届ける(Push) 制作者には既存サイトを対応させる新しいビジネスチャンス
  13. 13. PWA の構成 既存サイトを「対応」させるだけなら ほんのひと手間加えるだけ
  14. 14. インストール発生条件 https 5分以上間隔を空けて、2回目以降のアクセス Manifest,Service Workerが存在する
  15. 15. 動作概要 キャッシュとオンラインコンテンツをService Workerが仲立ち Cache Online Service Worker
  16. 16. ファイル構成 コンテンツ/アセット ◦ HTML/CSS/JS ◦ 画像、アイコン ◦ データ manifest ◦ json service worker ◦ JS
  17. 17. コンテンツ / アセット ResponsiveならWebサイトそのままでもとりあえずOK キャッシュするもの、しないもの アイコンはお忘れなく if('serviceWorker' in navigator) { navigator.serviceWorker .register('/service-worker.js') .then(function() { console.log('Service Worker Registered'); }); } ※Service Workerのインストールを追記
  18. 18. 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" }, {
  19. 19. Service Worker キャッシュの制御、Push通知、バックグラウンド処理 var filesToCache = [ '/', '/index.html', '/scripts/app.js', '/images/sleet.png', '/images/snow.png', '/images/thunderstorm.png', '/images/wind.png’ ]; 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); }) ); });
  20. 20. PWA化 サイトそのまんまでも、今フルHTTPSサイトなら Manifest Service Worker を追加したらとりあえずPWA化
  21. 21. こんな予告しました 人柱、やります。
  22. 22. やってみた Wordpress+WoocommerceのPWA化
  23. 23. サイトの概要 Wordpress WooCommerce ◦ ショッピングバスケット ◦ 着払い、Paypalによる決済 SSL対応済み https://www.crowdfarm.jp
  24. 24. Wordpress 世界のWebサイトの30%が Wordpress CMS →更新やコンテンツの追加が多 い →PUSH通知の活用などPWA ニーズ高そう PWA対応プラグインもいくつか出始 めている →手軽に対応できる?
  25. 25. WooCommerce 世界のECサイトの4割強、300万 サイトを超える 豊富なフックにより頑張ればかな りのカスタマイズが可能で、これ を利用したプラグインも豊富 標準テーマ「storefront」を使うと 入れてすぐそれなりのECサイトが 出来上がる
  26. 26. プラグインの選定 どれにしよう・・・
  27. 27. これに決めた 今回試すのは 「SUPER PWA」 ◦ そこそこのインストール数 ◦ 評価いい ◦ 素直な構成
  28. 28. とりあえず有効化
  29. 29. 最低限設定するところ サイト名、アプリケーション短縮名 ◦ デフォルトでサイトタイトルが入るのでそのままでよければOK アイコン、スプラッシュ用アイコン ◦ そのままだとWordpressのアイコンになる 背景色とテーマカラー ◦ スプラッシュ画面で使用 オフラインページ ◦ デフォルトはトップページ ◦ オフラインで操作させたくないところにオフラインで遷移しようとす るとトップページが表示される、ではちょっとおかしい
  30. 30. アイコン設定しないと
  31. 31. インストール完了 スプラッシュいいね やっぱキャッシュすると速 い!
  32. 32. PWA化の中身を見よう 追加された「manifest」と「serviceworker」
  33. 33. 導入部分 manifest install
  34. 34. manifest アプリの基本情報 ◦ タイトル ◦ アイコン ◦ テーマカラー ◦ UR などなど 全ての情報はreferenceで https://developers.google.com/web/fundamentals/web-app- manifest/?hl=ja このあたりが参考になります
  35. 35. serviceworker イベントリスナ ◦install ◦activate ◦fetch
  36. 36. install self.addEventListener('install', function(e) { インストール時のアクション インストールが終わったらまずは必須なところをキャッシュする ◦ アイコン、スタートページ、オフラインページ、等 return cache.addAll(filesToCache);
  37. 37. activate self.addEventListener('activate', function(e) { インストールが完了して、Serviceworkerがページコントロール 可能になったらイベント発火 return caches.delete(key);
  38. 38. fetch self.addEventListener('fetch', function(e) { URLリクエストが発生したときのイベント ◦ 新規のリクエストをキャッシュする?しない? ◦ キャッシュがあったらキャッシュから読むか? ◦ キャッシュ除外ページかどうか ◦ オフラインだったら?
  39. 39. cache (これはService workerの外だけど) Cacheを捨てるタイミング Activate時推奨? if ( key !== cacheName ) { return caches.delete(key); }
  40. 40. serviceworkerは何者か キャッシュを制御するもの。
  41. 41. Service workerの ライフサイクル No Service worker Installing Activated Idle Fetch/ Message Terminate d Error
  42. 42. かゆいところ プラグイン任せじゃやっぱりそのままで手が届くとは いかない。 Wordpress的に少し掟破りなことしてるけど、今回 は特別に許してください。
  43. 43. キャッシュ除外したい 決済ページはキャッシュじゃダメ。 決済処理系のURLは「/checkout」配下なので、除外に追加。 const neverCacheUrls = [//wp-admin/,//wp- login/,/preview=true/,//checkout/]; これを出力するPHPのほうも念のため・・・ →プラグインが更新されたら消えちゃうので注意
  44. 44. オフライン で見てみる OK!
  45. 45. あれれ? キャッシュ除外のページだ と・・・
  46. 46. 手直し if ( ! neverCacheUrls.every(checkNeverCacheList, e.request.url) ) { fetchの除外URLヒット時の挙動を、 return; 単純に処理を戻すんじゃなくて、オフライン判定&オフライン ページの表示を入れる if ( ! navigator.onLine) { return caches.match(offlinePage); } return;
  47. 47. 初期キャッシュへの追加 マニュアルのページをインストール時のキャッシュに追加してお きたい インストールのタイミングで return cache.addAll(filesToCache); してるから、 filesToCacheにマニュアルページを追加する const manualPage = 'https://www.crowdfarm.jp/howto/’; const filesToCache = [startPage, offlinePage, fallbackImage, manualPage]; これでオッケー!
  48. 48. 所感  PWA化するだけなら超簡単!  Wordpressじゃなくても、manifestとserviceworkerのテンプ レートをちょっとカスタマイズして配置すれば特別な技術や知識 は不要  CSSミスって公開しちゃったときになかなか更新かからなくて やきもきするときもある  速い!それだけでやる価値はある  ゼロから新しいものを一気に作り上げるアプローチもいいけ ど、既存サイトをPWA化して、少しずつリッチにしていくアプ ローチもいいかも(なによりコストがかからない)  未対応の環境には影響なし
  49. 49. あとひとつ Serviceworkerは「アプリ化」しなくても 動きます。 Android/Windowsならchromeで chrome://serviceworker-internals/ を見てみよう。 「アプリ」としてじゃなくても、キャッ シュを制御した高速化の手段として活用で きます。
  50. 50. ありがとうございました。 また来月!

×