CycleTracker：安全連線

PWA 只能在透過 https:// 協議提供服務時，或透過 http:// 協議從 127.0.0.1 和 localhost URL 本地提供服務時，才能使用清單檔案安裝。它們通常還使用受安全上下文限制的 API。

在上一節中，我們使用 HTML 和 CSS 建立了我們的經期追蹤應用程式的外殼。在本節中，我們將在瀏覽器中開啟 CycleTracker 靜態內容，從本地啟動的開發環境檢視內容，並在遠端安全伺服器上檢視內容。

使用 `file://` 協議檢視

任何瀏覽器都會渲染您的 HTML。要檢視您在上一節中建立的已應用 CSS 的 HTML 檔案，請透過計算機的檔案結構或使用瀏覽器的“開啟檔案”選單選項導航到 index.html 檔案並開啟它。

更新 index.html，並將 style.css 放在同一目錄中後，在狹窄的瀏覽器視窗中檢視頁面應類似於此螢幕截圖：

Light green web page with a large header, a form with a legend, two date pickers and a button. The bottom shows two placeholder menstrual cycles and a header.

我們正在使用 file:// 協議檢視我們的頁面，該協議提供了一個安全上下文。這確保了頁面可以以我們當前程式碼庫的狀態檢視，並且當我們新增需要安全上下文的 JavaScript 功能時，它將繼續工作。

注意：透過 https 提供應用程式服務不僅對 PWA 有益，對所有網站都有益，因為它確保 Web 伺服器和使用者瀏覽器之間傳輸的資訊端到端加密。一些Web API 需要安全上下文。即使您沒有建立可安裝的 PWA，隨著您向任何 Web 應用程式新增功能，您也可能會遇到需要安全上下文的情況。

雖然我們可以使用 file:// 協議檢視和測試大多數應用程式功能，但我們不能使用它來測試使用清單檔案的應用程式安裝。

我們需要一個本地開發環境來測試包括安裝在內的整個教程。使 PWA 可安裝的一部分是安全伺服器。檔案將需要透過 Web 上的安全連線提供服務，以利用 PWA 提供的優勢並將我們的應用程式作為 PWA 分發。

localhost

設定本地開發環境的預設方法因作業系統而異。雖然您的作業系統上索引和配置檔案預設位置可能不同，但大多數桌面作業系統都允許您（開發人員）訪問伺服器配置。

例如，在 macOS 上，至少在 Sierra 和 Monterey 上，輸入 sudo apachectl start 會啟用 Apache HTTP 伺服器。伺服器啟動後，在瀏覽器中輸入 https:// 會顯示一個基本網頁，內容為“It works!”。預設情況下，顯示的 HTML 檔案是 Library/WebServer/Documents/index.html.en。要啟用 .html.en 以外的副檔名或將根目錄從 Library/WebServer/Documents/ 更改，您必須編輯位於 /etc/apache2/httpd.conf 的 Apache HTTP 配置檔案。可以使用 sudo apachectl stop 停止伺服器。

作業系統的預設 localhost 有一個易於記憶的 URL，但伺服器根位置和配置過程卻難以記憶。它也一次只允許在一個位置執行一個本地伺服器。幸運的是，有更直觀的伺服器設定方法選項，可以在多個埠上建立多個本地開發環境。

帶埠號的 localhost

有幾個IDE擴充套件和特定於程式語言的包，只需單擊或終端命令即可啟動開發環境。您甚至可以啟動多個本地伺服器，每個伺服器都有不同的埠號。

您可以使用VS Code 外掛執行本地 HTTP 伺服器，該外掛可以在單個或不同埠上執行本地伺服器。VS Code IDE 的Web 伺服器預覽擴充套件在編輯器當前開啟的目錄的根目錄中建立一個伺服器，預設埠為 8080。VS Code 擴充套件是可配置的。previewServer.port 設定是 Web 伺服器的埠號。擴充套件的預設設定 8080 可以編輯和更改。預設情況下，在瀏覽器 URL 欄中輸入 localhost:8080 將載入頁面。

注意：Web 伺服器預覽擴充套件使用 Browsersync。當您的開發環境由此擴充套件啟動時，localhost:3001 提供 Browsersync 的使用者介面，提供當前伺服器環境的概述。

瞭解如何使用Python或本地伺服器端語言（如 PHP）設定本地測試伺服器。

使用 npx 的 Localhost

如果安裝了 node，您可能也安裝了 npm 和 npx。在命令列中，輸入 npx -v。如果返回版本號，則可以使用http-server（一個不可配置的靜態 HTTP 伺服器），而無需安裝任何要求。在命令列中輸入 npx http-server [path]，其中 [path] 是儲存索引檔案的資料夾。

預設情況下，在瀏覽器 URL 欄中輸入 localhost:8080 將載入頁面。如果您已經啟動了埠 8080 的伺服器，它將自動更改埠號，使用可用埠（例如 8081）啟動開發環境。

您可以選擇不同的埠號。輸入 npx http-server /user/yourName/CycleTracker -p 8787 將在埠 8787 上啟動本地伺服器（如果可用）。如果不可用，如果您輸入的埠號已被佔用，您將收到 address already in use 或類似的錯誤。如果成功，在瀏覽器 URL 欄中輸入 localhost:8787 將渲染儲存為 ~/user/yourName/CycleTracker/index.html 的索引檔案，如果不存在索引檔案，則會顯示 ~/user/yourName/CycleTracker/ 的目錄內容。

這個不可配置的靜態 HTTP 伺服器足以滿足我們的基本應用程式。透過 localhost 和 127.0.0.1 提供服務的應用程式免於 https 限制，並始終被視為安全。瀏覽器不安全警告（如果有）可以繞過。雖然不是必需的，但要配置您的本地 Web 伺服器透過 HTTPS 提供服務，您可以新增內建 TLS 證書。有了證書，您將能夠從命令列安裝和執行local-web-server，以便透過 https 在本地為您的專案提供服務，從而防止任何安全警告。

bash

npm install -g local-web-server
cd ~/user/yourName/CycleTracker/
ws --https

在上述情況中，您可能需要在安裝命令前加上 sudo。

注意：如果您追求隱私，請注意您正在自己構建此 PWA，並且可以從您自己的開發環境將其安裝在您的機器上，而無需訪問網際網路。此應用程式沒有跟蹤功能。它是您可以獲得的最私密的應用程式。

安全外部伺服器

前面的選項對於您在 PWA 教程或任何 Web 開發專案中測試應用程式來說是好的，也是必要的。雖然您可以在您的裝置上託管您的 Web 應用程式並使其可供任何有網際網路連線的人使用，但我們不建議這樣做。

為了獲得 PWA 的附加功能，包括一鍵安裝、獨立 UI、進入應用商店以及透過 Service Worker 實現可選的離線功能，我們將需要一個安全連線。要分發您的應用程式，使其他人能夠檢視、使用和安裝您的 PWA，您需要將您的內容託管並放在一個安全的遠端伺服器上。

正式釋出 PWA 時，您可能需要投入域名和 Web 託管。對於開源專案，開發人員可以從程式碼庫中學習甚至為專案做貢獻，您可以將您的進度託管在GitHub Pages上。

GitHub Pages

CycleTracker 應用程式的當前狀態可在 GitHub 上檢視，透過 https://mdn.github.io/pwa-examples/cycletracker/html_and_css/ 安全地提供服務。我們已將檔案釋出到 MDN GitHub 帳戶。同樣，如果您有 GitHub 帳戶，您可以將其釋出到您的帳戶。請注意，雖然透過 TLS 安全地提供服務，但 GitHub 上的操作不一定是私密的，並且所有 GitHub Pages 都是公開的。如果您居住在政府壓制並追蹤月經週期的地區，請考慮複製貼上程式碼而不是分叉它。

要建立可公開訪問的安全站點，請建立GitHub Pages 站點。建立一個名為 <username>.github.io 的儲存庫，其中 <username> 是您的 GitHub 使用者名稱。建立一個 gh-pages 分支。您應用程式的此分支將在 https://<username>.github.io 上可用。

如前所述，即使您將儲存庫設定為私有，所有 GitHub Pages 仍會在網際網路上公開可用。由於月經資料使用 localStorage 儲存，因此該應用程式將透過 GitHub URL 可用，但使用者的資料僅在輸入資料的那個裝置上的一個瀏覽器中可用。直接在瀏覽器中刪除 localStorage 將刪除所有儲存的資料。

如果您不希望您的 PWA 位於頂級，您可以讓您的應用程式看起來像是駐留在子目錄中。您可以在 <username>.github.io 儲存庫中建立子目錄，或從 PWA 的單獨儲存庫釋出。透過配置釋出源在您的 PWA 儲存庫中，您的應用程式將在 https://<username>.github.io/<repository> 可見，其中 <repository> 是儲存庫的名稱。您可以將 GitHub 設定為在更改釋出到該儲存庫中的特定分支（包括 main）時自動釋出您的站點。

在 CycleTracker 演示應用程式處於開發的不同階段的情況下，<username> 是 mdn，儲存庫是 pwa-examples。由於此儲存庫有多個示例 PWA，每個 PWA 在開發過程中都有幾個步驟的進展，因此檔案（以及 PWA）嵌套了幾個級別深。

請注意，您可以為 GitHub Pages 站點配置自定義域。