十個(gè)令人驚嘆的漸進(jìn)式網(wǎng)頁應(yīng)用程式 (PWA) 案例

本文將展示十個(gè)不同類型的漸進(jìn)式網(wǎng)頁應(yīng)用程式 (PWA) 案例，它們巧妙地利用了Web技術(shù)，提供媲美原生應(yīng)用程式的使用者體驗(yàn)。

1. Redmenta：個(gè)人化學(xué)習(xí)路徑規(guī)劃平臺

Redmenta 是一款基於人工智慧的平臺，可幫助教師和學(xué)生從現(xiàn)有課程中創(chuàng)建個(gè)人化學(xué)習(xí)路徑。該軟體為學(xué)生產(chǎn)生學(xué)習(xí)活動(dòng)，並允許教師追蹤學(xué)生的學(xué)習(xí)進(jìn)度。作為漸進(jìn)式網(wǎng)頁應(yīng)用程式 (PWA)，Redmenta 可直接從瀏覽器安裝到任何裝置上，無需下載應(yīng)用程式商店應(yīng)用程式。

Redmenta 是現(xiàn)代應(yīng)用的完美典範(fàn)：使用 React 構(gòu)建，由 AI 驅(qū)動(dòng)，設(shè)計(jì)精美，支援行動(dòng)裝置響應(yīng)式，並透過開放網(wǎng)路分發(fā)。

2. Fodmapedia：低FODMAP飲食助理

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

點(diǎn)擊“安裝”，系統(tǒng)會逐步引導(dǎo)您將 PWA 新增至主畫面。該說明會根據(jù)您的特定設(shè)備進(jìn)行智慧調(diào)整。借助現(xiàn)代網(wǎng)路技術(shù)，PWA 現(xiàn)在幾乎可以從任何地方安裝。

對於可能錯(cuò)過初始提示的用戶，F(xiàn)odmapedia 在頁眉中提供了一個(gè)方便的安裝連結(jié)。此連結(jié)將帶您進(jìn)入一個(gè)專門的安裝頁面，其中包含應(yīng)用程式螢?zāi)唤貓D、詳細(xì)信息，甚至評論。

Fodmapedia 是一個(gè)很好的 PWA 範(fàn)例，它展示瞭如何在無需程式碼的情況下解決使用者的明確、切實(shí)的問題，並在應(yīng)用程式商店之外進(jìn)行分發(fā)。

3. Bingo em Casa：巴西體育博彩和賭場應(yīng)用

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

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

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

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

4. Nekodex：加密貨幣錢包應(yīng)用程式

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

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

他們的跨裝置安裝方法也很巧妙。點(diǎn)擊其網(wǎng)站右上角的“啟動(dòng)應(yīng)用程式”，即可顯示一個(gè)程式碼。使用您的手機(jī)掃描代碼，系統(tǒng)會引導(dǎo)您直接安裝應(yīng)用程式。太聰明了！

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

Run247 是一個(gè)越野跑和超長跑愛好者的全球社區(qū)，提供新聞、活動(dòng)和專家建議。與其姊妹應(yīng)用 Tri247 一樣，它也選擇了 PWA 格式進(jìn)行分發(fā)。

與前面提到的主要面向行動(dòng)裝置的 PWA 不同，Run247 同樣適用於桌面和行動(dòng)用戶。一個(gè)特別好的地方是網(wǎng)站左上角的「新增應(yīng)用程式」按鈕。只需單擊一下，即可立即將應(yīng)用程式安裝到您的電腦或手機(jī)上，確?？缪b置輕鬆存取。

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

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

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

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

對於送餐服務(wù)來說，在客戶的主螢?zāi)簧蟻?zhàn)有一席之地至關(guān)重要。憑藉地理位置和推播通知等高級功能，此 PWA 範(fàn)例完美地展示了 Web 的功能。

7. Music League：跨平臺音樂發(fā)現(xiàn)遊戲

Music League 是一款跨平臺音樂發(fā)現(xiàn)遊戲。與許多原生應(yīng)用程式一樣，其登入頁面提供了應(yīng)用程式的簡要概述以及安裝選項(xiàng)。但是，與大多數(shù)原生應(yīng)用程式不同，Music League 提供了卓越的靈活性：

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

8. Sky Freebies：免費(fèi)商品與樣品發(fā)現(xiàn)平臺

Sky Freebies 是一個(gè)幫助您發(fā)現(xiàn)各種零售商提供的免費(fèi)商品和樣品的優(yōu)惠平臺。

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

安裝應(yīng)用程式並啟動(dòng)後，您會看到內(nèi)容本身。 Sky Freebies 會偵測顯示模式並相應(yīng)調(diào)整使用者體驗(yàn)。整個(gè)體驗(yàn)是一段流暢、無縫的旅程——從訪問主頁到直接從主螢?zāi)粏?dòng)應(yīng)用程式。

Sky Freebies 也充分利用了推播通知，在將新優(yōu)惠添加到應(yīng)用程式後立即提醒您。當(dāng)然，這些通知是完全自願(yuàn)的。

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

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

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

計(jì)劃訪問貝德福德？只需將網(wǎng)站安裝到您的裝置上，即可在需要時(shí)輕鬆存取。

The Bedford Guide 使用 WordPress 開發(fā)，開啟時(shí)會顯示一個(gè)漂亮的啟動(dòng)畫面，就像原生應(yīng)用程式一樣！

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

您定期從一些線上商店訂購商品嗎？為什麼不將它們添加到手機(jī)的主螢?zāi)灰苑奖愦嫒∧兀?HobbyHop 是一家由 Shopify 提供支援的手工藝品商店——它也是一個(gè) PWA！

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

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

11. Photopea：免費(fèi)Photoshop替代品

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

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

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

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

以上是您可以在 5 年內(nèi)學(xué)習(xí)的現(xiàn)實(shí)生活中的 PWA 範(fàn)例的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！