溫度轉換器來源檔案

溫度轉換器的來源檔案 漸進式 Web 應用程式 (PWA) 範例。

另請參閱:

• /temperature-converter/ - 原始程式碼目錄。

原始程式碼檔案概觀

Progressive Web App (PWA) 範例包含下列檔案 /Demos/temperature-converter/ ，位於原始程式碼目錄中：

以下是每個檔案的詳細資料。

應用程式的初始網頁 (index.html)

index.html 定義使用者存取漸進式 Web 應用程式 (PWA) 時所看到的第一頁。

index.html 會定義漸進式 Web 應用程式 (PWA) 的網頁內容，包括出現在使用者介面中的文字、影像、文字欄位和按鈕。

<!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>

index.html 如何載入 JavaScript 檔案

在 ，index.html在結束</form>標籤之後，會converter.js載入一個<script>元素：

  <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 應用程式具有 CSS 樣式規則，以使應用程式具有視覺吸引力。

CSS 檔案位於 converter.css 範例的目錄 (/Demos/temperature-converter/) ，包括下列程式碼：

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)

為了讓溫度轉換器運作，範例在 中使用 JavaScript 程式碼。converter.js 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"
      }
  ]
}

另請參閱:

• Web 應用程式資訊清單 (manifest.json 在 開始開發 PWA 中的) 。

代表應用程式 (icon512.png) 的影像檔案

icon512.png 是 512x512 像素的應用程式圖示影像。 此影像檔代表漸進式 Web 應用程式 (PWA) ，例如在 Windows 工作列和 Windows [開始] 功能表中：

在) (sw.js 上快取應用程式檔案的服務工作者

sw.js 是一個服務工作者，可管理屬於 Progressive Web App (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
        }
    }
  })());
});

Service Worker 會將三個檔案新增至快取，明確 (.html、 .css及 .js) 。 瀏覽器會自動快取 (.png) 圖示和資訊清單 (.json) 。

另請參閱:

• 要在本機裝置上快取應用程式檔案的服務工作者， () sw.js 在 PWA 開始開發。

說明來源檔案目錄的讀我檔案 (README.md)

README.md 包含有關漸進式 Web 應用程式 (PWA) 的簡要資訊：

• 開啟應用程式網頁的連結。
• 溫度轉換器範例文章的連結。

漸進式 Web 應用程式的主要目錄 (PWA) 的原始程式碼可以包含讀我檔案。 應用程式的使用者不會看到原始程式碼目錄或讀我檔案。

另請參閱

• Web 應用程式資訊清單 (manifest.json 在 開始開發 PWA 中的) 。
• 要在本機裝置上快取應用程式檔案的服務工作者， () sw.js 在 PWA 開始開發。
• 溫度轉換器範例 文章。

原始程式碼：

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