<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>Service Woker &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/service-woker/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>【Service Worker最前線】仕様策定の現場で何が議論されているのか？</title>
		<link>/kinuko/16537/</link>
		<pubDate>Wed, 09 Sep 2015 01:00:37 +0000</pubDate>
		<dc:creator><![CDATA[安田 絹子]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[GitHub]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Service Woker]]></category>

		<guid isPermaLink="false">/?p=16537</guid>
		<description><![CDATA[昨年末頃からホットなトピックになりつつある「Service Worker[1]」ですが、その先行実装が落ち着いてきた今夏、仕様に対する提案や今後の方向性などについて話し合うF2F（Face-to-Face）ミーティングが...]]></description>
				<content:encoded><![CDATA[<p>昨年末頃からホットなトピックになりつつある「Service Worker<a href="#f1" id="ref1" data-wpel-link="internal"><sup>[1]</sup></a>」ですが、その先行実装が落ち着いてきた今夏、仕様に対する提案や今後の方向性などについて話し合うF2F（Face-to-Face）ミーティングがサンフランシスコで開かれました。本稿では、このミーティングの様子を中心に、Service Workerの最近、そしてこれからの論点をいくつか解説してみたいと思います。</p>

<p>Service Workerは昨年5月に最初のドラフトが公開されたばかりの新しいAPIですが、Webの前提を変える可能性を持った基盤APIとして注目されています。Service WorkerはあくまでWebの1つのAPIにすぎませんが、このミーティングではWebのこれからの方向性を考える上でも興味深い議論がいくつかなされました。なお、ここで書かれる内容はあくまで議論された論点についてであって、本稿の内容が必ずしも将来仕様にのったり、実装されたりするわけではないことをご了承下さい。</p>

<p><small>
<a href="#ref1" name="f1" data-wpel-link="internal">1. 「Service Worker」</a>：Service Worker は &#8220;ServiceWorker&#8221; や &#8220;Service workers&#8221;のように表記が揺れて書かれることが多く、その正式名称をめぐって<a href="https://github.com/slightlyoff/ServiceWorker/issues/705" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">GitHub</a>上でも議論があったほどです。結局、最終的には“service worker”のように（つなげたり大文字にしたりせず）普通の英単語のように書くことで落ち着いたようです。読みやすさも考慮して、本稿では一貫して「Service Worker」と表記しています。
</small></p>

<h2>Service Workerとは？</h2>

<p>Service Workerについては<a href="https://html5experts.jp/?s=serviceworker" data-wpel-link="internal">HTML5Experts.jp</a>や<a href="http://www.html5rocks.com/ja/tutorials/service-worker/introduction/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5Rocks</a>などで既にいろいろな解説記事が公開されているため、ここでは概要だけを紹介したいと思います。</p>

<p>Service Workerはいわゆる<a href="http://www.html5rocks.com/ja/tutorials/workers/basics/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Web Worker</a>の一種類で、Webページとは別にバックグラウンドで実行されるJavascript実行環境のひとつです。ただし、普通のWeb Workerとは異なり、一度インストールされるとブラウザ内に登録され、ネットワーク接続がなくても動作することができます。また、Webページのネットワークリクエストを横取りして任意のレスポンスを返すことができるという強力な特徴があり、Webページに対してオフライン機能やキャッシュによる高速化などを提供することができるのです。</p>

<div id="attachment_16548" style="width: 499px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/08/service-worker-hx1.png" data-wpel-link="internal"><img src="/wp-content/uploads/2015/08/service-worker-hx1.png" alt="Service Workerの動作イメージ" width="489" height="252" class="size-full wp-image-16548" srcset="/wp-content/uploads/2015/08/service-worker-hx1.png 489w, /wp-content/uploads/2015/08/service-worker-hx1-300x155.png 300w, /wp-content/uploads/2015/08/service-worker-hx1-207x107.png 207w" sizes="(max-width: 489px) 100vw, 489px" /></a><p class="wp-caption-text">Service Workerの動作イメージ</p></div>

<p>Service Workerの中でネットワークプロキシのようなコードを書けるように、ネットワークからデータを取得(Fetch)するための<a href="https://fetch.spec.whatwg.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Fetch API</a>や、データをディスクにキャッシュ・保存しておくための<a href="http://www.w3.org/TR/service-workers/#cache-objects" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Cache API</a><a href="#rf2" id="ref2" data-wpel-link="internal"><sup>[2]</sup></a>の仕様策定が一緒に進んでいます。</p>

<p>また、Service WorkerはWebページが開かれていなくてもそのサイトのJavascriptコードを実行できる基盤を提供するため、Service Workerを拡張する形で従来のWebアプリではできなかったような機能を実現するためのAPIがいろいろ提案されています。その中でも最も注目を集めているのがプッシュ通知を実現する<a href="http://www.w3.org/TR/push-api/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Push API</a>でしょう。</p>

<p>Service WorkerとPush APIを使ったプッシュ通知についてもいろいろな紹介記事が公開されていています。ChromeではAndroid Chrome も含めて安定版で動作しますので、興味のある方はぜひ試してみてください。</p>

<p><small><a href="#ref2" name="f2" data-wpel-link="internal">2. Cache API</a>：正確には、Cache APIは現在はService Workerの仕様の一部として策定が進んでいます。</small></p>

<h2>Service Workerの仕様策定</h2>

<p>Service Workerの仕様策定はどのように行われているのでしょうか？Service Workerは現在<a href="http://www.w3.org/TR/service-workers/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">W3CのWeb Applicationsワーキンググループのワーキングドラフト</a>として公開されており、仕様に関する議論は（最近の流行りにのって）<a href="https://github.com/slightlyoff/ServiceWorker/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">GitHub</a>を中心に行われています。リポジトリはオープンなため、基本的には誰でも議論に参加することができます。とはいえ、議論が白熱しているときは一日に何度も更新されるため、すべての議論や変更をウォッチするのはなかなか大変かもしれません。</p>

<p>GitHubやIRCなど、かなりの議論がオンラインで行われているService Workerですが、判断が難しい問題や全体の方向性に関わる議論はそれだけではなかなか進みません。そのため、（多くのAPIやワーキンググループがしているように）ときどき関係者が実際に集まって顔をあわせて議論するためのF2Fミーティングが開かれています。</p>

<h2>F2Fミーティングで議論されたトピック</h2>

<p>今年の7月20日に、Googleサンフランシスコオフィス<a href="#rf3" id="ref3" data-wpel-link="internal"><sup>[3]</sup></a>でService Workerについて議論するカジュアルなF2Fミーティングが開かれました。ちょうどChromeでの実装が一段落してきたタイミングで、今後の仕様の議論の進め方やブラウザ間の相互テストの整備について、またService Workerの次のフェーズについてなど、さまざまな議論が行われました。</p>

<p>なお、F2Fミーティングの<a href="https://docs.google.com/document/d/1X5KvUxLjXS2kIWheYUzj6GOgwP2eGHj1cAuau-cn8sE/edit?usp=sharing" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">議事録</a>はこちらに公開されています。また、MozillaのBen Kellyが自身のブログで<a href="https://blog.wanderview.com/blog/2015/07/28/service-worker-meeting-highlights/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ミーティングのハイライト</a>について書いており、こちらも参考になります。</p>

<div id="attachment_16566" style="width: 499px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/08/IMG_20150721_174722-001.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2015/08/IMG_20150721_174722-001.jpg" alt="Google サンフランシスコオフィスの窓からの眺め" width="489" height="367" class="size-full wp-image-16566" srcset="/wp-content/uploads/2015/08/IMG_20150721_174722-001.jpg 489w, /wp-content/uploads/2015/08/IMG_20150721_174722-001-300x225.jpg 300w, /wp-content/uploads/2015/08/IMG_20150721_174722-001-207x155.jpg 207w" sizes="(max-width: 489px) 100vw, 489px" /></a><p class="wp-caption-text">Googleサンフランシスコオフィスの窓からの眺め。ベイブリッジがちょうど窓から見渡せる位置にあり、天気の良い日は良くも悪くも気が散ります。</p></div>

<p>今回のF2Fミーティングでは、GitHubで日頃から議論に積極的に参加しているGoogle、Mozilla、Samsungからの参加者に加え、AppleやMicrosoftからも参加があり、活気のあるミーティングとなりました。（なお、ここでの議論はすべて仕様に関するものであり、各組織の意向や実装の予定を示すものでは当然ありません）</p>

<p>今回のF2Fミーティングでは、GitHubでも公開されている<a href="https://github.com/slightlyoff/ServiceWorker/wiki/july_20_2015_meeting_agenda" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">アジェンダ</a>に添って大体以下の様なトピックが議論されました：</p>

<ul>
<li>今後の仕様議論の方法やF2Fミーティングの頻度など</li>
<li>“Version 1”の仕様に入れたいもののうち、<a href="https://github.com/slightlyoff/ServiceWorker/milestones/Version%201" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">まだクローズ（解決）されていないissue</a>の総ざらい</li>
<li>ブラウザ間の互換性とテストプラン</li>
<li>ナビゲーションやCSP(Content Security Policy)など、他の仕様との統合について</li>
<li>複数サイト間でのRPC的なアイディアを実現する<a href="https://github.com/mkruisselbrink/navigator-connect/blob/gh-pages/explainer.md" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">navigator.connect</a>とその代替案である<a href="https://wiki.whatwg.org/wiki/Foreign_Fetch" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Foreign Fetch</a>について</li>
<li>ネットワークリクエストを横取りしないService Workerの可能性について</li>
<li>Service Workerの有効期間を強制する
<a href="https://github.com/slightlyoff/ServiceWorker/issues/721" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Service-Worker-Max-Ageヘッダ</a>について</li>
</ul>

<p>アジェンダには“Version 1” “Version 2”という表現が出てきますが、要は「比較的要件がはっきりしていて現行の仕様にすぐ取り入れたいもの」と、「さらなる議論が必要そうで次フェーズまで待ちたいもの」という感じの位置付けになります。</p>

<p>以下では、上記のリストからService WorkerやWebの今後の方向性につながりそうなトピックをいくつか取り上げ、議論の背景と内容を簡単に説明してみたいと思います。</p>

<p><small><a href="#ref3" name="f3" data-wpel-link="internal">3.Googleサンフランシスコオフィス</a>：ものすごい余談ですが、MozillaのサンフランシスコオフィスはGoogleオフィスの隣のビルにあります。</small></p>

<h3>Cache APIのHTTPS制限</h3>

<p>Cache APIはもともとはService Worker内でレスポンスデータをキャッシュに格納したり置き換えたりする部分をJavascriptからプログラマブルに行えるようにするために考えられたAPIです。しかし、その後Service Worker内だけではなく“window”オブジェクト上、つまり普通のWebページからも使えるようにすべきだという提案があり、Chromeではバージョン43からService Worker外でも使えるようになりました。</p>

<p>しかし、Service WorkerがHTTPSのみでしか使えないのに対し、Cache APIが通常のページ上でも使えるようになるということは、Cache APIが実質HTTPからでも使えるようになることを意味します。すると、例えばHTTPページに埋め込まれたiframeでHTTPSページをロードし、HTTPSオリジンのCacheの中身を書き換えるようなことも技術的にはできるようになります。つまり、Cache APIのストレージを汚染される可能性があるわけです。</p>

<p>こうした指摘を受けて、GitHubで<a href="https://github.com/slightlyoff/ServiceWorker/issues/709" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Cache APIをHTTPSのみに制限するべき</a>ではないかという議論が起こりました。特にMozillaでは<a href="https://blog.mozilla.org/security/2015/04/30/deprecating-non-secure-http/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">新しい機能はすべてHTTPSのみにすべき</a>だという声明を出していることもあり、Cache APIは<strong>HTTPで使えるべきではない</strong>という強い意見が出されています。一方で、開発者の立場に立った場合、HTTPSのみにすると開発が困難になるのではという意見も出されました。</p>

<p>F2Fでは結局最終的な結論は出ませんでしたが、緩い制限から厳しい制限に後から移行するのはその逆に比べて難しいため、とりあえず実装が進んでいるブラウザではHTTPSのみに制限して様子を見るという暫定的な方向性が示されました。Chromeでも<a href="https://code.google.com/p/chromium/issues/detail?id=501380" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">バージョン46からHTTPSのみに制限される</a>予定です。</p>

<p>Cache API自体はService Worker外ではそれほど使い道のないAPIなためマイナーな変更とも言えますが、今後のWebの方向性を見る上では考えさせられる議論です。</p>

<h3>navigator.connectとForeign Fetch</h3>

<p>Service Workerの次フェーズとも言える仕様として、navigator.connectというAPIが提案されています。これは、異なるオリジンのService Worker間で通信をするための仕様で、<a href="https://github.com/mkruisselbrink/navigator-connect" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">navigator.connectのGitHub</a>では「ページ（document）がなくても動くiframe間のpostMessageのようなもの」と<a href="https://github.com/mkruisselbrink/navigator-connect/blob/gh-pages/explainer.md" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">説明されています</a>。複数オリジンのサービスをつないでマッシュアップするための<strong>RPCのような仕組み</strong>と言い換えることもできます。</p>

<p>navigator.connectがあると何が嬉しいのでしょうか？ <a href="https://mkruisselbrink.github.io/navigator-connect/use-cases.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">非公式の仕様ドラフト</a>では、ユースケースとして「オフライン・アナリティクス」や「クラウド・ストレージ・プラットフォーム」などの<a href="https://mkruisselbrink.github.io/navigator-connect/use-cases.html#usecases" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">例が挙げられています</a>。例えば、Google Analyticsをはじめとする多くのアナリティクスはRESTインタフェースを提供しており、オフラインでは当然動きません。ですが、例えばこれらのサードパーティのアナリティクスサービスがそれぞれService Workerを提供し、オフラインでもアナリティクスに送るためのデータを集められようになったとしたらどうでしょうか？</p>

<p>現状のService Workerでは、別のオリジンのサイトからこの仕組を使うには、アナリティクスのサイトをiframeを通じてロードし、そこからアナリティクスのService Workerと通信するしかありません。ですが、navigator.connectが実装されると直接アナリティクスのService Workerと通信できるようになります。同様に、あるサイトから複数のサードパーティのService Workerと通信してさまざまなサービスを受けることが簡単にできるようになる（かも知れない）のです。</p>

<div id="attachment_16583" style="width: 543px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/08/navigator-connect.png" data-wpel-link="internal"><img src="/wp-content/uploads/2015/08/navigator-connect.png" alt="navigator.connectの動作イメージ" width="533" height="280" class="size-full wp-image-16583" srcset="/wp-content/uploads/2015/08/navigator-connect.png 533w, /wp-content/uploads/2015/08/navigator-connect-300x158.png 300w, /wp-content/uploads/2015/08/navigator-connect-207x109.png 207w" sizes="(max-width: 533px) 100vw, 533px" /></a><p class="wp-caption-text">navigator.connectの動作イメージ</p></div>

<p>navigator.connect はこのように大変強力な提案ですが、議論がまだ詰まってないところが多く、仕様化もこれからの段階です。</p>

<p>これに対し、Mozillaはよりシンプルな<a href="https://wiki.whatwg.org/wiki/Foreign_Fetch" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Foreign Fetch</a>という対案を出しています。Foreign Fetchは端的には別のオリジンへのネットワークリクエストをそのオリジンのService Workerがハンドルできるようにする提案で、これによって複数のService Workerを連鎖させることも可能になります。（なお、ほぼ同様のアイディアがnavigator.connectのGitHubでは<a href="https://github.com/mkruisselbrink/navigator-connect/blob/gh-pages/explainer.md#solving-the-fonts-problem" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">fall-through fetch</a>という名前で説明されています）</p>

<p>F2Fでは、Service Workerが連鎖した場合にCPUの占有率や連鎖の深さをどう制限するのかなどについて議論がされましたが、全体的な結論はVersion 2に先延ばしされることになりました。</p>

<h3>ネットワークリクエストを横取りしないService Worker</h3>

<p>F2Fに向けて、Mozilla から事前に<a href="https://lists.w3.org/Archives/Public/public-webapps/2015JulSep/0157.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ミーティングで議論したい点</a>のリストが共有されました。興味深いことに、そのうちのいくつかは<strong>ネットワークリクエストを横取りしない Service Worker の可能性</strong>を議論するものになっています。</p>

<p>Service Workerは、本稿の概要でも軽く述べたとおり、そもそもWebページのネットワークリクエストを横取りして動作することを念頭に置いて設計されたAPIです。Service Workerのインストールフェーズやライフサイクル、動作モデルなどはすべてその前提に立って設計されており、逆に言うと「プッシュ通知のように<strong>ネットワークリクエストを横取りしないService Workerにとっては不要な</strong>」部分も組み込まれていることになります。</p>

<p>例えば、Service Workerは最初のページロードではインストールが走るだけで、そのService Workerはすぐに使えるようにはなりません。これはネットワークリクエストを横取りするService Workerの場合、そのページ自身をロードしたService Workerが足元で置き換わることがないように設計されているためです。しかし、例えばプッシュ通知を使うためだけにService Workerを使ってる場合、この制限は不便なだけであまり意味がありません。</p>

<p>また、プッシュ通知を処理するService Workerとネットワークリクエストを処理するService Workerを分けて書きたいと思ったとしても、Service Workerは「ネットワークリクエストを処理する対象のURLスコープ」で識別されるため、プッシュ通知だけを処理するService Workerにもダミーのスコープを割り当てないといけません。</p>

<p>今回のF2Fではこれらの点は議論されただけであり、現行のVersion 1の仕様に反映されることはなさそうですが、次フェーズに向けて今後さらに議論されていくと予想されます。Service Workerというとまだまだオフライン処理やネットワークプロキシ的な処理の文脈で議論されることが多いですが、そうした前提を超えた文脈でService Workerが議論されるようになってきたことは興味深いことです。</p>

<h2>終わりに</h2>

<p>F2Fミーティングでは他にも興味深いさまざまなトピックが議論されました。全体的に、これまでのVersion 1のService Workerの仕様の議論では、ブラウザが当たり前のようにやってきたネットワークリクエストの処理をService Workerありの世界でどのように再定義するかに大きな焦点があったように思います。それに対し、次フェーズの議論は、ネットワークリクエストを処理するというモデルを越え、サービス間の連携や様々なバックグラウンドのイベントを処理する、より汎用的な基盤としてのService Workerに焦点が移りつつあるのかもしれません。</p>

<p>次回のF2FミーティングはW3Cの<a href="http://www.w3.org/2015/10/TPAC/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">TPAC</a>（Technical Plenary / Advisory Committee Meetings）中にやろうという提案がされています。次のTPACは日本の札幌で開催される予定なので、もし興味のある方はウォッチしてみてもいいかもしれません！（10/26には、誰でも参加可能なDeveloper Meetupもあります。）</p>
]]></content:encoded>
			</item>
	</channel>
</rss>
