2017/12/12更新

[フロントエンド] Chrome40リリース内容まとめ。Service Worker、他

このエントリーをはてなブックマークに追加            

こんにちは@yoheiMuneです。
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アプリケーションを作る上でのとても大切な基礎となります。さらに将来リリースされるPushBackground Syncはユーザーからパーミッションが与えられれば、Webページを閉じたとしても動作することができます。

Service Workerはいくつかの機能で成り立ちますが、今回のリリースではFetch APICache 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はこれから詳しく触ってみたいと思いますので、またブログを書きたいと思います。

今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。