Progressive Web Apps の使用を開始する

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

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

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

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

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

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

前提条件

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

PWA のアーキテクチャ

プログレッシブ Web Appsは、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
```
Node.js ライブラリを使用してサーバーを http-server 起動します。
```
npx http-server
```

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

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

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

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

デバッグ目的で、Microsoft Edge では、Web サーバーが localhost 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 ファイルです。

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

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貼り付け、HTML タグを<h1>置き換えます。

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

アプリは便利な機能を実行しますが、サービスワーカーがないため、まだインストールできません。サービスワーカーを作成して、次の手順でアプリをインストールできるようにします。

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

サービスワーカーは、ネットワーク条件に関係なく、PWA をより迅速かつ独立させるのに役立つ重要なテクノロジです。

サービスワーカーは、PWA からのネットワーク要求を傍受し、以前はネイティブアプリに制限されていたシナリオを有効にする特殊な Web Worker です。

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

Microsoft Edge がアプリをインストールできるようにするには、アプリにサービスワーカーファイルが必要です。

サービスワーカーは、アプリによって読み込まれる 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 が開きます。
アプリケーション ツールを開き、[Service Worker] を開きます。サービスワーカーが表示されない場合は、ページを更新します。
[ キャッシュストレージ ] を展開し、[ 温度コンバーター-v1] を選択して、サービスワーカーキャッシュを表示します。サービスワーカーによってキャッシュされたすべてのリソースが表示されます。サービスワーカーによってキャッシュされるリソースには、アプリアイコン、アプリマニフェスト、および初期ページが含まれます。
オフラインアプリとして PWA を試してください。 DevTools で ネットワーク ツールを開き、[調整] の値を[オフライン] に変更します。
アプリを更新します。サービスワーカーによって提供されるキャッシュされたリソースを使用して、ブラウザーに正しく表示されます。

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

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

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

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

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

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

次のステップ

ここまで構築したシンプルな温度変換器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 - サービスワーカーを追加する