まるでネイティブアプリなWebサイト「プログレッシブWebアプリ」実装のヒント（2/2 ページ）

公開 2017年08月30日 05時00分

更新 2017年08月30日 18時16分

著者

George Lawton

[TechTarget]

印刷する

Service Workerに求められる新しいテスト手法

　プログレッシブWebアプリケーションを構築する際は、新しいテスト手法が必要になる。Googleのページテストなどの従来のテストツールは、バックエンドからのリソースのダウンロード時間に重点を置いていた。ただしプログレッシブWebアプリケーションは多くの場合、キャッシュからリソースを取り出す。Service Workerの相互作用によってパフォーマンスが変わるアプリケーションのパフォーマンスを測定できるのは、Googleの「Lighthouse」のようなツールになるだろうとヒューム氏は話す。

　パフォーマンスは科学的に正確なものではない。Settledが最初に同社のWebページを実装したときは、読み込み時間が4.65秒だった。その後さまざまな最適化をした結果2.25秒まで短縮した。Service Workerがアクティブになると、Webページの読み込み時間は500ミリ秒まで短くなった。読み込み時間の大部分を占めるのはWebページサイズだ。最初に読み込んだWebページのサイズは約850KB。これが2度目には50KBになった。WebブラウザでService Workerがアクティブになると、クライアントがWebページを起動するために必要なのは、約1KB送信することだけになる。

　Settledは、Googleの「AngularJS」やFacebookの「ReactJS」などのJavaScriptフレームワーク（テンプレートやライブラリなどのツール群）を使用するのではなく、素のJavaScriptでアプリケーションを構築するという大胆な手法も採用している。これにより簡潔さが確保でき、クライアントにサービスを提供するWebページのサイズを削減できたとヒューム氏は語る。

　Settledは、プリフェッチ（事前読み込み）技法も試みている。この技法はクライアントが特定の順序でWebページを移動する可能性が高い場合に有効だ。開発者は、あらゆる場合にプリフェッチをしようとする傾向がある。だがヒューム氏によると、プリフェッチを最大限に生かすには、ユーザーがWebサイトを移動する方法を示すデータに目を向けることが重要だという。そうしないと、クライアントが一度も使用しないデータを送信するためにネットワークリソースが簡単に無駄使いされることになる。

サードパーティーの失敗に対する計画

　サードパーティー製クラウドアプリケーションに起因する問題に対処する際に、パフォーマンスの大きな課題が1つある。最新のWebアプリケーションの多くは、FacebookやGoogleのアクセス解析、広告追跡サービスを操作するサードパーティー製スクリプトを利用する。「これらは当社が管理できないところにある。サードパーティー製スクリプトで問題が発生したら、アプリケーションはそのスクリプトのなすがままになる」とヒューム氏は話す。

　Webアプリケーションの多くは、こうしたサードパーティー製サービスが応答を返すまで、読み込むことができない。Service Workerを使用してJavaScriptのタイムアウト関数を実装するのが、はるかに優れた方法だとヒューム氏は言う。サードパーティー製サービスがタイムアウトまでに応答しない場合、Service Workerが代替の応答を提供して、Webページのレンダリングを続行する。「まだ試用段階だが、今のところは非常にうまく進んでいる」（ヒューム氏）