温度コンバーターのソース ファイル

温度コンバーター プログレッシブ Web アプリ (PWA) サンプルのソース ファイル。

関連項目:

• /temperature-converter/ - ソース コード ディレクトリ。

ソース コード ファイルの概要

サンプルのプログレッシブ Web アプリ (PWA) は、 /Demos/temperature-converter/ ソース コード ディレクトリ内の以下のファイルで構成されています。

各ファイルの詳細は以下のとおりです。

アプリの最初の Web ページ (index.html)

index.html ユーザーがプログレッシブ Web アプリ (PWA) にアクセスしたときに表示される最初のページを定義します。

index.html は、ユーザー インターフェイスに表示されるテキスト、画像、テキスト フィールド、ボタンなど、プログレッシブ Web アプリ (PWA) の Web ページのコンテンツを定義します。

<!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="icon" type="image/png" href="./icon512.png">
    <link rel="stylesheet" href="./converter.css">
    <link rel="manifest" href="./manifest.json">
    <title>Temperature converter</title>
  </head>
  <body>
    <form id="converter">
       ...
    </form>
    <script src="./converter.js"></script>
    <script>
      if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./sw.js', { scope: './' });
      }
    </script>
  </body>
</html>

index.html が CSS ファイルを参照する方法

index.html <head> タグ内のコード行を使用してconverter.css CSS ファイルを参照します。

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" type="image/png" href="./icon512.png">
  <link rel="stylesheet" href="./converter.css">
  <link rel="manifest" href="./manifest.json">
  <title>Temperature converter</title>
</head>

JavaScript ファイルの読み込み方法 index.html

index.html では、終了 </form> タグの後に、<script>要素がconverter.js読み込まれます。

  <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
</form>
<script src="./converter.js"></script>

逆に、 converter.js は次の行でフォームの id: converter を参照します。

const form = document.getElementById('converter');

index.html がマニフェストを参照する方法

<head> タグ内では、<link>要素がmanifest.jsonを参照します。

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" type="image/png" href="./icon512.png">
  <link rel="stylesheet" href="./converter.css">
  <link rel="manifest" href="./manifest.json">
  <title>Temperature converter</title>
</head>

この <link rel="manifest" href="./manifest.json"> 要素は、Web アプリのマニフェスト ファイルをアプリにリンクし、Web アプリをプログレッシブ Web アプリ (PWA) にします。

ファイル名の manifest.json は単なる一般的な規則であり、厳密な要件ではありません。 たとえば、マニフェスト ファイル名を abcd.json に変更し、 index.html の行を次のように変更できます。

<link rel="manifest" href="./abcd.json">

index.html がサービス ワーカーを参照する方法

<body> タグの末尾にある <script> 要素内で、サービス ワーカー ファイル sw.jsは、navigator.serviceWorker.register() を呼び出すことによって登録されます。

    <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
  </form>
  <script src="./converter.js"></script>
  <script>
    if('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./sw.js', { scope: './' });
    }
  </script>
</body>

CSS スタイル シート ファイル (converter.css)

converter.css では、カスケード スタイル シート (CSS) ルールを使用して HTML コンテンツをレイアウトに整理し、要素にスタイルを提供することにより、プログレッシブ Web アプリ (PWA) の Web ページのスタイルを定義します。

Web アプリには、視覚的に魅力的なアプリを作成するために CSS スタイルのルールがあります。

CSS ファイルは、次のコードを含めてサンプルのディレクトリ (/Demos/temperature-converter/) に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 {
  ...
}

#converter input, #converter select {
  ...
}

#converter #output-temp {
  ...
}

JavaScript アプリ ロジック ファイル (converter.js)

温度コンバーターを動作させるために、サンプルでは converter.js の JavaScript コードを使用します。 converter.js には、プログレッシブ Web アプリ (PWA) のアプリ ロジックが含まれています。 JavaScript コードは、ユーザー操作をユーザー インターフェイスに追加します。

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') {
    ...
    return value;
  }
  throw new Error('Invalid unit');
}

form.addEventListener('input', () => {
  const inputTemp = parseFloat(inputField.value);
  ...
  outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
});

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

manifest.json は、デバイスのオペレーティング システムが使用するプログレッシブ Web アプリ (PWA) に関する基本的な情報を提供します。 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"
      }
  ]
}

関連項目:

• 「PWA の開発を開始する」の Web アプリ マニフェスト (manifest.json)。

アプリを表すイメージ ファイル (icon512.png)

icon512.png は 512x512 ピクセルのアプリ アイコン画像です。 このイメージ ファイルは、Windows タスク バーや Windows スタート メニューなどでプログレッシブ Web アプリ (PWA) を表します。

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

sw.js は、プログレッシブ Web アプリ (PWA) の一部であるキャッシュ ファイルを管理し、ファイルをローカル ドライブにキャッシュし、インターネット接続がないときに提供するサービス ワーカーです。

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 つのファイルを明示的にキャッシュに追加します (.html、 .css、 .js)。 アイコン (.png) とマニフェスト (.json) はブラウザーによって自動的にキャッシュされます。

関連項目:

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

ソース ファイルのディレクトリを説明する Readme ファイル (README.md)

README.md には、プログレッシブ Web アプリ (PWA) に関する簡単な情報が含まれています。

• アプリの Web ページを開くためのリンク。
• 温度コンバーターのサンプル記事へのリンク。

プログレッシブ Web アプリ (PWA) のソース コードのメイン ディレクトリには、Readme ファイルを含めることができます。 アプリのエンド ユーザーには、ソース コード ディレクトリや Readme ファイルは表示されません。

関連項目

• 「PWA の開発を開始する」の Web アプリ マニフェスト (manifest.json)。
• PWA の開発を開始するでアプリのファイルをローカル デバイス (sw.js) にキャッシュするサービス ワーカー。
• 温度コンバーターのサンプル 記事。

ソースコード:

• /temperature-converter/
  • index.html
  • converter.css
  • converter.js
  • manifest.json
  • icon512.png
  • sw.js
  • README.md