次の方法で共有


Progressive Web Apps の使用を開始する

プログレッシブ 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 サーバーを使用します。 ローカル サーバーを起動するには:

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

    これを行うには、コマンド プロンプトを開き、次のように入力します。

    cd path/to/your/dev/folder
    mkdir MySamplePWA
    cd MySamplePWA
    
  2. 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 サーバーで使用できるコンテンツはありません。 まず、ユーザーが温度コンバーター アプリにアクセスしたときに表示される最初のページを作成します。

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

  2. 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>
    
  3. に移動して http://localhost:8080 アプリを表示します。

    localhost で新しい PWA を実行する

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

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

Web アプリ マニフェストは、アプリに関するメタデータ (名前、説明、アイコン、使用するさまざまなオペレーティング システム機能など) を含む JSON ファイルです。

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

  1. 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"
            }
        ]
    }
    
  2. プロジェクトにという名前 icon512.png の 512 x 512 ピクセル のアプリ アイコン イメージを追加します。 サンプル イメージは、テスト目的で使用できます。

  3. 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 アプリ マニフェスト ファイルとスタート ページが用意されたので、メインアプリ機能を構築します。

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

  1. メイン ユーザー インターフェイスコンテンツを作成するには、次の 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 つのユニットから別のユニットに温度値を変換するために使用する複数の入力要素を含むフォームが含まれています。

  2. コンバーターを動作させるには、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();
    });
    
  3. ファイルをもう index.html 一度開き、終了 </form> タグの後に次のコードを追加して、JavaScript ファイルを読み込みます。

    <script src="converter.js"></script>
    
  4. 次に、いくつかの 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;
    }
    
  5. もう一度開 index.html き、タグ内に次のコードを追加して、新しい CSS ファイルを <head> 参照します。

    <link rel="stylesheet" href="converter.css">
    

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

    index.html、converter.js、converter.css、manifest.json ファイルを含む Visual Studio Code のサンプル PWA プロジェクト

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

    localhost でフロントエンド コードを使用して新しい PWA を実行する

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

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

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

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

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

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

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

  1. 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 し、キャッシュ優先戦略を適用します。 サービス ワーカーはキャッシュされたリソースを返してアプリをオフラインで動作させ、失敗した場合はサーバーからのダウンロードを試みます。

  2. タグの最後に次のコードを開 index.html いて追加して、 <body> サービス ワーカーを登録します。

    <script>
    if('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js', { scope: '/' });
    }
    </script>
    

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

  1. Microsoft Edge で、 に移動します http://localhost:8080

  2. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  3. アプリケーション ツールを開き、[Service Worker] を開きます。 サービス ワーカーが表示されない場合は、ページを更新します。

    DevTools アプリケーション ツール。Service Worker パネルが表示され、新しいsw.js worker が実行されている

  4. [ キャッシュ ストレージ ] を展開し、[ 温度コンバーター-v1] を選択して、サービス ワーカー キャッシュを表示します。 サービス ワーカーによってキャッシュされたすべてのリソースが表示されます。 サービス ワーカーによってキャッシュされるリソースには、アプリ アイコン、アプリ マニフェスト、および初期ページが含まれます。

    DevTools:キャッシュされたリソースを表示する場所を示します

  5. オフライン アプリとして PWA を試してください。 DevTools で ネットワーク ツールを開き、[調整] の値 [オフライン] に変更します。

  6. アプリを更新します。 サービス ワーカーによって提供されるキャッシュされたリソースを使用して、ブラウザーに正しく表示されます。

    調整の値をオフラインに切り替える場所を示す DevTools

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

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

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

Microsoft Edge。サンプルの PWA がタブに含まれています。アドレス バーの [利用可能なアプリ] ボタンがクリックされ、インストール プロンプトが表示されます

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

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

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

次のステップ

ここまで構築したシンプルな温度変換器PWAは、PWAができることの表面を傷付けするだけです。 前の手順は、すべての PWA の重要な前提条件ですが、インストール時に PWA を実際のアプリのように感じさせる重要なベスト プラクティスがあります。

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

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

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

関連項目