Progressive Web Apps の使用を開始する

[アーティクル]
03/29/2023

プログレッシブ Web アプリ (PWA) は、Web テクノロジを使用して構築するアプリケーションであり、1 つのコードベースからすべてのデバイスにインストールして実行できます。

PWA の概要とその利点の詳細については、「プログレッシブ Web アプリ (PWA) の概要」を参照してください。

このガイドは、PWA の構築を学びたい Web 開発者を対象としています。 PWA のインストールと実行の詳細については、「Microsoft Edge でプログレッシブ Web アプリを使用する」の「PWA のインストール」を参照してください。

このガイドでは、まず PWA のしくみを学習してから、温度コンバーターアプリとなる初めての単純な PWA を作成してから、優れた PWA を作成する方法の詳細を学習します。

ビルドするアプリの最終的なソースコードについては、このガイドの「PWA 入門デモアプリリポジトリ」を参照してください。

前提条件

Visual Studio Code をインストールして、PWA ソースコードを編集します。
Node.js をインストールして、ローカル Web サーバーとして使用します。
HTML、CSS、JavaScript に関する実用的な知識もプラスです。

PWA のアーキテクチャ

プログレッシブ Web アプリは、Web のプログラミング言語 (HTML、CSS、JavaScript) を使用して記述され、Web サーバーを使用してユーザーに配布されます。

ユーザーがアプリを使用できるようにするには、HTTPS 経由でアクセスできる Web サーバーにアプリをデプロイします。サーバーには次のものが含まれています。

バックエンドコード: サーバー上のデータベースに格納される可能性がある動的コンテンツを取得するために、アプリがインターネットに接続するときに必要なエンドポイント。
フロントエンドコード: HTML、CSS、JavaScript コードなど、アプリをユーザーのデバイスにインストールするために必要なリソース。

バックエンドコードでは、ASP.NET、Java、Node.js、PHP など、任意のサーバー側言語を使用できます。ただし、ビルドしているアプリによっては、サーバー側エンドポイントも必要ない場合があることに注意してください。このチュートリアルで作成した PWA には、インストールされているデバイスでのみアプリが実行され、サーバー側のデータは必要ないため、サーバー側のコードはありません。

フロントエンドコードでは、HTML、CSS、JavaScript、および JSON マニフェストのみが使用されます。

HTML を使用して、ユーザーインターフェイスに表示されるテキスト、画像、テキストフィールド、ボタンなど、アプリ内のコンテンツを記述します。その後、CSS を使用して、レイアウト内の HTML コンテンツを整理し、要素にスタイルを提供します。 JavaScript を使用して、ユーザーインターフェイスにユーザー操作を追加します。最後に、アプリケーションをホストオペレーティングシステムに記述する JSON マニフェストファイルを使用します。

フロントエンドコードはデバイスの Web ブラウザーを使用して実行されますが、アプリがスタンドアロンウィンドウで実行することを選択できるため、ブラウザーのユーザーインターフェイスが表示されない可能性があります。

また、ユーザーインターフェイスコードに加えて、JavaScript を使用して、サービスワーカーファイルを使用して、アプリケーションをより高速で信頼性の高いネットワークに依存させることもできます。最後に、フロントエンドコードには、ホストオペレーティングシステムへのアプリケーションを記述する JSON マニフェストファイルも含まれています。

次の図は、PWA のアーキテクチャの概要を示しています。 Web サーバーは PWA の一方の側にあり、デバイスはもう一方の側にあります。デバイスには、HTML、CSS、JavaScript、サービスワーカー、マニフェストなどのフロントエンドコードが含まれています。

PWA のアーキテクチャ図

手順 1 - Web サーバーを起動する

PWA は、Web サーバーを使用してユーザーに配布されます。アプリの準備ができたら、Web ホスティングプロバイダーを使用して Web にデプロイします。その後、新しいバージョンを Web サーバーに再びデプロイするだけで、アプリを更新できます。

PWA の開発を開始するには、代わりにローカル Web サーバーを使用します。ローカルサーバーを起動するには:

Web サーバーを実行するコンピューターに新しいフォルダーを作成します。

これを行うには、コマンドプロンプトを開き、次のように入力します。
```
cd path/to/your/dev/folder
mkdir MySamplePWA
cd MySamplePWA
```
http-server Node.js ライブラリを使用してサーバーを起動します。
```
npx http-server
```

これで、 http://localhost:8080で実行されている単純なローカル Web サーバーが作成されました。

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

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

また、HTTPS をサポートする GitHub Pages で Web サイトをホストすることもできます。

デバッグ目的で、Microsoft Edge では、 localhost Web サーバーが HTTPS を使用せずに PWA API を使用することも許可します。

手順 2 - アプリのスタートページを作成する

現時点では、Web サーバーで使用できるコンテンツはありません。まず、ユーザーが温度コンバーターアプリにアクセスしたときに表示される最初のページを作成します。

Visual Studio Code を開き、[ファイル] >[フォルダーを開く] を選択し、前の手順で作成したMySamplePWA ディレクトリを選択します。

Ctrl + N キーを押してプロジェクトに新しいファイルを作成し、次の内容を追加し、ファイルをindex.htmlとして保存します。

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" />
    <title>Temperature converter</title>
  </head>
  <body>
    <h1>Temperature converter</h1>
  </body>
</html>

http://localhost:8080に移動してアプリを表示します。

アプリは今のところブラウザーで実行され、インストールできません。アプリをインストールできるようにするには、アプリに Web アプリマニフェストが必要です。

手順 3 - Web アプリマニフェストを作成する

Web アプリマニフェストは、アプリに関するメタデータ (名前、説明、アイコン、使用するさまざまなオペレーティングシステム機能など) を含む JSON ファイルです。詳細については、「 Web アプリマニフェストを使用して PWA を OS に統合する」を参照してください。

アプリマニフェストをアプリに追加するには:

Visual Studio Code で Ctrl + N キー を押して、次のコンテンツを含む新しいファイルを作成し、ファイルを 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"
        }
    ]
}

icon512.pngという名前の 512 x 512 ピクセルのアプリアイコンイメージをプロジェクトに追加します。サンプルイメージは、テスト目的で使用できます。
Visual Studio Code で、 index.htmlを開き、 <head> タグ内に次のコードを追加します。
```
<link rel="manifest" href="/manifest.json">
```

上記のコードスニペットは、新しい Web アプリマニフェストファイルを Web サイトにリンクします。

VS Code プロジェクトは、次のようになります。

index.html、manifest.json、アイコンファイルを含むサンプル PWA プロジェクトを示す VS Code のスクリーンショット

手順 4 - アプリのユーザーインターフェイスの構築を続行する

アプリに Web アプリマニフェストファイルとスタートページが用意されたので、アプリの主な機能を構築します。

チュートリアルのこの手順では、温度単位変換アプリを作成します。

メインのユーザーインターフェイスコンテンツを作成するには、次の HTML コードをコピーし、 index.html ファイルに貼り付け、 <h1> HTML タグを置き換えます。

<form id="converter">
  <label for="input-temp">temperature</label>
  <input type="text" id="input-temp" name="input-temp" value="20" />
  <label for="input-unit">from</label>
  <select id="input-unit" name="input-unit">
    <option value="c" selected>Celsius</option>
    <option value="f">Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <label for="output-unit">to</label>
  <select id="output-unit" name="output-unit">
    <option value="c">Celsius</option>
    <option value="f" selected>Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
</form>

上記の HTML コードには、アプリが 1 つのユニットから別のユニットに温度値を変換するために使用する複数の入力要素を含むフォームが含まれています。

コンバーターを動作させるには、JavaScript コードを使用します。プロジェクトに converter.js という名前の新しいファイルを作成し、次のコードを追加します。

const inputField = document.getElementById('input-temp');
const fromUnitField = document.getElementById('input-unit');
const toUnitField = document.getElementById('output-unit');
const outputField = document.getElementById('output-temp');
const form = document.getElementById('converter');

function convertTemp(value, fromUnit, toUnit) {
  if (fromUnit === 'c') {
    if (toUnit === 'f') {
      return value * 9 / 5 + 32;
    } else if (toUnit === 'k') {
      return value + 273.15;
    }
    return value;
  }
  if (fromUnit === 'f') {
    if (toUnit === 'c') {
      return (value - 32) * 5 / 9;
    } else if (toUnit === 'k') {
      return (value + 459.67) * 5 / 9;
    }
    return value;
  }
  if (fromUnit === 'k') {
    if (toUnit === 'c') {
      return value - 273.15;
    } else if (toUnit === 'f') {
      return value * 9 / 5 - 459.67;
    }
    return value;
  }
  throw new Error('Invalid unit');
}

form.addEventListener('input', () => {
  const inputTemp = parseFloat(inputField.value);
  const fromUnit = fromUnitField.value;
  const toUnit = toUnitField.value;

  const outputTemp = convertTemp(inputTemp, fromUnit, toUnit);
  outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
});

index.html ファイルをもう一度開き、閉じる</form> タグの後に次のコードを追加して、JavaScript ファイルを読み込みます。
```
<script src="converter.js"></script>
```

次に、いくつかの CSS スタイルをアプリに追加して、視覚的に魅力的にします。プロジェクトに converter.css という名前の新しいファイルを作成し、次のコードを追加します。

html {
  background: rgb(243, 243, 243);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 15pt;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
}

#converter {
  width: 15rem;
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0 0 2rem 0 #0001;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#converter input, #converter select {
  font-family: inherit;
  font-size: inherit;
  margin-block-end: 1rem;
  text-align: center;
  width: 10rem;
}

#converter #output-temp {
  font-size: 2rem;
  font-weight: bold;
}

index.htmlをもう一度開き、<head> タグ内に次のコードを追加して、その中の新しい CSS ファイルを参照します。
```
<link rel="stylesheet" href="converter.css">
```
Visual Studio Code プロジェクトは次のようになります。
http://localhost:8080に移動してアプリを表示します。

アプリは便利な機能を今すぐ実行し、ユーザーがスタンドアロンアプリとしてインストールできます。アプリをインストールする前に、サービスワーカーを作成してアプリをオフラインで動作させます。

手順 5 - サービスワーカーを追加する

サービスワーカーは、PWA をネットワーク状態から高速かつ独立させるのに役立つ重要なテクノロジです。

サービスワーカーは、PWA からのネットワーク要求を傍受できる特殊な Web ワーカーであり、次のようなシナリオを可能にします。

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

PWA には、アプリをインストールするために Microsoft Edge 用のサービスワーカーが必要ありません。ただし、サービスワーカーを PWA に追加して、PWA をより高速にし、デバイスに断続的なネットワーク接続がある場合やオフラインになっている場合など、PWA の信頼性を高める方法をお勧めします。

サービスワーカーは、アプリによって読み込まれる JavaScript ファイルで定義されます。サービスワーカーをプロジェクトに追加するには:

Visual Studio Code で、新しいファイル (Ctrl + N) を作成し、次の内容を追加し、ファイルを 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.
        }
    }
  })());
});
```
sw.js ファイルは、PWA のサービスワーカーとして機能します。上記のコードは、ユーザーがアプリをインストールしたときにトリガーされる install イベントをリッスンし、それを使用して、初期 HTML ページ、コンバーター JavaScript ファイル、コンバーター CSS ファイルなど、アプリがオフラインで機能するために必要なリソースをキャッシュします。

また、このコードでは、アプリがサーバーに要求を送信するたびに発生する fetch イベントをインターセプトし、キャッシュ優先戦略を適用します。サービスワーカーはキャッシュされたリソースを返してアプリをオフラインで動作させ、失敗した場合はサーバーからのダウンロードを試みます。
index.htmlを開き、<body> タグの末尾に次のコードを追加して、サービスワーカーを登録します。
```
<script>
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
</script>
```

サービスワーカーが実行されていることを確認するには:

Microsoft Edge で、[ http://localhost:8080] に移動します。
DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。
アプリケーション ツールを開き、[サービスワーカー] をクリックします。サービスワーカーが表示されない場合は、ページを更新します。
[ キャッシュストレージ ] を展開し、[ 温度コンバーター-v1] を選択して、サービスワーカーキャッシュを表示します。サービスワーカーによってキャッシュされたすべてのリソースが表示されます。サービスワーカーによってキャッシュされるリソースには、アプリアイコン、アプリマニフェスト、および初期ページが含まれます。
オフラインアプリとして PWA を試してください。 DevTools で ネットワーク ツールを開き、[調整] の値を[オフライン] に変更します。
アプリを更新します。サービスワーカーによって提供されるキャッシュされたリソースを使用して、ブラウザーに正しく表示されます。

手順 6 - アプリをインストールする

アプリに Web アプリマニフェストが用意されたので、サポートブラウザーはアプリを PWA としてインストールできます。

Microsoft Edge では、アプリを更新すると、アドレスバーに [ 使用可能なアプリ ] ボタンが表示されます。 [ 使用可能なアプリ ] ボタンをクリックすると、アプリをローカルにインストールするように求められます。

[ インストール ] をクリックして、アプリをローカルにインストールします。インストールが完了すると、アプリは独自のウィンドウに表示され、タスクバーには独自のアプリケーションアイコンが表示されます。

独自のウィンドウにインストールされ、実行されているサンプル PWA

PWA のインストールの詳細については、「 Microsoft Edge でプログレッシブ Web アプリを使用する」を参照してください。

次のステップ

これまでに構築した温度コンバータ PWA は、PWA でできることのほんの一部です。前の手順は、すべての PWA の重要な前提条件ですが、インストール時に PWA を実際のアプリのように感じさせる重要なベストプラクティスがあります。

ユーザーがアプリケーションをインストールすると、これらのアプリケーションで何ができるかについて一定の期待を持つ。例えば：

ユーザーは、アプリがオフラインで動作することを期待しています。
ユーザーは、ファイルを処理するなどして、アプリがオペレーティングシステム内に統合することを期待しています。
ユーザーは、アプリが自明でないコンピューティングタスクを実行することを期待しています。
ユーザーは、アプリストアでアプリを見つけることを期待しています。

優れた PWA を構築するには、「 PWA のベストプラクティス」を参照してください。

次の方法で共有

Progressive Web Apps の使用を開始する

前提条件

PWA のアーキテクチャ

手順 1 - Web サーバーを起動する

手順 2 - アプリのスタートページを作成する

手順 3 - Web アプリマニフェストを作成する

手順 4 - アプリのユーザーインターフェイスの構築を続行する

手順 5 - サービスワーカーを追加する

手順 6 - アプリをインストールする

次のステップ

関連項目

フィードバック

その他のリソース

次の方法で共有

Progressive Web Apps の使用を開始する

前提条件

PWA のアーキテクチャ

手順 1 - Web サーバーを起動する

手順 2 - アプリのスタート ページを作成する

手順 3 - Web アプリ マニフェストを作成する

手順 4 - アプリのユーザー インターフェイスの構築を続行する

手順 5 - サービス ワーカーを追加する

手順 6 - アプリをインストールする

次のステップ

関連項目

フィードバック

その他のリソース

手順 2 - アプリのスタートページを作成する

手順 3 - Web アプリマニフェストを作成する

手順 4 - アプリのユーザーインターフェイスの構築を続行する

手順 5 - サービスワーカーを追加する