您可以在 5 年內學習的現實生活中的 PWA 範例

十個令人驚嘆的漸進式網頁應用程式 (PWA) 案例

本文將展示十個不同類型的漸進式網頁應用程式 (PWA) 案例，它們巧妙地利用了Web技術，提供媲美原生應用程式的使用者體驗。

1. Redmenta：個人化學習路徑規劃平台

Redmenta 是一款基於人工智慧的平台，可幫助教師和學生從現有課程中創建個人化學習路徑。該軟體為學生產生學習活動，並允許教師追蹤學生的學習進度。作為漸進式網頁應用程式 (PWA)，Redmenta 可直接從瀏覽器安裝到任何裝置上，無需下載應用程式商店應用程式。

Redmenta 是現代應用的完美典範：使用 React 構建，由 AI 驅動，設計精美，支援行動裝置響應式，並透過開放網路分發。

2. Fodmapedia：低FODMAP飲食助理

Fodmapedia 專為腸躁症患者設計，幫助他們透過低FODMAP飲食來管理症狀。這個無需程式碼即可使用 Bubble 開發的 PWA 範例，幫助使用者識別哪些食物適合他們的飲食需求。由於這是一個日常使用的工具，因此可以直接從主頁安裝網站作為應用程式。

點擊“安裝”，系統會逐步引導您將 PWA 新增至主畫面。該說明會根據您的特定設備進行智慧調整。借助現代網路技術，PWA 現在幾乎可以從任何地方安裝。

對於可能錯過初始提示的用戶，Fodmapedia 在頁眉中提供了一個方便的安裝連結。此連結將帶您進入一個專門的安裝頁面，其中包含應用程式螢幕截圖、詳細信息，甚至評論。

Fodmapedia 是一個很好的 PWA 範例，它展示瞭如何在無需程式碼的情況下解決使用者的明確、切實的問題，並在應用程式商店之外進行分發。

3. Bingo em Casa：巴西體育博彩和賭場應用

Bingo em Casa 是一款巴西體育博彩和賭場應用，它選擇使用 PWA 而不是原生應用——鑑於其應用屬於 Google Play 和 App Store 上禁止的類別，這是一個明確的選擇。

事實上，對於賭博、成人內容、加密貨幣、大麻和健康等敏感行業的應用，PWA 是理想的解決方案。使用 PWA，您可以完全控制分發，同時仍然確保您的應用程式可以方便地位於用戶的家螢幕上，而無需要求他們下載可疑的可執行檔。

Bingo em Casa 鼓勵使用者直接從登入頁面安裝其 PWA。安裝是即時的，一旦應用程式從您的主畫面啟動，系統會提示您啟用推播通知。此流程特別有效－在 iOS（從 16.4 版本開始），推播通知僅在已安裝的 PWA 中可用。

與在啟動時立即顯示通知提示的侵入性網站不同，Bingo em Casa 會巧妙地等到您展示了對應用的有意義的參與後，才會優雅地邀請您選擇加入通知。做得很好！

4. Nekodex：加密貨幣錢包應用程式

Nekodex 是一款加密貨幣錢包應用程式。與先前的 PWA 範例一樣，它利用 Web 格式規避應用程式商店限制，同時提供無縫的使用者體驗。

憑藉其精美的動畫和拋光的介面，一旦安裝，此 Web 應用幾乎與原生應用程式無法區分。有些開發人員認為 PWA 的視覺吸引力或功能不如原生應用程式。 Nekodex 證明了並非如此，它展示了 PWA 可以看起來和感覺非常時尚。

他們的跨裝置安裝方法也很巧妙。點擊其網站右上角的“啟動應用程式”，即可顯示一個程式碼。使用您的手機掃描代碼，系統會引導您直接安裝應用程式。太聰明了！

5. Run247：越野跑與超長跑愛好者社群

Run247 是一個越野跑和超長跑愛好者的全球社區，提供新聞、活動和專家建議。與其姊妹應用 Tri247 一樣，它也選擇了 PWA 格式進行分發。

與前面提到的主要面向行動裝置的 PWA 不同，Run247 同樣適用於桌面和行動用戶。一個特別好的地方是網站左上角的「新增應用程式」按鈕。只需單擊一下，即可立即將應用程式安裝到您的電腦或手機上，確保跨裝置輕鬆存取。

PWA 安裝不僅限於行動裝置——它還適用於 macOS（透過 Safari、Chrome、Brave 或 Edge）、Windows（使用 Chrome、Brave 或 Edge）甚至 ChromeOS！

此 PWA 範例非常徹底地處理了安裝邏輯。例如，以下是在使用少數與 PWA 安裝不相容的瀏覽器（實際上主要是桌面的 Firefox）時發生的情況。

6. Fou d’la bouffe：魁北克及安大略省送餐服務

Fou d’la Bouffe 是一家在魁北克和安大略省運營的送餐服務公司，這兩個地區每天都使用法語和英語。為了迎合這種雙語受眾，該應用程式提供法語和英語兩種版本。載入頁面後，應用程式會偵測使用者的語言並相應地提示使用者安裝 PWA：

對於送餐服務來說，在客戶的主螢幕上佔有一席之地至關重要。憑藉地理位置和推播通知等高級功能，此 PWA 範例完美地展示了 Web 的功能。

7. Music League：跨平台音樂發現遊戲

Music League 是一款跨平台音樂發現遊戲。與許多原生應用程式一樣，其登入頁面提供了應用程式的簡要概述以及安裝選項。但是，與大多數原生應用程式不同，Music League 提供了卓越的靈活性：

無需強制安裝－您可以在瀏覽器中直接玩遊戲，或者如果您願意，也可以選擇將其安裝到您的手機上。這是一個有效利用 PWA 格式的絕佳範例。透過消除瀏覽傳統應用程式商店的摩擦，Music League 的開發人員提高了其應用的採用率。

8. Sky Freebies：免費商品與樣品發現平台

Sky Freebies 是一個幫助您發現各種零售商提供的免費商品和樣品的優惠平台。

但正如您可能想像的那樣，免費贈品不會永遠持續下去！這就是為什麼用戶需要定期檢查網站以抓住最新的優惠。為了使這更容易，他們添加了一個方便的安裝視窗小部件，該視窗小部件在您瀏覽網站時始終可用：

安裝應用程式並啟動後，您會看到內容本身。 Sky Freebies 會偵測顯示模式並相應調整使用者體驗。整個體驗是一段流暢、無縫的旅程——從訪問主頁到直接從主螢幕啟動應用程式。

Sky Freebies 也充分利用了推播通知，在將新優惠添加到應用程式後立即提醒您。當然，這些通知是完全自願的。

有趣的是，雖然該應用程式在 Web 上完全可用，但它也可以在 Google Play 或 Windows 應用程式商店下載。雖然 Apple 限制了 PWA，但 Google 和 Microsoft 對 Web 應用程式更加開放。因此，選擇 PWA 格式並不意味著放棄習慣使用傳統應用程式商店的使用者。

9. The Bedford Guide：貝德福德本地指南

PWA 是本地指南的理想格式，The Bedford Guide 就是一個完美的例子。它可以幫助您探索英國貝德福德最好的餐廳、酒吧、景點和其他熱點。

計劃訪問貝德福德？只需將網站安裝到您的裝置上，即可在需要時輕鬆存取。

The Bedford Guide 使用 WordPress 開發，開啟時會顯示一個漂亮的啟動畫面，就像原生應用程式一樣！

10. HobbyHop：手工藝品線上商店

您定期從一些線上商店訂購商品嗎？為什麼不將它們添加到手機的主螢幕以方便存取呢？ HobbyHop 是一家由 Shopify 提供支援的手工藝品商店——它也是一個 PWA！

Shopify 是線上銷售產品的最簡單平台之一，由於 Shopify 應用程式商店，將您的商店變成具有安裝和推播通知功能的 PWA 只需單擊即可完成。

HobbyHop 從其主頁的頁腳連結到自己的安裝頁面。這是一種在不干擾用戶在應用程式中的旅程的情況下推廣安裝的直接方法。

11. Photopea：免費Photoshop替代品

最後但並非最不重要的是，我必須提到 Photopea，在我看來，這是在 Web 上建立的最偉大的軟體之一。簡而言之，它是一個免費的 Photoshop 替代品，完全使用 Web 技術（如 HTML、CSS 和 JavaScript）開發。

與其他範例一樣，您可以將其作為 PWA 安裝到您的裝置上。在我的 Mac 的 Dock 中有它，幾乎每天都使用它。它的運行效果非常好，以至於我實際上無法分辨它不是原生應用程式。

然而，Photopea 真正令人驚訝的是它實際的功能。讓設計師可以直接在 Web 上處理如此複雜的任務簡直是天才之舉。

對 PWA 的潛力持懷疑態度？試試 Photopea——它可能會改變您的看法。

以上是您可以在 5 年內學習的現實生活中的 PWA 範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！