Service Workerを活用
まるでネイティブアプリなWebサイト「プログレッシブWebアプリ」実装のヒント（1/2 ページ）
ネイティブアプリケーションのような操作性を有する「プログレッシブWebアプリケーション」。その実装方法を取り上げる。
これまでモバイルデバイスからクラウドアプリケーションへアクセスしてきたのは、Webブラウザか専用のクライアントアプリケーション（ネイティブアプリケーション）だった。Webページの処理をバックグラウンドで支えるスクリプト「Service Worker」、キャッシュの機能強化、新しいインストールオプションなど、新しいWebブラウザ機能の登場により、開発者はWebブラウザベースのアプリケーションとネイティブアプリケーションそれぞれの機能を融合する「プログレッシブWebアプリケーション」を作成できるようになった。米国で開催されたWeb開発者向けイベント「O'Reilly Fluent Conference」で、不動産サービス会社Settledの最高技術責任者（CTO）ディーン・ヒューム氏は、この新しいスタイルのアプリケーションを実装するヒントを紹介した。
Settledは英国で不動産情報の掲載サービスを提供する。同社はプログレッシブWebアプリケーションを使用して、顧客向けに新しいダッシュボードを構築することを考えていた。このダッシュボードにより、ユーザーはネットワークに接続しているかどうかに関係なく、迅速かつ容易に同社の情報へアクセスできるようになる。このプログレッシブWebアプリケーションを実装してからというもの、SettledのユーザーはWebサイトの閲覧に2倍の時間を費やすようになり、Webサイトの約15分の1のデータを利用するようになった。その上、ページの読み込み時間は3分の1に短縮した。
これまでのネイティブアプリケーションの大きなメリットは、ユーザーがアイコンをクリックすることで起動できる点にある。プログレッシブWebアプリケーションは、ページに含まれるマニフェストファイル（アプリケーションの実行に必要な情報を記載したファイル）を利用して同じ機能を実現する。マニフェストファイルは144×144画素のアイコンを含み、このアイコンをユーザーのホーム画面にインストールできる。Webページ自体は、HTTPS接続経由で実行するService Workerを使用する必要がある。ユーザーがアプリケーションへのリンクをインストールするオプションを得るには、少なくとも2回はWebサイトへアクセスしなければならない。
併せて読みたいお薦めの記事
ネイティブアプリとWebアプリに関する解説
- 「ネイティブアプリ」と「Webアプリ」、モバイルアプリはどれが使いやすい？
- スマホで使いたいのはやっぱりネイティブアプリ、「モバイルの常識」はどう変化？
- モバイルアプリで知っておきたいHTML5の「完全無欠ではない」ポイント
ユーザー企業によるアプリケーション開発
プログレッシブWebアプリケーションを支えるService Worker
Service Workerは、アプリケーションロジックをバックグラウンドで処理する。つまり開発者はクライアントの表示、アプリケーションロジック、クラウドとのバックエンド通信を分離することができる。「Service Workerは、Webブラウザの能力を解き放つ鍵になる」とヒューム氏は話す。「Webブラウザからの要求の取り出しと、サーバへの要求をバックグランドで実行する」（同氏）。Service Workerがヘッダを検査し、ヘッダを操作してからサーバへ送信するか、フロントエンドの要求であれば直接応答する。
現状ではService Workerは、全ての最新Webブラウザに搭載されているか、搭載が計画されている。ただしAppleの「Safari」にはまだ実装されていない。同社の経験によると、ユーザーの75％がService WorkerをサポートするWebブラウザから同社のサイトへアクセスしていたという。プログレッシブWebアプリケーションを構築する場合、ヒューム氏は「Service Worker Toolbox」（SW Toolbox）の利用を勧めている。SW Toolboxは、Service Workerを実装するための多種多様なコードスニペット（断片的なサンプルコード）を含んでいる。
要求を直接操作できるService Workerの機能は、新たなセキュリティの脆弱（ぜいじゃく）性をもたらす可能性がある。ハッカーは理論上、Service Workerを使用して、銀行口座に意図しない要求をする中間者攻撃を仕掛けることができる。そのためService WorkerはSSLを使用して、クライアントとバックエンドサーバ間のデータを暗号化し、セキュリティを確保する必要がある。ヒューム氏によれば、Cloudflareの「CFSSL」やオープンソースの「Let's Encrypt」などの無料ツールを使えば、開発者はSSLを非常に簡単に実装できるという。
Copyright © ITmedia, Inc. All Rights Reserved.
この記事の著者
関連記事
新着ホワイトペーパー PR
-
製品資料
[株式会社フィックスターズ] 組み込み開発特有の課題も解消できる「AI活用」の秘訣とは？ -
製品資料
[株式会社スタディスト] 食品ロスを解消して“利益の創出”を実現、その第一歩は何から始める？ -
製品資料
[株式会社スタディスト] 段取り替え時間に差が生まれるのはなぜ？ 作業を標準化する仕組み作りのコツ -
技術文書・技術解説
[Datadog Japan合同会社] 開発と運用の人員格差をどう埋める？ DevOpsを実現するための実践ポイント -
製品資料
[サイバーソリューションズ株式会社] たった1回でサプライチェーンが破滅することも メール誤送信を確実に防ぐには
こんなメディアも見られています
TechTargetジャパンに関連する情報をお探しであれば、こちらのメディアもお役に立てるかもしれません。
ベンダーコンテンツ PR
From Informa TechTarget
SpecialPR
アクセスランキング
-
1
「企業におけるAI導入検討度とIT投資優先度」に関するアンケート
-
2
半数がブルーカラー転向を視野に？ ベテランエンジニアを追い込む“54歳の壁”
-
3
「Wi-Fi 7」経由でWindowsが乗っ取られる？ 最高権限奪取の恐怖
-
4
パッチなしで「今すぐサーバを落とせ」 Kiteworks異例警告の波紋
-
5
LINEヤフーはなぜ「社内の管理者」すら信用しないインフラを作ったのか
-
6
情報漏えいはなぜ繰り返されるのか 今すぐ見直すべき「境界」
-
7
「サイバー犯罪株式会社」に潜入 現地調査で判明した“犯罪者求人”の実態
-
8
OpenAIやAnthropicでさえ制御不能 2026年夏「3大サイバー攻撃」の衝撃
-
9
Copilot導入で陥る“目的化”の落とし穴 定着の鍵は「作り込まない」こと
-
10
IT製品の導入に関するアンケート「セキュリティ」編
ホワイトペーパーランキング PR
-
1
家庭用Wi-Fiルーターの業務利用は危険？ 避けるべき理由と具体的な対策
-
2
Microsoft 365のメールセキュリティ、3つの“死角”と追加で検討すべき対策とは
-
3
システムの保守がモダン化を阻む？ 「変えない判断」から脱却する方法とは
-
4
AI駆動攻撃にどう対抗する？ 超速の攻撃からエンドポイントを保護する方法
-
5
不審メールの経路や見せ方に変化？ 2026年夏の3事例から見えた動向と対処方法
-
6
プログラミング不要で誰でも実現できる、ネットワーク運用管理の自動化とは
-
7
Linux初心者でも知らないとまずい「RHEL」「SLES」の違いとは？
-
8
東大教授と考える、AI時代の「データ主権」「信頼性」「ガバナンス」の在り方
-
9
「IT史に名を残すシステム障害」8選
-
10
最速72分でデータが流出？ 最新の脅威トレンドや侵入手法から分かった防衛策
TechTargetジャパン SNS
@techtarget_itmをフォロー
インフォメーション
注目情報をチェック
TechTargetジャパンをフォロー