Apple、Safari 11.1に13の新しいWebKit機能を追加

Appleは先週リリースしたSafari 11.1とmacOS 10.13.3に13種類の新しいWebKit機能を追加しました
同社は、以下に含まれるWebKitブログへの詳細な投稿で、リリースにおけるWebKitの変更を公開しています

サービスワーカーAPI

Service Worker APIを使用すると、バックグラウンドで実行されるスクリプトでWebページの一般的な処理を処理できます。Service Workerスクリプトは、このリリースに含まれているCache APIなどのその他の無料APIと連動して、ネットワークパフォーマンスを向上させたり、オフラインでの操作を提供するためのフェッチ要求や応答を保存します。WebKitの実装は、トップレベルのドキュメントの起源によってサービスプライバシーをパーティショニングすることで、サイト間のトラッキングを防止します。

Service WorkersのWebKit実装の詳細については、「Workers at Your Serivce」のブログ記事をお読みください。

Apple Payの支払いリクエストAPI

WebKitは、支払い要求APIがApple Payトランザクションを実行するためのサポートを追加しました。これにより、加盟店は標準APIを使用して複数のブラウザに支払い方法を提供できるため、さまざまなブラウザとプラットフォームでの安全な支払いをサポートする労力を大幅に削減できます。

詳細については、「Apple Payの支払い要求APIの概要」を参照してください。

ビーコンAPI

ビーコンAPIは、ページがアンロードされる前に送信する非同期リクエストをスケジュールし、ブロッキングリクエストなしで完了させます。これは、認識されたページの読み込みパフォーマンスに影響を与えずに、Webアプリケーションに関する診断データを送信する場合に便利です。

詳細については、Beacon仕様を参照してください。

ディレクトリアップロードとクリップボードAPIの更新

クリップボードAPIには、DataTransfer APIの近代化された実装に焦点を当てたいくつかの改良点があります。dataTransfer.itemsHTMLコンテンツとカスタムMIMEタイプのサポート、読み書き、およびネイティブアプリケーションからの画像のコピー＆ペーストを含む多数のバグを修正しました。また、WebKitはDataTransfer.webkitGetAsEntry()and を使用してディレクトリをアップロードするサポートを追加input.webkitdirectoryし、他のブラウザとの相互運用性を可能にしました。ユーザーは、ディレクトリ全体をiCloudやDropboxなどのクラウドストレージやファイル共有サービスにアップロードできるようになりました。

クリップボードAPIとディレクトリアップロードAPIの改善点については、こちらをご覧ください。

画像アセットとしてのビデオ

アニメーション画像フォーマットは非常に普及していますが、大規模で帯域幅が多いファイルサイズになりやすいです。パフォーマンスへの影響を解決するために、SafariのWebKitはH.264でエンコードされたMP4ビデオのHTML タグへの読み込みをサポートするようになりました。これにより、コンテンツ制作者は、H.264ビデオファイルよりもはるかに大きく、表示するためにより多くの処理能力を必要とするアニメーションGIFファイルを置き換えることができます。パフォーマンスの向上のほかにも、この変更により、Webコンテンツの作成者はビデオをCSSの背景イメージとして使用することができます。

この変更に関するいくつかの詳細情報は、ブログの記事「Evolution of ：GIF without the GIF」（Colin Bendell）にあります。

font-display

ページ作成者は、新しくサポートfont-display記述子を使用して、フォント読み込み動作をより詳細に制御できます。WebKitの新しいデフォルト動作では、インストールされているフォントに切り替えてから目的のフォントのダウンロードが完了するまで、不可視テキストが最大3秒間表示されます。を使用するfont-displayと、ページ作成者はswap、指定したWebフォントがダウンロードされるまで、値を使用してインストールされたフォントをすぐに表示できます。fallbackインストールされたフォントを最大3秒間表示する動作があり、その時間に目的のフォントが読み込まれない場合は表示されません。最後に、optionalビヘイビアは、ブラウザのキャッシュで使用可能なフォントを使用します。それがなければ、それを全く使わずにスキップします。これらは、Web開発者がWebコンテンツのデザインに最も適した読み込みと表示の操作を制御するための豊富なビヘイビアを提供します。

詳細は、CSSフォントモジュールレベル4の仕様を参照してください。

HTMLImageElement.decode（）

コンテンツの作成者は、ロードされ、完全にデコードされたイメージを必要とすることがあります。大きなイメージや多数のイメージを読み込んでデコードすると、ページのパフォーマンスが低下する可能性があります。新しいHTMLImageElement.decode()関数は、画像のデコードを非同期的に開始し、デコードされた画像が利用可能なときに解決するPromiseを返します。これにより、開発者はメインスレッドを縛ることなく、ロードされたイメージがいつデコードされるかを制御できるようになりました。

パッシブイベントリスナー

イベントハンドラtouchstart、イベントtouchmove、またはwheelイベントをアタッチするときにスクロールパフォーマンスが低下するのを避けるために、開発者はイベントリスナーをpassive、リスナーが呼び出していないかのように指定できますpreventDefault()。これにより、Safariは、イベントリスナーが終了するのを待つことなく、高性能のスクロールを提供し続けることができます。

Passive Events Listenerの詳細は、DOM仕様書に記載されています。

オフスクリーンキャンバス

オフスクリーンキャンバスAPIは、キャンバスを非表示にする前にキャンバスをオフスクリーンで事前レンダリングするメカニズムを提供します。このアプローチは、特に複雑な場面で大きなパフォーマンス向上をもたらします。

オフスクリーンキャンバスAPIの詳細を読む。

Storage Access API

新しいStorage Access APIは、サードパーティ製の埋め込み機能が、インテリジェントなトラッキング防止機能を備えた世界でユーザーと対話する際に、ファーストパーティのクッキーへのアクセスを要求できるようにするソリューションを提供します。これにより、埋め込まれたコンテンツを提供する柔軟性がコンテンツプロバイダーに与えられ、ユーザーは情報を誰と共有しているかについて透明性を提供することができます。

Storage Access APIの詳細については、WebKitのブログをご覧ください。