CycleTracker PWA 教程

PWA 的優勢

使用 Web 的語言，我們將建立一個功能齊全的應用，該應用既能在線上和離線狀態下工作，也能在瀏覽器和使用者作業系統 (OS) 上執行。與任何常規網站一樣，CycleTracker 託管在 Web 伺服器上並可從 Web 伺服器下載。我們只需要一個文字編輯器：CycleTracker，像所有 PWA 一樣，不需要任何額外的程式語言知識、打包或專有 SDK。CycleTracker，像任何 PWA 一樣，可以無縫安裝到任何作業系統上，而無需應用商店（以及應用商店的審批和費用）。

使用標準和開放的 Web 技術

歷史上，要使一個應用程式能夠安裝在作業系統上，例如 Windows、iOS、macOS、Linux 和 Android，這些應用程式通常使用作業系統支援的程式語言開發，如 C#、.Net、Objective C、Swift、Kotlin、Java 或 Python。PWA 基於一種不同的模式：它們使用單一的程式碼庫，使用可在各種作業系統上執行的標準開放 Web 技術（HTML、CSS 和 JavaScript）編寫。

無需編譯

大多數程式語言——如 Java、C/C++ 和 Kotlin（常用於構建 Android 應用），以及 Objective-C 和 Swift（用於 iOS）——的程式碼需要被編譯並打包成可安裝的格式，例如 .exe、.dmg、.elf 和 .apk，或根據作業系統而定的其他可安裝檔案型別。根據語言的不同，編譯和打包可能需要作業系統的SDK。PWA 使用所有作業系統都支援的 Web 技術，無需打包或編譯。是的，開發團隊可以擁有複雜的構建系統，但正如我們在構建 CycleTracker 時將演示的那樣，PWA 可以僅由 HTML 和 JavaScript（以及 CSS，儘管樣式對於 PWA 並非必需）構建。

隨時隨地可用

僅支援單一作業系統的應用程式透過下載分發給使用者，通常是在專有應用商店中。它們可以透過 Apple App Store、Google Play、Microsoft Store 或類似平臺進行分發。PWA 沒有這些要求。如果您想分發您的 CycleTracker 應用，您將不需要中間商。使用者可以透過訪問其線上版本來訪問您的應用。但是，如果您願意，也可以將 PWA 分發到 Play 商店和 App Store，與其他 iOS 或 Android 應用無異。

使用者易於安裝

歷史上，下載的僅支援單一作業系統的應用程式需要使用者主動安裝。根據作業系統、安裝格式和下載來源，這可能是一個多步驟的安裝過程。PWA 更加 streamlined。PWA 可供任何擁有支援瀏覽器的使用者訪問，並且只需點選幾下即可安裝。

與作業系統安裝的軟體應用相比

安裝後，PWA 可以看起來和行為上與其他安裝在使用者裝置上的應用程式類似

應用程式視窗

透過一個manifest 設定，我們將使 CycleTracker 在自己的應用程式視窗中開啟，這意味著已安裝的 PWA 與其他已安裝的應用程式類似。

應用程式圖示

PWA 會在與使用者作業系統上安裝的其他已安裝應用程式相同的位置顯示應用程式圖示。這可能是在主螢幕、工具欄、應用程式資料夾中的圖示，或者裝置顯示應用程式圖示的任何地方。我們將學習如何為 CycleTracker宣告圖示，以便在安裝後，我們的 PWA 可以在使用者裝置上顯示為其他已安裝應用程式。

離線工作

最初需要網際網路連線來下載應用程式，在與伺服器或其他使用者同步資料時也需要。這適用於所有應用程式，不僅僅是 PWA。我們將新增一個service worker 來建立離線體驗，這意味著即使在使用者失去網際網路連線時，CycleTracker 也能工作。我們只會觸及 PWA 離線支援的強大功能。Service worker 可用於使 PWA 像任何其他已安裝的應用程式一樣離線工作。如果使用者在離線狀態下進行更改，service worker 可以使 PWA 在恢復連線後同步資料。有了 service worker，使用者無需主動與 PWA 互動，事實上，PWA 甚至不需要開啟，就可以傳送和檢索伺服器資料。

CycleTracker PWA 課程

本 PWA 教程的基礎 Web 應用是一個生理週期追蹤器，使用者可以追蹤每個生理週期的開始和結束。我們將建立一個靜態網站 shell 並對其進行樣式設計，然後學習如何建立安全的連線來檢視我們的進度。我們將新增 JavaScript 功能，將 HTML 和 CSS shell 轉換為功能齊全的應用，並將資料儲存在 localStorage 中。使用您構建的這個功能齊全的 Web 應用，我們將透過新增 manifest 檔案、包含圖示和 service worker，逐步將其增強為一個支援離線功能的 PWA。

步驟包括

應用 HTML 和 CSS

對網站的靜態內容、CycleTracker 靜態內容以及用於樣式化這些內容的 CSS 進行逐行解釋。

本地開發環境或安全連線

為了能夠安裝，PWA 必須透過 https:// 協議提供服務，或者作為本地提供的資源，使用 http:// 協議提供的 127.0.0.1 或 localhost URL。我們將使用 file:// 協議檢視頁面，並在教程步驟進行過程中討論建立安全 localhost 連線以測試安裝程式碼的選項。我們還將介紹如何使用 GitHub Pages 提供 PWA。

JavaScript 和 LocalStorage

對 JavaScript 功能進行全面解釋，以建立一個客戶端的生理週期追蹤 Web 應用，從而擁有一個可以透過漸進式增強為 PWA 的功能性應用，使用localStorage 儲存生理週期資訊。

Manifest：身份、外觀和圖示

PWA 需要一個 manifest，它是一個 JSON 檔案，描述了應用程式的名稱、圖示、描述以及在 PWA 安裝的作業系統上執行方式的其他定義。我們將建立一個 manifest 檔案，該檔案定義了應用程式安裝時的外觀，包括根據使用者裝置使用的圖示，以及應用程式視口引數。我們還將檢視使用瀏覽器開發者工具除錯 manifest 檔案。

Service Workers

Service worker 使應用程式能夠離線工作。透過上一步的安全連線，初次訪問頁面時提供其基本功能，同時 service worker 正在下載。安裝並激活 service worker 後，它將控制頁面，提供更可靠和更快的效能。

要完成本教程，最好對 HTML、CSS 和 JavaScript 有基本的瞭解。本教程提供了關於建立 manifest 檔案和初始化 service worker 的說明，以及設定本地開發環境以便您可以檢視您的進度。

雖然安全連線是必需的，但除了用於編碼 PWA 的任何文字編輯器和用於檢視它的瀏覽器之外，建立 PWA 沒有任何其他軟體要求。

您可以嘗試即時生理週期追蹤器，並在 GitHub 上檢視生理週期追蹤器原始碼。

• 下一頁