オフラインの世界

これは私の個人的なブログの内容であるにもかかわらずMozilla Hacksとしての最初の投稿であり、Mozillianとしての最初の投稿でもあります!今月はずっとWeb Application Developer Initiative(WADI)のService Worker Cookbook projectに取り組んでいました。Service Worker Cookbook projectは私にService Workersの専門知識をアウトプットする機会を与えてくれて、それと同時にこのエキサイティングな新しいWebテクノロジーを活用する方法を学ばせて くれました。私の考えをシェアしてみませんか。

このシリーズの以前の投稿に私の同僚のDavid WalshApplication Cacheの柔軟性の欠如について話しています。なので私はこのトピックについて詳しく掘り下げません。私はService Worker Cookbookのレシピの詳細を見ていこうかと思います。DavidはService Workerの導入といくつかのoffline recipesについて議論してくれました。私はもう少し広げてService Workerのほかの使い方についてみていこうかと思います。

今日におけるServiceWorker

まだ開発下であるにもかかわらず、Service Workersは世界中で使われていると聞き始めています。

要約すると、このAPIは元々アプリケーションキャッシュが間違えたことを正しくするに全力を尽くしていました。Some web archaeologyはオフラインキャッシュを正確に修正する意図を明示し、Web開発者に「URLの設計をやりやすくするために、健全で階層的な方法のオフラインアプリケーションを」認めています。

最初の取り組みはService Workerのfetch functional event を発展させるというコンセプトを介してナビゲーションを制御する概念の導入です。

fetch functional event はネットワークリクエストを妨害し、ネットワーク、データベース、作成した手続きから取得したデータを返却する方法です。 大半は?コントロールされるページはかれらの実際ハイジャックされている(しかし伝えられることはできます)ことを知る必要ありません。
そのためサービスロジックは完全にアプリケーションロジックから切り離されています。完全な”中間者”です。
しかしハッカー(結局これもハッカーブログだからね!!)として私たちは関連する問題への“ingenious”な解決策を作るのが好きですが、

“ingenious”は時々なにかを悪用することを意味します。

APIの解析

アプリケーションの直接的なMitMアプローチをやってみましょう:API analytics

あなたはAPIの使用方法の統計がほしい、そしてサーバーにアクセスできないと想定しましょう。現在の解決方法はクライアントコードをあやつり、HTTPリクエストを作成し適切なログをanalytics serviceに送信します。Service Workerは一枚上手で、それぞれのリクエストを妨害し、パラメーターを抽出して、分析やネットワークに到達するためにもともとのリクエストを残す為にログを送ります。

パッケージ化されたアプリのインストール

他のユニークな使い方を探る前に、伝統に従いましょう。
Service Workerは installing packaged applicationsを 使いオフラインのリソースが使用できます。これはzipパッケージとしてダウンロードし、Service Worker有効時に解凍することができます。これはそれぞれのHTTPリクエストのオーバーヘッドを減らし、原始的な(一度の)操作によってダウンロー ドすることが可能です。フォントや画像などの静的なオフセットの自動キャッシュは”offlining”の良い例であり良い方法です。

サーバーを偽装する

上記のServiceWorkerがプロキシとして動作するMitMアプローチをもう一度考えて見ま しょう。ServiceWorkerはサーバーを偽装し、クライアントがネットワークを通して期待するAPIを実装することができます。Service workerはクライアントがネットワークを通して届いてほしいAPIを実装することもできます。

impersonate a serverライブラリはFirefox OSで開発されていて New Gaia Architecture と呼ばれるものをサポートしています。
New Gaia Architecture はアプリケーションや開発者にService Workers in a declarative way で記述することを許可し、Express (Node.jsのライブラリ)のクライアントサイドで動く環境をサポートしています。

機能的な現代のフレームワークを実装する。

Service Workerはモダンな枠組みの構成要素の一部分として自分自身の地位を確立しています。

例として、template interpolationを考えてみます。backbone.jsAngular のような現在のポピュラーなフレームワークの多くはテンプレートの中に特性を補間することによってモデルを描きます。

以前その話を聞いた私たちはNew Gaia Architectureに render store の概念を導入しています。 render store とはinterpolation delaysをなくすため次にクライアントが同じモデルをリクエストしたときレンダーストアから探せるようにデータモデルにinterpolating the template の結果を保存するオフラインキャッシュです。

Dependency injection

現代的なフレームワークの他のポピュラーなコンセプトに dependency injectionがあります。これは依存するコードが依存関係を知る必要は無い状態です。

これは抽象的なインターフェースのみ知っていて、詳細な仕様はinjectorと呼ばれるabstract factoryから提供されます。Service Workerはinjectorとして動作します。

フレームワークはスクリプトタグを経由してそのコンポーネントのAPIの依存関係を宣言させます。その後Service Workerはinjectorとして動作し、抽象的なリソースのリクエストを特定して、実際のモジュールを返却します。

リクエストの遅延

もしデバイスが connectivityを持っていなくて、しかし連続して操作を受け入れていると最終的にクライアントアプリケーションやサービスが非同期になってしまいます。

フレームワークの面白い特徴としてリクエストの遅延をすることができます。例としてオフライン時のサービスworkerはAPIのリクエストを保留して接続が来たときにリクエストを解き放つことができます。

一方でServiceWorkerはクライアントにgeneric OK (status code 200)やACCEPTED (status code 202)などの サーバーの応答を模倣することができます。コネクションが復帰するとServiceWorkerはdeferred requestsキューからネットワークに対してリクエストを再作成し同期します。

Network logic のアイデア

最 後に、Service Workerはnetwork logicを含むこともできます。たぶんmultiplexing リクエストを複数のソースに使用することもできるでしょう。可用性や計測やそれぞれの正しいチャンネルを通り返ってきたデータソースの質の計測もできま す。
結論を出す前に小さい例を挙げましょう。ユーザーはHDの動画を見たいため、アプリケーションは動画のURLをリクエストしま す。しかしコンテンツの提供が始まる前に、ServiceWorkerがリクエストを妨害し、サーバーにサーバー自身のロードレベルを聞きに行きます。一 番低いボリュームを選択し、その特定のサーバからコンテンツを提供開始します。なにか気づかないか?そう、これはロードバランサーだ!今はクライアント側で使える!すごいとは思わないか?

最後に

今はこれくらいにしておきましょう。7つの使い道、単にオフラインで使用するためにコンテンツをキャッシュするだけを超えた7つのユニークなレシピ。現在、 Service Worker Cookbook projectはService Workers APIによって提供される特徴を活用するためこれらのすべての(そのほかにもある)方法を公開しています。

そして私たちはここでとまらず、先へ行く。
Push API  は定着し、 Background Sync ももうすぐです。
Service Workersの更なる情報や他のプラットフォームでの実装状況はPlatatusを参照してください。私たちはあなたの参加を待っています!

コメントを投稿する