溫度轉換器範例是一個漸進式網頁應用程式 (PWA) ，示範如何建立 PWA 的基本操作。 你可以修改這個範例，開始建立你自己的 PWA。
本文將介紹如何取得樣本、安裝到 Windows 上、執行樣本以及修改。 此範例適用於多種作業系統，包括 Windows。 本文提供 Windows 的步驟;其他月台也有類似的步驟。
另請參閱:
步驟 1：在瀏覽器視窗中預覽執行的應用程式
檢視應用程式的使用者介面：
在 Microsoft Edge 中，請進入新視窗或分頁的即時 溫度轉換 器範例網頁應用程式， (設於 github.io) ：
PWA) 範例 Progressive Web App (最初在瀏覽器中顯示為網頁應用程式，但地址列中也有應用程式 可用
) (按鈕) 尚未點擊。在 溫度 文字框輸入 22。
顯示溫度變化為 71.6華氏度。
點選 「from 」下拉選單，然後點選「外部」。
點選 to 下拉選單，然後點選外面。
可用單位包括：
- 攝氏
- 華氏
- 凱爾文
關閉應用程式的瀏覽器分頁。
在後續步驟中，當範例 Progressive Web App (PWA) 安裝為本地應用程式後，應用程式會獨立於視窗中執行：
範例是一個漸進式網頁應用程式，而非一般網站。 因此，你可以在裝置上安裝 Progressive Web App (PWA) ，應用程式視窗中包含與完整瀏覽器相同的應用程式介面。
安裝的應用程式視窗是基於瀏覽器的視窗，缺少大部分瀏覽器介面。 安裝的應用程式整合於裝置介面中，如 Windows 工作列和開始選單。
上述範例應用程式的實例托管於 github.io。 在以下章節中，你將使用本地伺服器，示範如何在開發過程中本地測試漸進式網頁應用程式 (PWA) 。 你會從本地伺服器) (localhost 存取網頁應用程式，然後從那裡安裝到你的裝置上。
步驟 2：安裝 Visual Studio Code
Visual Studio Code 可以查看範例程式碼、修改範例，並以範例為起點，建立您自己的漸進式網頁應用程式 (PWA) 。
安裝 (或選擇性地更新) VS Code，具體如下：
按下 Windows 鍵，輸入 Visual Studio Code，然後點擊開啟。
如果還沒安裝 Visual Studio Code，請進入 Visual Studio Code 下載並安裝。
步驟 3：安裝 git
安裝或更新 git，步驟如下：
開啟 Visual Studio Code。
在 檢視 選單中，選擇 終端機。
輸入指令：
git -v若安裝了 git，會顯示版本號，例如
git version 2.51.0.windows.2。-
在右上角標註 最新版本 號，例如 2.51.1。
如果 git 還沒安裝，或你想更新，請從 Downloads at git-scm.com 下載並安裝最新版本的 git。 否則，請跳到下方下一節。
安裝時，你可以接受預設值，但建議將預設編輯器從 vim 改成 Visual Studio Code：
步驟四：安裝 Node.js
Node.js 包含一個網頁伺服器，你可以用來在本地執行和測試樣本。
安裝或更新 Node.js，請依照以下方式進行：
開啟 Visual Studio Code。
在 檢視 選單中，選擇 終端機。
輸入指令：
node -v若已安裝 Node.js，則會輸出版本號，例如 v22.19.0。
去 Node.js。
在左下角的 「最新 LTS 」按鈕中，請注意版本號，例如 v22.20.0。
如果 Node.js 還沒安裝，或你想更新，請點擊 「取得 Node.js 」按鈕。 否則，請跳到下方下一節。
你會看到像 Download Node.js這樣的頁面。
點擊 Windows 安裝程式 (.msi) 按鈕。
Microsoft Edge 的 下載 視窗會打開，並顯示一個檔案名稱，例如
node-v22.20.0-x64.msi。點擊檔案名稱下方的 開啟檔案 連結。
Node.js 設定精靈視窗會打開。
點擊 「下一個 」按鈕，並依照提示操作。 你可以接受預設值，然後點 選安裝 按鈕。
Node.js 設定精靈視窗關閉。
在 VS Code 的終端機中，輸入以下指令：
node -v會顯示最新版本號，例如 v22.20.0。
步驟 5：分叉並克隆「MicrosoftEdge / Demos」倉庫
接著，你會透過分支 Microsoft Edge / Demos 倉庫，獲得範例程式碼的本地副本。 因為你沒有權限直接將提交推送到 Demos 開源倉庫， 你會分支 Demos 倉庫，建立自己的備份庫，而不是 複製 Demos 倉庫。
你或許可以下載 Demos 倉庫的「主」分支，然後在「主」分支編輯檔案，而不是分支並複製倉庫，然後建立一個工作分支 (test1) 來編輯檔案。 本文展示了更複雜但彈性的方式：分叉儲存庫。
分支並克隆 MicrosoftEdge / Demos 倉庫，方法如下：
按下 Windows+E。
檔案總管開啟。
請檢查 Demos 倉庫是否被複製：
請導覽到你想要複製倉庫的位置，例如：
C:\Users\localAccount\GitHub\如果倉庫尚未被複製，例如
C:\Users\localAccount\GitHub\Demos\，請執行以下步驟;否則，跳到下一區。分叉倉庫：
在新視窗或分頁開啟 MicrosoftEdge / Demos 倉庫。
在右上角，點擊 Fork 按鈕的下箭頭，然後選擇 建立新 fork。
欲了解更多資訊，請參閱 GitHub 文件中 fork a repository 的 Forking a repository。
點擊 「建立分叉 」按鈕。
將你的分支複製到本地硬碟：
在 GitHub 上，前往你所分叉的 MicrosoftEdge / Demos 倉庫。
在檔案列表上方，點擊 「程式碼 」按鈕。
在 HTTPS 標籤中，點選 「複製到剪貼簿 」 (「
) 按鈕。開啟 Visual Studio Code。
在 檢視 選單中，選擇 終端機。
將 Demos 倉庫的目錄變更為：
cd ~/GitHub或者輸入以下指令，指定你的本地帳號：
cd c:/users/localAccount/GitHub/輸入
git clone，然後貼上你之前複製的網址。 它會是這樣，換成你的 GitHub 用戶名，而不是 YOUR-USERNAME：git clone https://github.com/YOUR-USERNAME/Demos.git按 Enter。
你會建立一個分支 Demos 倉庫的本地克隆。
另請參閱:
步驟 6：在本地網頁伺服器上執行 PWA 作為網頁應用程式
接著，你將在本地伺服器（Microsoft Edge）上執行並測試範例的 Progressive Web App (PWA) 。 你會使用 http-server，一個可以在 Node.js 上執行的本地開發網頁伺服器。
在開發或測試網站或應用程式（包括 PWA）時，您可以使用本地網頁伺服器。 然而，當應用程式準備好供用戶使用時，你就會透過網頁主機供應商將應用程式部署到網路上。 像一般的網站或應用程式一樣，PWA 透過網頁伺服器分發給使用者。
切換到 /temperature-converter/ 複製的 Demos 倉庫目錄，然後從那裡開始， http-server 步驟如下：
開啟 Visual Studio Code。
在 檔案 選單中，選擇 開啟資料夾。
開啟 資料夾 對話框。
前往複製的 Demos 倉庫資料夾，例如
C:\Users\localAccount\GitHub\Demos\，選取其中的\temperature-converter\資料夾，然後點擊 「選擇資料夾 」按鈕。在 檢視 選單中，選擇 終端機。
終端 機窗 格開啟，提示符為
Demos\temperature-converter\，例如C:\users\localAccount\GitHub\Demos\temperature-converter。輸入下列命令：
npx http-server本地開發網頁伺服器啟動時使用
http-serverNPM套件：
如果你出現「執行腳本已停用」錯誤， (VS Code 的終端機正在使用 PowerShell) ，請輸入執行策略的 PowerShell 指令，然後再次發出 npx 指令：
Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser npx http-server範例輸出：
Need to install the following packages: http-server@14.1.1 Ok to proceed? (y)如果需要，按 Y 再 按 Enter 鍵。
輸出會顯示，例如：
Starting up http-server, serving ./ ... Available on: http://10.0.1.2:8080 http://127.0.0.1:8080 Hit CTRL-C to stop the server在 Microsoft Edge 中，從命令) 點到 http://localhost:8080 終端機
npx http-server輸出的 (或等效網址。溫度轉換器應用程式會顯示在瀏覽器中：
步驟 7：從你的 localhost 網頁伺服器安裝 PWA 作為本地應用程式
從你的 localhost 網頁伺服器安裝範例 Progressive Web App (PWA) ，作為 Windows 上的應用程式，方法如下：
在地址欄中，點擊 可用應用程式。安裝溫度轉換器 (
) 按鈕。會開啟一個 安裝應用程式 的對話框：
點擊 安裝 按鈕。
應用程式是本地安裝的。 應用程式 安裝 對話框會在應用程式內開啟：
點擊 允許 按鈕。
Windows 應用程式 的對話框會問：「你想將溫度轉換器釘選到你的工作列嗎？ 這個請求來自溫度轉換器。」
點擊 「是」 按鈕。
溫度轉換器應用程式的圖示 (
) 顯示在 Windows 工作列上。溫度轉換器應用程式顯示在自己的應用程式視窗中：
視窗是沒有大部分瀏覽器介面的瀏覽器視窗。
關閉 溫度轉換 器應用程式視窗。
步驟八：開啟已安裝的應用程式
在裝置上以本地應用程式方式執行範例 Progressive Web App (PWA) 。
按下 Windows 鍵，開始輸入 「溫度轉換器」，然後點擊 「開啟」。
安裝好的 溫度轉換 器應用程式會自動開啟。
因為你是從 安裝應用程式，
localhost當你啟動應用程式時，標題列右側會顯示 localhost：8080 幾秒鐘：
如果你是從
github.io伺服器安裝該應用程式，啟動應用程式時，標題列右側會顯示 microsoftedge.github.io 幾秒鐘：
你也可以用裝置支援的其他方式開啟已安裝的應用程式，例如溫度 轉換器 (Windows 工作列中釘選的
) 置頂在工作列上的按鈕。在 溫度 文字框中輸入 22。
顯示溫度更新為 71.6 華氏度。
點擊 「發送 者」和 「至」 下拉選單。
可用單位包括：
- 攝氏
- 華氏
- 凱爾文
步驟 9：檢視負責離線快取的服務人員
Progressive Web App (PWA) 的本地應用程式視窗是基於瀏覽器的視窗，因此 Microsoft Edge DevTools 可用於與 PWA 搭配使用。
當你以本地應用程式開啟 PWA 時，確認服務工作者 (sw.js) 正在執行，具體如下：
打開已安裝的 溫度轉換 器應用程式。
在應用程式視窗 (標題列下方右鍵點擊，) ，然後選擇 檢查。
DevTools 會以獨立視窗開啟;脫離停靠。 (其他對接選項會變暗且無法使用。) 應用程式視窗是一個包含 DevTools Inspect 指令的瀏覽器視窗。
在 DevTools 中，選擇 應用程式 (
) 工具。在左側的家徽樹中，在 應用程式 區塊中選擇 服務人員。
關於服務人員的資訊會顯示：
服務工作者的來源為
sw.js，狀態為啟用，正在執行中。在左側的 樹 狀結構中，在儲存大修區段，展開快 取儲存，然後選擇 temperature-converter-v1：
服務工作者快取會顯示出來。 所有由服務工作者快取或瀏覽器 () 自動快取的資源如下：
-
/(index.html) - 應用程式的 HTML 網頁，定義控制項的配置。 -
/converter.css- 應用程式網頁的樣式設計。 -
/converter.js- 包含應用程式邏輯的 JavaScript 檔案。 -
/icon512.png- 應用程式圖示影像檔，代表應用程式。 -
/manifest.json- 應用程式清單，包含應用程式的基本資訊，供裝置作業系統使用。
服務工作者會將三個檔案加入快取，分別是明確的 (
.html、和.css).js。 圖示 (.png) 與清單 (.json) 會被瀏覽器自動快取。-
步驟 10：使用 DevTools 關閉網路連線並離線測試 PWA
試試 Progressive Web App (PWA) 作為離線應用程式，如下：
在 DevTools 視窗中，開啟 Network (The
) 工具。在頂部附近，在「停用快取」勾選框右側的限速選單中，從「無限速」改為「離線」：
網路標籤會新增警告圖示提醒你這個限速。
在溫度轉換器視窗中，右鍵點擊後選擇 「重新整理」。
在 溫度 文字框輸入 22。
顯示溫度變化為 71.6華氏度。應用程式仍然正確顯示並正常運作，這是因為使用由服務工作者管理的本地快取資源。
在 DevTools 視窗中，在「停用快取」勾選框右側的限速選單中，將「離線」改回「無限速」。
網路 分頁 中的降速警告圖示已被移除。
關閉 DevTools 視窗。
關閉 溫度轉換 器應用程式視窗。
當應用程式以網頁版（而非安裝版）在 Microsoft Edge 中時，DevTools 的同樣使用方式同樣適用。 欲了解更多資訊，請參閱網路功能中的離線模擬參考。
步驟 11：卸載已安裝的應用程式
請依照以下方式卸載 Progressive Web App (PWA) ：
點擊 Windows 工作列釘頂的 溫度轉換 器按鈕。
已安裝的 溫度轉換 器應用程式會打開。
在標題欄，點選「設定」以及深
，然後點選「應用程式設定」。在 Microsoft Edge 中， Apps 分頁會開啟 (
edge://apps) ，顯示 Temperature 轉換 器應用程式的詳細資訊：
在底部點擊 「卸載 」按鈕。
在 所有同步裝置上移除 Microsoft Edge 應用程式？ 對話框會打開。
選擇 刪除應用程式歷史與資料 的勾選框，然後點擊 卸載 按鈕。
從 Windows 開始選單中卸載本地應用程式
注意：作為作業系統整合的範例，你可以透過 Windows 開始選單解除安裝該應用程式，方法如下：
按下 Windows 鍵。
開始輸入「溫度轉換器」。
點擊 卸載：
從 Microsoft Edge 開始卸載本地應用程式
注意：作為替代方案，你可以從 Microsoft Edge 開始卸載範例 Progressive Web App (PWA) ，如下：
在 Microsoft Edge 中，選擇 設定及更多 (......) >更多工具>應用程式>查看應用程式。
應用程式 對話框 會在 Microsoft Edge 中開啟，列出所有已安裝的 PWA：
右鍵點選 溫度轉換卡 ，然後點 選管理應用程式。
「 所有應用程式/溫度轉換器 」頁面會開啟，位置為
edge://apps。在底部點擊 「卸載 」按鈕。
請繼續以下步驟。
步驟12：修改樣本
你可以修改這個範例，作為你自己 Progressive Web App (PWA) 的起點。 你會在倉庫的工作分支裡把應用程式名稱從「Temperature converter」改成「TC」，然後在本地安裝修改過的應用程式。
建立一個工作分支並切換到它，步驟如下：
開啟 Visual Studio Code。
在 VS Code 裡打開資料夾
在 檔案 選單中，選擇 開啟資料夾。
開啟 資料夾 對話框。
前往複製的 Demos 倉庫資料夾，例如
C:\Users\localAccount\GitHub\Demos\，選擇裡面的temperature-converter資料夾，然後點擊 「選擇資料夾 」按鈕。在 Explorer 窗格中，打開
\temperature-converter\index.html。
在 Visual Studio Code 的左下角，會標示主分支。
建立一個工作分支並切換到
在 Visual Studio Code 的檢視選單中，選擇終端機。
按下 Ctrl+C。
localhost 網頁伺服器 (http-server) ，如果正在運行，就會停止運作。 提示會顯示目前的路徑，例如：
PS C:\Users\localAccount\GitHub\Demos\temperature-converter>不需要停止伺服器、修改程式碼並查看結果。 我們只是暫時在 終端 機中暫停伺服器，以便回到提示，輸入一些 git 指令。
輸入以下指令，建立倉庫的工作分支並切換到它：
git checkout -b test1如果該分支已經存在，指令輸出：「fatal：一個名為 'test1' 的分支已經存在」。
如果該分支已經存在，請輸入以下指令切換到該分支：
git checkout test1範例輸出：
Switched to a new branch 'test1'在 Visual Studio Code 的左下角，分支從 main 變成 test1。
關閉 終端 機視窗。
在 Visual Studio Code 的左下角，test1 分支標示為：
修改檔案
在 Visual Studio Code 的檔案總管窗格中，打開
/temperature-converter/index.html。在
index.html中，將應用程式名稱從「溫度轉換器」改為「TC」，如下：變更來源：
<title>Temperature converter</title> <meta name="application-name" content="Temperature converter">到：
<title>TC</title> <meta name="application-name" content="TC">儲存檔案。
在 Explorer 窗格中，打開
/temperature-converter/manifest.json。在
manifest.json中，將應用程式名稱從「溫度轉換器」改為「TC」，如下：變更來源：
"name": "Temperature converter", "short_name": "Temperature converter",到：
"name": "TC", "short_name": "TC",儲存檔案。
步驟 13：在瀏覽器中查看修改過的應用程式
請在瀏覽器中查看修改後的應用程式，如下所示：
在 Visual Studio Code 的檢視選單中，選擇終端機。
啟動伺服器
我們之前在 終端機中暫停網頁伺服器，只是為了輸入一些 git 指令切換到可用的分支。
輸入下列命令：
npx http-server本地開發網頁伺服器重新啟動。
查看網頁應用程式
在 Microsoft Edge 中，從命令) 點到 http://localhost:8080 終端機
npx http-server輸出的 (或等效網址。(網頁) 刷新 F5 。
這並不會達到預期效果。 刷新會從瀏覽器快取重新載入網頁，所以你會看到之前快取的應用程式， (分頁標題是 溫度轉換 器) 。
網頁) 硬刷新 (Shift+F5 。
硬刷新會直接從網頁伺服器顯示目前的內容。
分頁標題從溫度轉換器改成了 TC：
步驟 14：將修改過的樣本重新安裝為本地應用程式
從瀏覽器中安裝修改過的應用程式 localhost 到裝置，步驟如下：
接著說：在 Microsoft Edge 的地址列中，點擊 「可用應用程式」。安裝 TC (「
) 按鈕。瀏覽器中會開啟安裝 TC 應用程式 的對話框：
點擊 安裝 按鈕。
修改過的應用程式是本地安裝的。 應用程式 安裝 對話框會在應用程式內開啟：
點擊 允許 按鈕。
Windows 應用程式 的對話框會問：「你想把 TC 釘選到你的工作列嗎？ 這個請求來自TC。」
點擊 「是」 按鈕。
TC 應用程式的圖示 (
) 顯示在 Windows 工作列上。TC 應用程式會顯示在獨立視窗中，標題列現在寫著 TC：
步驟 15：卸載修改過的本地應用程式
以下步驟解除安裝修改過的本地應用程式：
在 TC 應用程式視窗中，選擇 設定及更多 (......) >應用程式設定。
在 Microsoft Edge 中， 應用程式分頁 會開啟，顯示有關 TC 應用程式的詳細資訊。
在底部點擊 「卸載 」按鈕。
在 所有同步裝置上移除 Microsoft Edge 應用程式？ 對話框會打開。
選擇 刪除應用程式歷史與資料 的勾選框，然後點擊 卸載 按鈕。
步驟 16：停止開發網頁伺服器
在 Visual Studio Code 的檢視選單中，選擇終端機。
按下 Ctrl+C。
伺服器停止，輸出訊息如下：
http-server stopped.
這就是樣本步驟的結束。
加快修改/重裝的流程
你可以根據修改的檔案，每次修改應用程式時跳過上述部分步驟：
如果你修改了 HTML 檔案、CSS 檔案或主要的 JavaScript 檔案，可以跳過卸載重新安裝應用程式。 Empy 快取並刷新頁面就足以重新載入 HTML、CSS 和 JavaScript 的變更。
如果你修改了清單檔案，必須卸載並重新安裝該應用程式。
網址列中的 PWA 按鈕
應用程式安裝完成後，如果你在瀏覽器中進入網頁應用程式，地址列中的 PWA 按鈕已從「應用程式可用) 按鈕變成了「在應用程式內開啟」 (「
) 按鈕。
如果你點擊「 在應用程式內開啟 」 ) 按鈕，瀏覽器會開啟 「開啟溫度轉換器 」對話框：
後續步驟
接下來，你可以：
研究程式碼;請參見 溫度轉換器原始檔案。
對範例程式碼做些微調整。
複製並貼上整個範例目錄
/Demos/temperature-converter/，修改程式碼，建立你自己的 Progressive Web App (PWA) 。
另請參閱
-
在 Microsoft Edge 中使用 PWA
- 在Microsoft Edge 中使用 PWA 安裝 PWA。
- 開始開發 PWA
- 溫度轉換器原始檔案
- 在 DevTools Network 功能參考中離線模擬。
本地主機：
-
http://localhost:8080 - 或指令輸出
npx http-server的等效網址。
GitHub：
VS Code：
git：
- 下載 請見 git-scm.com。
Node.js：