PWA の開発を開始する

プログレッシブ Web アプリ (PWA) は、HTML、CSS、JavaScript などの Web テクノロジを使用して構築するアプリであり、1 つのコードベースからさまざまなデバイスオペレーティングシステムにインストールして実行することもできます。

PWA を構築する方法を学習するために作成された温度コンバーターのサンプルと共にこの記事を使用すると、次のことが可能になります。

サンプルのコードを軽微に変更して、温度コンバーター PWA をカスタマイズします。
サンプルディレクトリ全体をコピーして貼り付け、コードを大幅に変更して、独自の PWA を作成します。

プログレッシブ Web アプリのアーキテクチャ

次の図は、プログレッシブ Web アプリ (PWA) のアーキテクチャの概要を示しています。

PWA のアーキテクチャ図

左側の PWA のフロントエンドを実行するデバイスには、PWA のフロントエンドコード用のファイルがあります。

右側では、Web サーバーは PWA のバックエンドコード (またはデータベースコンテンツ) を実行します。

デバイスには、HTML、CSS、JavaScript、サービスワーカー、マニフェストなどのフロントエンドコードが含まれています。これは、プログレッシブ Web アプリ (PWA) がブラウザーで Web アプリとして使用されているか、デバイスにインストールされているローカルアプリとして使用されているかに関係なく当てはまります。

通常の Web アプリと同様に、プログレッシブ Web アプリは Web のプログラミング言語 (HTML、CSS、JavaScript) を使用して記述され、Web サーバーを使用してユーザーに配布されます。 Web アプリがプログレッシブ Web アプリの場合、ユーザーは最初に Web ブラウザー内に Web アプリを表示し、アドレスバーにはアプリをローカルにインストールするように求める [ アプリの使用可能] ボタンもあります。

運用 Web サーバーへの PWA のデプロイ

プログレッシブ Web アプリ (PWA) をユーザーが使用できるようにするには、(ローカル開発環境とは異なり) HTTPS 経由でアクセスできる Web サーバーにプログレッシブ Web アプリ (PWA) をデプロイします。 Web サーバーはフロントエンドコードをユーザーに送信し、Web アプリのバックエンドコードを実行します。

サービスワーカーなどのプログレッシブ Web Apps (PWA) プラットフォームの一部では、HTTPS を使用する必要があります。

プログレッシブ Web アプリ (PWA) にバックエンドコードがない場合は、プログレッシブ Web アプリ (PWA) を静的 Web サーバーから提供できます。たとえば、https://microsoftedge.github.io/Demos/temperature-converter/の Temperature コンバーターでは、GitHub の github.io 静的サーバーが使用されます。

「温度コンバーターのサンプル」の記事では、ローカルサーバーでサンプルのプログレッシブ Web アプリを実行してテストします。独自のプログレッシブ Web アプリがテストされ、配布する準備ができたら、テストされた PWA を Web サーバー (Web ホスティングプロバイダー) 経由でユーザーに配布します。

プログレッシブ Web アプリを更新するには、新しいバージョンを Web サーバーにもう一度デプロイします。

Web サーバーホストの例

プログレッシブ Web アプリ (PWA) が公開されたら、HTTPS URL に発行する必要があります。多くのホストでは既定で HTTPS が使用されますが、ホストが HTTPS を提供していない場合は、 Let's Encrypt で必要な証明書を作成するための無料の代替手段が提供されます。

たとえば、Azure無料アカウントを作成できます。 Microsoft Azure App Serviceで Web サイトをホストする場合、既定では HTTPS 経由で提供されます。

また、HTTPS をサポートする GitHub Pages (pages.github.com) で Web サイトをホストすることもできます。 GitHub Pagesドキュメントを参照してください。

localhost (http) と運用サーバー (https) について

localhost アドレスでローカル開発 Web サーバーを使用する場合、URL は通常、httpsではなくhttpで始まります。サービスワーカーなど、プログレッシブ Web Apps プラットフォームの主要な部分では、HTTP ではなく HTTPS を使用する必要があります。

開発とデバッグのために、Microsoft Edge (または PWA ローカルアプリをホストしているウィンドウ) では、 localhost アドレスで HTTPS を使用せずにプログレッシブ Web アプリ (PWA) API を実行できます。

フロントエンドコードファイル (UI コード)

プログレッシブ Web アプリ (PWA) には、Web サーバーによってローカルデバイス上のブラウザーに送信されるフロントエンドコードファイルがあります。

フロントエンドコードは、HTML、CSS、JavaScript コードなど、アプリをユーザーのデバイスにインストールするために必要なリソースです。

プログレッシブ Web アプリ (PWA) には、通常、次のフロントエンドコードファイルが含まれています。

ユーザーインターフェイスに表示されるテキスト、画像、テキストフィールド、ボタンなど、アプリ内のコンテンツを記述する HTML ファイル。
レイアウト内の HTML コンテンツを整理し、要素にスタイルを提供する CSS ファイル。
ユーザーインターフェイスにユーザー操作を追加するための JavaScript ファイル。
アプリをホストオペレーティングシステムに記述する JSON マニフェストファイル。
アプリのフロントエンドコードファイルをキャッシュし、バックグラウンドタスクを実行するための JavaScript サービスワーカーファイル。

プログレッシブ Web アプリ (PWA) のフロントエンドコードは、デバイスの Web ブラウザーを使用して実行されます。ブラウザー独自の UI は、アプリがスタンドアロンウィンドウで実行されている場合は表示されません。これは、ブラウザー UI コントロールを最小限に抑えた合理化されたブラウザーウィンドウです。

バックエンドコード、ファイル、エンドポイント、データ (サーバー側コード)

プログレッシブ Web アプリ (PWA) には、Web サーバー上に存在して実行されるバックエンドコードが含まれている可能性があります。

Web アプリと同様に、プログレッシブ Web アプリには、アプリがインターネットに接続するときに必要な Web サービス API エンドポイントを実装して、サーバー上のデータベースに格納される可能性のある動的コンテンツを取得する バックエンドコード (サーバー側コード) を含めることができます。

プログレッシブ Web アプリのバックエンドコードでは、次のような任意のサーバー側言語を使用できます。

ASP.NET
Java
Node.js
PHP

ビルドしているアプリによっては、サーバー側の Web サービス API エンドポイントが必要ない場合があります。

温度コンバーターのサンプル PWA にはサーバー側のコードがありません。これは、アプリがインストールされているデバイスでのみ実行され、サーバー側のデータは必要ないためです。

残りのセクションでは、PWA サンプルを構成するファイルについて説明します。

Web アプリマニフェスト (`manifest.json`)

通常の Web アプリはブラウザーでのみ実行されます。 Web アプリマニフェストを追加すると、Web アプリはプログレッシブ Web アプリ (PWA) になります。 Web アプリマニフェストを使用すると、PWA をサポートするブラウザーは、デバイスにプログレッシブ Web アプリとして Web アプリをインストールできます。

Web アプリマニフェストは、プログレッシブ Web アプリに関するメタデータ (名前、説明、アイコン、使用するさまざまなオペレーティングシステム機能など) を含む JSON ファイルです。 JSON コードは、アプリをホストオペレーティングシステムに記述します。マニフェストファイルは、デバイスのオペレーティングシステムで使用するプログレッシブ Web アプリに関する基本的な情報を提供します。

manifest.jsonファイル名は、厳密な要件ではなく、一般的な規則です。

manifest.json例:

{
  "lang": "en-us",
  "name": "Temperature converter app",
  "short_name": "Temperature converter",
  "description": "A basic temperature converter application that can convert to and from Celsius, Kelvin, and Fahrenheit",
  "start_url": "./",
  "background_color": "#2f3d58",
  "theme_color": "#2f3d58",
  "orientation": "any",
  "display": "standalone",
  "icons": [
      {
          "src": "./icon512.png",
          "sizes": "512x512"
      }
  ]
}

アプリのファイルをローカルデバイスにキャッシュするサービスワーカー (`sw.js`)

プログレッシブ Web アプリ (PWA) は、サービスワーカー JavaScript ファイル ( sw.js など) を使用して、フロントエンドの UI ファイルをローカルデバイスにキャッシュできます。サービスワーカーは、アプリによって読み込まれる専用の JavaScript ファイルで定義されます (アプリロジックを含むメイン .js ファイルとは異なります)。

サービスワーカーは、プログレッシブ Web アプリからのネットワーク要求を傍受できる特殊な Web ワーカーです。サービスワーカーは、次のようなシナリオを有効にします。

インターネットへの断続的な接続を含むオフラインサポート。
デバイスでの高度なキャッシュ。
PUSH メッセージの受信、アプリアイコンへのバッジの追加、サーバーからのデータのフェッチなどのバックグラウンドタスクの実行。

サービスワーカーは、プログレッシブ Web アプリをネットワーク条件に依存せずに高速に行うのに役立つ重要なテクノロジです。サービスワーカーによってアプリが作成されます。

高速化。
より信頼性が高い。
ネットワークに依存しない。アプリは、インターネット接続が見つからないか断続的であっても、(何らかの方法で) 動作し続けます。

このサンプルsw.js ファイルは、Temperature コンバーター PWA の一部であるキャッシュファイルを管理し、ファイルをローカルドライブにキャッシュし、インターネットに接続していないときにそれらを提供するサービスワーカーです。

sw.js:

const CACHE_NAME = `temperature-converter-v1`;
    
// Use the install event to pre-cache all initial resources.
self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    cache.addAll([
      './',
      './converter.js',
      './converter.css'
    ]);
  })());
});

self.addEventListener('fetch', event => {
  event.respondWith((async () => {
    const cache = await caches.open(CACHE_NAME);

    // Get the resource from the cache.
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) {
      return cachedResponse;
    } else {
        try {
          // If the resource was not in the cache, try the network.
          const fetchResponse = await fetch(event.request);
    
          // Save the resource in the cache and return it.
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        } catch (e) {
          // The network failed
        }
    }
  })());
});

このサービスワーカーは、次の 3 つのファイルを明示的にキャッシュします。

./ 手段 index.html
./converter.js
./converter.css

2 つの追加ファイルがブラウザーによって自動的にキャッシュされます。

アイコンファイル (.png)。
マニフェストファイル (.json)。

`install` イベントのリッスン

サービスワーカーは、ユーザーがアプリをインストールしたときにトリガーされる install イベントをリッスンし、それを使用して、アプリがオフラインで機能するために必要なリソースをキャッシュします。次のように、

最初の HTML ページ。
アプリロジックを含むアプリのメイン JavaScript ファイル。
アプリの CSS ファイル。

アプリのインストールを有効にするには、JavaScript サービスワーカーファイルを使用して、必要なフロントエンドファイルをローカルデバイスにキャッシュすることで、アプリをオフライン (常にインターネット接続なしで) 動作させます。

`fetch` イベントのリッスン

サービスワーカーは fetch イベントをインターセプトします。これは、アプリがサーバーに要求を送信するたびに発生し、キャッシュ優先戦略を適用します。

サービスワーカーはキャッシュされたリソースを返してアプリをオフラインで動作させることができます。失敗した場合、サービスワーカーは代わりにサーバーからファイルのダウンロードを試みます。

サービスワーカーは省略可能です

プログレッシブ Web アプリ (PWA) には、アプリをインストールするために Microsoft Edge のサービスワーカーが必要ありません。ただし、デバイスに断続的なネットワーク接続がある場合やオフラインになっている場合など、アプリの信頼性を高めるために、独自のプログレッシブ Web アプリにサービスワーカーを含めることをお勧めします。

次のステップ

「温度コンバーターのサンプル」の手順を実行します。次に、独自のプログレッシブ Web アプリ (PWA) を作成するには、 Demos\temperature-converter ディレクトリをコピー、貼り付け、変更できます。温度コンバータのサンプルは、プログレッシブ Web Apps (PWA) が実行できる小さなサンプルのみを示しています。このサンプルでは、インターネット接続がない場合の作業など、プログレッシブ Web アプリ (PWA) にとって重要なコードを示します。

プログレッシブ Web アプリ (PWA) をネイティブアプリのように感じさせる PWA には、追加のベストプラクティスがあります。

ファイルを処理するなどして、アプリをオペレーティングシステムに統合します。
非トリガーコンピューティングタスクを実行します。
アプリをアプリストアにアップロードします。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-11-08

次の方法で共有

PWA の開発を開始する

プログレッシブ Web アプリのアーキテクチャ

運用 Web サーバーへの PWA のデプロイ

Web サーバー ホストの例

localhost (http) と運用サーバー (https) について

フロントエンド コード ファイル (UI コード)

バックエンド コード、ファイル、エンドポイント、データ (サーバー側コード)

Web アプリ マニフェスト (manifest.json)

アプリのファイルをローカル デバイスにキャッシュするサービス ワーカー (sw.js)

install イベントのリッスン

fetch イベントのリッスン

サービス ワーカーは省略可能です