[フロントエンド] Chrome40リリース内容まとめ。Service Worker、他
こんにちは@yoheiMuneです。
12月の初めにChrome40βがリリースされたので、今日はその変更点をブログに残したいと思います。
https://www.google.com/intl/en/chrome/browser/beta.html
また、追加された機能によっては、
Service Workerを用いることで、開発者がネットワーキングをコントロールすることができ、その結果オフラインでのユーザー体験を構築することができます。またオフライン以外にもUI要素やよく利用する機能をキャッシュすることで、ページロード時間を劇的に減らすことができます。以下はService Workerの使った場合のパフォーマンスを示す動画です。
上記動画では、外部APIから画像を取得して表示するサンプルで、詳しい作り方はThe ServiceWorker: The network layer is yours to own＠Youtube（英語）で説明されています。
Service Workerの生存期間は今までのWeb機能のそれとは異なり、ブラウザの生存期間に依存しません。これはバックグラウンド処理を持つリッチなWebアプリケーションを作る上でのとても大切な基礎となります。さらに将来リリースされるPushやBackground Syncはユーザーからパーミッションが与えられれば、Webページを閉じたとしても動作することができます。
Service Workerはいくつかの機能で成り立ちますが、今回のリリースではFetch APIとCache APIの2つが提供されます。FetchイベントではService Workerからネットワークリクエストを生成したり、Service WorkerのコントロールするレスポンスをWebページに返すことができます。Cache APIを用いることで、キャッシュの保存や利用を行う事ができます。
これら2つの機能は今まさに開発中で、進化する仕様に追従するように実装されています。今回のリリースはCache APIのサブセットであり、すべての機能を利用するにはpolyfillを使うことができます。
さらに詳しい情報は、HTML5Rocks（英語）や実装サンプル一覧（英語）をご確認ください。
- Chromium Dashboard
今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。
最後までご覧頂きましてありがとうございました！
12月の初めにChrome40βがリリースされたので、今日はその変更点をブログに残したいと思います。
Special Thanks to https://flic.kr/p/atpQ8J
目次
Chromeベータ版の入手、新機能の動作設定
Chromeのβ版は、以下から入手できます。https://www.google.com/intl/en/chrome/browser/beta.html
また、追加された機能によっては、
chrome://flagsから「JavaScriptの試験運用機能を有効にする」を有効にする必要がある場合があります。Service Worker
Chrome40のリリースで最も注目すべきはService Workerです。Service Workerを用いることで、開発者がネットワーキングをコントロールすることができ、その結果オフラインでのユーザー体験を構築することができます。またオフライン以外にもUI要素やよく利用する機能をキャッシュすることで、ページロード時間を劇的に減らすことができます。以下はService Workerの使った場合のパフォーマンスを示す動画です。
上記動画では、外部APIから画像を取得して表示するサンプルで、詳しい作り方はThe ServiceWorker: The network layer is yours to own＠Youtube（英語）で説明されています。
Service Workerの生存期間は今までのWeb機能のそれとは異なり、ブラウザの生存期間に依存しません。これはバックグラウンド処理を持つリッチなWebアプリケーションを作る上でのとても大切な基礎となります。さらに将来リリースされるPushやBackground Syncはユーザーからパーミッションが与えられれば、Webページを閉じたとしても動作することができます。
Service Workerはいくつかの機能で成り立ちますが、今回のリリースではFetch APIとCache APIの2つが提供されます。FetchイベントではService Workerからネットワークリクエストを生成したり、Service WorkerのコントロールするレスポンスをWebページに返すことができます。Cache APIを用いることで、キャッシュの保存や利用を行う事ができます。
これら2つの機能は今まさに開発中で、進化する仕様に追従するように実装されています。今回のリリースはCache APIのサブセットであり、すべての機能を利用するにはpolyfillを使うことができます。
さらに詳しい情報は、HTML5Rocks（英語）や実装サンプル一覧（英語）をご確認ください。
その他のリリース
Chrome40のメインはService Workerですが、以下のリリース内容も含まれます。- Content Security Policy (CSP) Level 2に含まれる新しいディレクティブ
- reportValidity機能により、Validation付きのフォームインプットでユーザーの入力間違いを簡単に表示することができます。これにより個別にエラー実装しなくても良くなるという話。
- Intel Open Source Technology Centerのおかげで、Mac上のChromeにおいてHarfBuzzを使えるようになり、これにより非ラテン文字のレンダリングパフォーマンスが改善され、新しい最適化を利用できるようになり、すべてのプラットフォームにおけるフォントシステムを統合します。
- Android Lollipop（Android 5.0）においてtheme-colorメタタグを用いて、ツールバーの色を選択できるようになりました。
Chromeの機能リリースの詳細
Chrome各種機能のリリース予定/リリース済みの詳細は、以下より参照することができます。なかなか面白いのでぜひチェックしてみてください！- Chromium Dashboard
最後に
Chromeのリリースは毎回楽しい機能がいっぱい乗ってくるので、なかなか楽しみにしています。今回のリリースでとうとう、今年のGoogle IOくらいからホットな話題になっていたService WorkerがとうとうChromeβ版に乗りましたね。Service Workerはこれから詳しく触ってみたいと思いますので、またブログを書きたいと思います。今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。
最後までご覧頂きましてありがとうございました！
