Service Workerを活用
まるでネイティブアプリなWebサイト「プログレッシブWebアプリ」実装のヒント（2/2 ページ）
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ページのレンダリングを続行する。「まだ試用段階だが、今のところは非常にうまく進んでいる」（ヒューム氏）
Copyright © ITmedia, Inc. All Rights Reserved.
この記事の著者
関連記事
新着ホワイトペーパー PR
-
製品資料
[株式会社MatrixFlow] 「物流リソース最適化」ガイド：人員・配車・傭車を出庫依頼の確定前に決めきる -
製品資料
[株式会社キーエンス] なぜRPA導入は頓挫する？ シナリオ作成の壁を乗り越える解決策とは -
製品資料
[株式会社セールスフォース・ジャパン] 「CRMは設計と無関係」は本当か？ PLMとの融合で実現する高速開発 -
事例
[日本ヒューレット・パッカード合同会社] AIエージェントの時代にどう備える？ 「新たな働き手」を支える3要素とは -
製品資料
[日本ヒューレット・パッカード合同会社] “横並びの自動化”から脱却、AI活用で生産性と競争力を高める秘訣
こんなメディアも見られています
TechTargetジャパンに関連する情報をお探しであれば、こちらのメディアもお役に立てるかもしれません。
ベンダーコンテンツ PR
From Informa TechTarget
SpecialPR
アクセスランキング
-
1
法務と開発者で「言葉が通じない」問題 トヨタやソニーが語るOSS管理の真実
-
2
なぜ「全社配布Copilot」は使われないのか？ 失敗に学ぶAI定着
-
3
なぜ「Gemini 4 Argon」は出遅れたのか？ Googleが狙う“逆転のシナリオ”
-
4
ChatGPTは“検索しまくり”でGeminiは“淡泊”？ データが明かすAIの裏側
-
5
損保ジャパンはなぜ「COBOL」を捨てなかったのか？ 脱メインフレームの真相
-
6
情シスの約8割が転職や退職を意識 調査で分かった“辞めたくなる最大の理由”
-
7
「結局使わなくなる」Microsoft 365 Copilotを半年で定着 キリンの3施策
-
8
「Wi-Fi 7」経由でWindowsが乗っ取られる？ 最高権限奪取の恐怖
-
9
「中堅・中小企業のネットワーク・セキュリティ運用実態」に関するアンケート
-
10
情報漏えいはなぜ繰り返されるのか 今すぐ見直すべき「境界」
ホワイトペーパーランキング PR
-
1
不審メールの経路や見せ方に変化？ 2026年夏の3事例から見えた動向と対処方法
-
2
家庭用Wi-Fiルーターの業務利用は危険？ 避けるべき理由と具体的な対策
-
3
Microsoft 365を安全に運用 うっかりミスやサイバー攻撃に備えるデータ保護術
-
4
財務部門がAIを最大限に活用する方法 無駄のない戦略的リーダーシップへの道
-
5
LLMが兵器化？ 元FBI高官が鳴らす警鐘とセキュリティツール統合のポイント
-
6
「オンプレミス回帰」せざるを得ない“合理的な理由”
-
7
なぜRPA導入は頓挫する？ シナリオ作成の壁を乗り越える解決策とは
-
8
生成AIを開発に導入しても効果が見えない？ 実証実験で分かった成果と課題
-
9
経産省DX指針から読み解く、受発注業務デジタル化ロードマップ
-
10
HDDを使わない「SSDオンリー」が無謀なのはなぜ？
TechTargetジャパン SNS
@techtarget_itmをフォロー
インフォメーション
注目情報をチェック
TechTargetジャパンをフォロー