Google Chrome 61の搭載予定機能
UI開発者 泉口PWA関連の情報を追って行く中でブラウザの最新情報は欠かせません。
Microsoft EdgeにおけるService Workerの実装も着々と進む中、9月13日に行われるMicrosoft Edge Web Summit 2017の告知ではPWAに関連する内容が言及され、最新版のEdgeではabout:flagsから試験的にService Workerを試せるようになるなど、ますますPWAへの期待が高まっていると感じています。
さて、PWA提唱元のGoogleはどうでしょうか、今回はWhat's New In DevTools (Chrome 61)から、Google Chrome 61の搭載予定機能の一部を見てみようと思います。
モバイルデバイスのシミュレート
Chrome DevToolsのスクリーンエミュレーターにThrottlingメニューが追加されました。
従来のThrottlingメニューはネットワークのみでしたが、Chrome 61からはCPUを含めた中間層（Network: Fast 3G, CPU: 4x slowdown）、ローエンド（Network: Slow 3G, CPU: 6x slowdown）のデバイス挙動そのものをシミュレートすることができるようになります。
また、このメニューにはOfflineも追加されています。PWA対応におけるオフライン時のキャッシュ確認もService Workers項目を開かず、簡単に行えるようになったので個人的には嬉しい機能です。
Service Workerキャッシュ時刻の表示
Chrome DevTools ApplicationタブのCache項目の一覧にファイルのキャッシュ時刻が追加されました。
Service Workerでキャッシュした時刻を表示するので、期待するタイミングで確実にキャッシュされているかなどのチェックが容易になります。
ES6モジュールのデバッグサポート
chrome://flags設定の必要なく、<script type="module">によりES6の一部実行が可能になりました。
class構文やconst宣言などはChrome 59でも使用できますが、例えば次のようなimport、export文をGoogle Chrome Canary 61で試すことができます。
HTML
<script type="module" src="import.js"></script>
import.js
import TestFunc from './export.js';
TestFunc();
export.js
export default function TestFunc() {
console.log('Hello!');
}
ストレージの使用状況を表示
Chrome DevTools ApplicationタブのClear storage項目から使用しているファイル容量を把握できるようになりました。
対象はIndexedDB、Cache Storage、Service Workersの3項目ですが、動画や音声を扱うアプリなど作成する場合は、余りに多くのファイル容量を使用していないか確認するなど、アプリ単体での使用容量には注意したいですね。
FPSメーターの表示
コマンドメニュー（Ctrl+Shift+P）に「Show frames per second(FPS) meter」が追加されました。
WebGLや頻繁にレンダリングを行うJavaScriptなどによる影響を調べるために必要なFPSメーターですが、これはChrome 61未満でconsole drawer上のRenderringタブに存在していた「FPS Meter」のチェックボックスへのショートカットです。
Google Chrome 62におけるSSL
10月にアップデート予定のGoogle Chrome 62からはSSLで保護されていないページへの警告が行われます。フォームへの入力時に「Not secure」と表示されてしまうため、SSL化されていないページでは離脱率が高くなってしまう懸念があり、早めの対応が推奨されます。当社では常時SSL/TLS対応も行っていますので、Google Chrome 62へのアップデートを見据えて検討してみてはいかがでしょうか？