とても今更だが、改めての復習。
なおHistoryAPIやCanvasなど有名どころ以外を紹介する。
インラインSVG
HTMLにSVGをインライン記述できるようになった。
以下のような要素がSVGタグ内で使用できる。
- circle：円
- ellipse：楕円
- line：単純な線
- path：任意のパス
- polygon：ポリゴン
- polyline：複数の線分の定義で構成された形状の定義
- rect：四角形
audio、video要素
readyStateやaddEventListenerでさまざまなイベントを設置できるため、ストリーミング再生の必要がないときにはYoutubeとかよりこちらのほうが使いやすい。
またCanvasとの連携なども。
ApplicationCache API
ブラウザはWebページのリクエスト時に、ファイルダウンロード後にキャッシュマニフェストを確認し、記述されているファイルをキャッシュすることで、アプリケーションキャッシュ（オフラインでもWebページを閲覧できるようにする仕組み）が可能となる。
このアプリケーションキャッシュを制御するためには、ApplicationCache APIを使用する。
applicationCache.update();
applicationCache.swapCache();
applicationCache.onupdateready = () => {
if ( navigator.onLine && confirm('再読み込みを行いますか？') ) {
location.reload();
}
};Page Visibility API
Webページが見えている状態にあるかを通知するAPI。
ウインドウが縮小されたときや別タブを見ているなどの状況を知ることができる。
document.addEventListener('visibilitychange' () => {
console.log(document.hidden);
console.log(document.visibilityState);
});Indexed Database API
WebStorage（sessionStorage、localStorage、セッションストレージとローカルストレージ）は有名だが、Indexed Database APIというものもある。
File API
これもよく使うが一応。
FileList、Blob（バイナリデータを扱うためのオブジェクト）、File（Blobを継承している）、FileReaderなどがある。
WebSocket
サーバー・クライアント間の通信は、従来どおりHTTP通信も可能だが、処理が複雑化しがちでオーバーヘッドもかかる（HTTPヘッダーであるレスポンスメッセージ、リクエスト・メッセージなどが必要になるがWebSocketは必要なくなるなど）などの問題があったが、WebSocketを使うことで、双方向通信を簡単に実現できるようになる。
WebSocketプロトコルはRFC6445で標準化されている。
XMLHttpRequest
Level1と2があり、2はクロスドメイン通信が行えるようになっている。
※今では生で使われずFetchAPIのほうが使われるが
Geolocation API
ユーザーの位置情報を取得する。
ただしセキュリティの関係で、ユーザーの許可を得ないと使用できない。
Web Workers
PWAの主要技術。
バックグラウンドスクリプトを生成するためのAPIで、これを利用することでUIや他のスクリプトによるユーザーインタラクションをブロックすることなく、計算処理を行うことができる。
WebWorkersは独立したスレッドで動作するため、WebWorkersで実行されるスクリプトは個別のファイルにする必要がある。
let worker = new Worker('hoge.js');※ローカルでは実行できないため、サーバーをたてる必要あり