Recommended
More Related Content
Similar to Service Workerとは何者か
Similar to Service Workerとは何者か (12)
More from Ryu Shindo
More from Ryu Shindo (18)
Recently uploaded
Recently uploaded (8)
Service Workerとは何者か
- 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. 対応させる価値アリ！？ Japan：43.12% → 80.21% Global：75.41% → 88.01% ※モバイルに対象を絞れば Japan/Globalともに99％！！
- 11. 各社の動向に注目 Microsoft Build 5/7～9 ※MicrosoftはストアにPWAを追加予定とのアナウンスあり Apple WWDC 6/4～8 ※ちなみに日本Androidの会 ABC 2018 Spring はおそらく WWDC の直後ぐらい
- 16. ファイル構成 コンテンツ/アセット ◦ HTML/CSS/JS ◦ 画像、アイコン ◦ データ manifest ◦ json service worker ◦ JS
- 17. コンテンツ / アセット ResponsiveならWebサイトそのままでもとりあえずOK キャッシュするもの、しないもの アイコンはお忘れなく if('serviceWorker' in navigator) { navigator.serviceWorker .register('/service-worker.js') .then(function() { console.log('Service Worker Registered'); }); } ※Service Workerのインストールを追記
- 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. 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); }) ); });
- 27. これに決めた 今回試すのは 「SUPER PWA」 ◦ そこそこのインストール数 ◦ 評価いい ◦ 素直な構成
- 28. とりあえず有効化
- 29. 最低限設定するところ サイト名、アプリケーション短縮名 ◦ デフォルトでサイトタイトルが入るのでそのままでよければOK アイコン、スプラッシュ用アイコン ◦ そのままだとWordpressのアイコンになる 背景色とテーマカラー ◦ スプラッシュ画面で使用 オフラインページ ◦ デフォルトはトップページ ◦ オフラインで操作させたくないところにオフラインで遷移しようとす るとトップページが表示される、ではちょっとおかしい
- 30. アイコン設定しないと
- 34. manifest アプリの基本情報 ◦ タイトル ◦ アイコン ◦ テーマカラー ◦ UR などなど 全ての情報はreferenceで https://developers.google.com/web/fundamentals/web-app- manifest/?hl=ja このあたりが参考になります
- 36. install self.addEventListener('install', function(e) { インストール時のアクション インストールが終わったらまずは必須なところをキャッシュする ◦ アイコン、スタートページ、オフラインページ、等 return cache.addAll(filesToCache);
- 37. activate self.addEventListener('activate', function(e) { インストールが完了して、Serviceworkerがページコントロール 可能になったらイベント発火 return caches.delete(key);
- 38. fetch self.addEventListener('fetch', function(e) { URLリクエストが発生したときのイベント ◦ 新規のリクエストをキャッシュする？しない？ ◦ キャッシュがあったらキャッシュから読むか？ ◦ キャッシュ除外ページかどうか ◦ オフラインだったら？
- 39. cache (これはService workerの外だけど） Cacheを捨てるタイミング Activate時推奨？ if ( key !== cacheName ) { return caches.delete(key); }
- 41. Service workerの ライフサイクル No Service worker Installing Activated Idle Fetch/ Message Terminate d Error
- 43. キャッシュ除外したい 決済ページはキャッシュじゃダメ。 決済処理系のURLは「/checkout」配下なので、除外に追加。 const neverCacheUrls = [//wp-admin/,//wp- login/,/preview=true/,//checkout/]; これを出力するPHPのほうも念のため・・・ →プラグインが更新されたら消えちゃうので注意
- 44. オフライン で見てみる OK！
- 46. 手直し if ( ! neverCacheUrls.every(checkNeverCacheList, e.request.url) ) { fetchの除外URLヒット時の挙動を、 return; 単純に処理を戻すんじゃなくて、オフライン判定＆オフライン ページの表示を入れる if ( ! navigator.onLine) { return caches.match(offlinePage); } return;
- 47. 初期キャッシュへの追加 マニュアルのページをインストール時のキャッシュに追加してお きたい インストールのタイミングで return cache.addAll(filesToCache); してるから、 filesToCacheにマニュアルページを追加する const manualPage = 'https://www.crowdfarm.jp/howto/’; const filesToCache = [startPage, offlinePage, fallbackImage, manualPage]; これでオッケー！
- 48. 所感 PWA化するだけなら超簡単！ Wordpressじゃなくても、manifestとserviceworkerのテンプ レートをちょっとカスタマイズして配置すれば特別な技術や知識 は不要 CSSミスって公開しちゃったときになかなか更新かからなくて やきもきするときもある 速い！それだけでやる価値はある ゼロから新しいものを一気に作り上げるアプローチもいいけ ど、既存サイトをPWA化して、少しずつリッチにしていくアプ ローチもいいかも（なによりコストがかからない） 未対応の環境には影響なし