1.
Service Worker
とは何者か
JAGWWG「PWAに備える３ヶ月」Vol.1
Ryunosuke Shindo
2018/03/26

2.
自己紹介
進藤 龍之介
エンジニア
日本Androidの会（NPO理事／コミュニティ運営委
員）
しいたけ菌床販売【NEW】

3.
まず少しおさらい
3/14 JAG定例会の振り返りを少しだけ

4.
PWA への対応状況
さくっと全ての環境が揃うかというと・・・

5.
現在PWA に対応するプラットフォーム
https://caniuse.com/#search=Service%20Worker

6.
次期 Safari の対応は
日本でのインパクト大
日本ではiOSのシェアが高いのでSafariの対応によって対応環境の割
合が飛躍的にアップ！
皆さんのサイト、Analyticsでチェックしてみましょう。

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％！！

9.
使えるAPIの違いには注意

10.
まだ未確定要素は多いけど
ひとつでもメリットの享受ができるのなら対応を検討する価値は
ある
表示が速いよ！
ホーム画面にアイコンが持てるよ！
オフラインでもキャッシュが使えるよ！

11.
各社の動向に注目
Microsoft Build
5/7～9
※MicrosoftはストアにPWAを追加予定とのアナウンスあり
Apple WWDC
6/4～8
※ちなみに日本Androidの会 ABC 2018 Spring
はおそらく WWDC の直後ぐらい

12.
コンテンツマイニング
既存コンテンツの見直し
埋もれた魅力的なコンテンツの発掘
発信した情報をより確実に届ける（Push）
制作者には既存サイトを対応させる新しいビジネスチャンス

13.
PWA の構成
既存サイトを「対応」させるだけなら
ほんのひと手間加えるだけ

14.
インストール発生条件
https
５分以上間隔を空けて、２回目以降のアクセス
Manifest，Service Workerが存在する

15.
動作概要
キャッシュとオンラインコンテンツをService Workerが仲立ち
Cache
Online
Service Worker

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);
})
);
});

20.
PWA化
サイトそのまんまでも、今フルHTTPSサイトなら
Manifest
Service Worker
を追加したらとりあえずPWA化

21.
こんな予告しました
人柱、やります。

22.
やってみた
Wordpress+WoocommerceのPWA化

23.
サイトの概要
Wordpress
WooCommerce
◦ ショッピングバスケット
◦ 着払い、Paypalによる決済
SSL対応済み
https://www.crowdfarm.jp

24.
Wordpress
世界のWebサイトの30%が
Wordpress
CMS
→更新やコンテンツの追加が多
い
→PUSH通知の活用などPWA
ニーズ高そう
PWA対応プラグインもいくつか出始
めている
→手軽に対応できる？

25.
WooCommerce
世界のECサイトの4割強、300万
サイトを超える
豊富なフックにより頑張ればかな
りのカスタマイズが可能で、これ
を利用したプラグインも豊富
標準テーマ「storefront」を使うと
入れてすぐそれなりのECサイトが
出来上がる

26.
プラグインの選定
どれにしよう・・・

27.
これに決めた
今回試すのは
「SUPER PWA」
◦ そこそこのインストール数
◦ 評価いい
◦ 素直な構成

28.
とりあえず有効化

29.
最低限設定するところ
サイト名、アプリケーション短縮名
◦ デフォルトでサイトタイトルが入るのでそのままでよければOK
アイコン、スプラッシュ用アイコン
◦ そのままだとWordpressのアイコンになる
背景色とテーマカラー
◦ スプラッシュ画面で使用
オフラインページ
◦ デフォルトはトップページ
◦ オフラインで操作させたくないところにオフラインで遷移しようとす
るとトップページが表示される、ではちょっとおかしい

30.
アイコン設定しないと

31.
インストール完了
スプラッシュいいね
やっぱキャッシュすると速
い！

32.
PWA化の中身を見よう
追加された「manifest」と「serviceworker」

33.
導入部分
manifest
install

34.
manifest
アプリの基本情報
◦ タイトル
◦ アイコン
◦ テーマカラー
◦ UR
などなど
全ての情報はreferenceで
https://developers.google.com/web/fundamentals/web-app-
manifest/?hl=ja
このあたりが参考になります

35.
serviceworker
イベントリスナ
◦install
◦activate
◦fetch

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);
}

40.
serviceworkerは何者か
キャッシュを制御するもの。

41.
Service workerの
ライフサイクル
No
Service
worker
Installing Activated Idle
Fetch/
Message
Terminate
d
Error

42.
かゆいところ
プラグイン任せじゃやっぱりそのままで手が届くとは
いかない。
Wordpress的に少し掟破りなことしてるけど、今回
は特別に許してください。

43.
キャッシュ除外したい
決済ページはキャッシュじゃダメ。
決済処理系のURLは「/checkout」配下なので、除外に追加。
const neverCacheUrls = [//wp-admin/,//wp-
login/,/preview=true/,//checkout/];
これを出力するPHPのほうも念のため・・・
→プラグインが更新されたら消えちゃうので注意

44.
オフライン
で見てみる
OK！

45.
あれれ？
キャッシュ除外のページだ
と・・・

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化して、少しずつリッチにしていくアプ
ローチもいいかも（なによりコストがかからない）
 未対応の環境には影響なし

49.
あとひとつ
Serviceworkerは「アプリ化」しなくても
動きます。
Android/Windowsならchromeで
chrome://serviceworker-internals/
を見てみよう。
「アプリ」としてじゃなくても、キャッ
シュを制御した高速化の手段として活用で
きます。

50.
ありがとうございました。
また来月！