首页 >web前端 >js教程 >您可以在 5 年内学习的现实生活中的 PWA 示例

您可以在 5 年内学习的现实生活中的 PWA 示例

Susan Sarandon
Susan Sarandon原创
2025-01-16 13:21:59235浏览

十个令人惊叹的渐进式网页应用 (PWA) 案例

本文将展示十个不同类型的渐进式网页应用 (PWA) 案例,它们巧妙地利用了Web技术,提供媲美原生应用的用户体验。

  1. Redmenta:个性化学习路径规划平台

Redmenta 是一款基于人工智能的平台,帮助教师和学生从现有课程中创建个性化学习路径。该软件为学生生成学习活动,并允许教师跟踪学生的学习进度。作为渐进式网页应用 (PWA),Redmenta 可直接从浏览器安装到任何设备上,无需下载应用商店应用。

real-life PWA examples you can learn from in 5

Redmenta 是现代应用的完美典范:使用 React 构建,由 AI 驱动,设计精美,支持移动设备响应式,并通过开放网络分发。

  1. Fodmapedia:低FODMAP饮食助手

Fodmapedia 专为肠易激综合征患者设计,帮助他们通过低FODMAP饮食来管理症状。这个无需代码即可使用 Bubble 开发的 PWA 示例,帮助用户识别哪些食物适合他们的饮食需求。由于这是一个日常使用的工具,因此可以直接从主页安装网站作为应用程序。

real-life PWA examples you can learn from in 5

点击“安装”,系统会逐步指导您将 PWA 添加到主屏幕。该说明会根据您的具体设备进行智能调整。借助现代网络技术,PWA 现在几乎可以从任何地方安装。

real-life PWA examples you can learn from in 5

对于可能错过初始提示的用户,Fodmapedia 在页眉中提供了一个方便的安装链接。此链接将带您进入一个专门的安装页面,其中包含应用程序屏幕截图、详细信息,甚至评论。

real-life PWA examples you can learn from in 5

Fodmapedia 是一个很好的 PWA 示例,它展示了如何在无需代码的情况下解决用户的明确、切实的问题,并在应用商店之外进行分发。

  1. Bingo em Casa:巴西体育博彩和赌场应用

Bingo em Casa 是一款巴西体育博彩和赌场应用,它选择使用 PWA 而不是原生应用——鉴于其应用属于 Google Play 和 App Store 上禁止的类别,这是一个明确的选择。

事实上,对于赌博、成人内容、加密货币、大麻和健康等敏感行业的应用,PWA 是理想的解决方案。使用 PWA,您可以完全控制分发,同时仍然确保您的应用可以方便地位于用户的家屏幕上,而无需要求他们下载可疑的可执行文件。

Bingo em Casa 鼓励用户直接从登录页面安装其 PWA。安装是即时的,一旦应用从您的主屏幕启动,系统会提示您启用推送通知。此流程特别有效——在 iOS(从 16.4 版本开始),推送通知仅在已安装的 PWA 中可用。

real-life PWA examples you can learn from in 5

与在启动时立即显示通知提示的侵入性网站不同,Bingo em Casa 会巧妙地等到您展示了对应用的有意义的参与后,才会优雅地邀请您选择加入通知。做得很好!

  1. Nekodex:加密货币钱包应用

Nekodex 是一款加密货币钱包应用。与之前的 PWA 示例一样,它利用 Web 格式规避应用商店限制,同时提供无缝的用户体验。

凭借其精美的动画和抛光的界面,一旦安装,此 Web 应用几乎与原生应用无法区分。一些开发人员认为 PWA 的视觉吸引力或功能不如原生应用。Nekodex 证明了并非如此,它展示了 PWA 可以看起来和感觉非常时尚。

real-life PWA examples you can learn from in 5

他们的跨设备安装方法也很巧妙。点击其网站右上角的“启动应用”,即可显示一个代码。使用您的手机扫描代码,系统会指导您直接安装应用。太聪明了!

real-life PWA examples you can learn from in 5

  1. Run247:越野跑和超长跑爱好者社区

Run247 是一个面向越野跑和超长跑爱好者的全球社区,提供新闻、活动和专家建议。与其姊妹应用 Tri247 一样,它也选择了 PWA 格式进行分发。

与前面提到的主要面向移动设备的 PWA 不同,Run247 同样适用于桌面和移动用户。一个特别好的地方是网站左上角的“添加应用”按钮。只需单击一下,即可立即将应用安装到您的计算机或手机上,确保跨设备轻松访问。

real-life PWA examples you can learn from in 5

PWA 安装不仅限于移动设备——它还适用于 macOS(通过 Safari、Chrome、Brave 或 Edge)、Windows(使用 Chrome、Brave 或 Edge)甚至 ChromeOS!

此 PWA 示例非常彻底地处理了安装逻辑。例如,以下是在使用少数与 PWA 安装不兼容的浏览器(实际上主要是桌面的 Firefox)时发生的情况。

real-life PWA examples you can learn from in 5

  1. Fou d’la bouffe:魁北克和安大略省送餐服务

Fou d’la Bouffe 是一家在魁北克和安大略省运营的送餐服务公司,这两个地区每天都使用法语和英语。为了迎合这种双语受众,该应用提供法语和英语两种版本。加载页面后,应用会检测用户的语言并相应地提示用户安装 PWA:

real-life PWA examples you can learn from in 5

对于送餐服务来说,在客户的主屏幕上占据一席之地至关重要。凭借地理位置和推送通知等高级功能,此 PWA 示例完美地展示了 Web 的功能。

  1. Music League:跨平台音乐发现游戏

Music League 是一款跨平台音乐发现游戏。与许多原生应用一样,其登录页面提供了应用的简要概述以及安装选项。但是,与大多数原生应用不同,Music League 提供了卓越的灵活性:

real-life PWA examples you can learn from in 5

无需强制安装——您可以在浏览器中直接玩游戏,或者如果您愿意,也可以选择将其安装到您的手机上。这是一个有效利用 PWA 格式的绝佳示例。通过消除浏览传统应用商店的摩擦,Music League 的开发人员提高了其应用的采用率。

  1. Sky Freebies:免费商品和样品发现平台

Sky Freebies 是一个帮助您发现各种零售商提供的免费商品和样品的优惠平台。

但正如您可能想象的那样,免费赠品不会永远持续!这就是为什么用户需要定期检查网站以抓住最新的优惠。为了使这更容易,他们添加了一个方便的安装窗口小部件,该窗口小部件在您浏览网站时始终可用:

real-life PWA examples you can learn from in 5

安装应用并启动后,您会看到内容本身。Sky Freebies 会检测显示模式并相应地调整用户体验。整个体验是一段流畅、无缝的旅程——从访问主页到直接从主屏幕启动应用。

real-life PWA examples you can learn from in 5

Sky Freebies 还充分利用了推送通知,在将新优惠添加到应用后立即提醒您。当然,这些通知是完全自愿的。

real-life PWA examples you can learn from in 5

有趣的是,虽然该应用在 Web 上完全可用,但它也可以在 Google Play 或 Windows 应用商店下载。虽然 Apple 限制了 PWA,但 Google 和 Microsoft 对 Web 应用更加开放。因此,选择 PWA 格式并不意味着放弃习惯使用传统应用商店的用户。

  1. The Bedford Guide:贝德福德本地指南

PWA 是本地指南的理想格式,The Bedford Guide 就是一个完美的例子。它可以帮助您探索英国贝德福德最好的餐厅、酒吧、景点和其他热点。

计划访问贝德福德?只需将网站安装到您的设备上,即可在需要时轻松访问。

real-life PWA examples you can learn from in 5

The Bedford Guide 使用 WordPress 开发,打开时会显示一个漂亮的启动画面,就像原生应用一样!

  1. HobbyHop:工艺品在线商店

您定期从一些在线商店订购商品吗?为什么不将它们添加到手机的主屏幕以方便访问呢?HobbyHop 是一家由 Shopify 提供支持的工艺品商店——它也是一个 PWA!

Shopify 是在线销售产品的最简单平台之一,由于 Shopify 应用商店,将您的商店变成具有安装和推送通知功能的 PWA 只需单击一下即可完成。

HobbyHop 从其主页的页脚链接到其自己的安装页面。这是一种在不干扰用户在应用中的旅程的情况下推广安装的直接方法。

real-life PWA examples you can learn from in 5

  1. Photopea:免费Photoshop替代品

最后但并非最不重要的是,我必须提到 Photopea,在我看来,这是在 Web 上构建的最伟大的软件之一。简而言之,它是一个免费的 Photoshop 替代品,完全使用 Web 技术(如 HTML、CSS 和 JavaScript)开发。

与其他示例一样,您可以将其作为 PWA 安装到您的设备上。在我的 Mac 的 Dock 中有它,并且几乎每天都使用它。它的运行效果非常好,以至于我实际上无法分辨它不是原生应用。

real-life PWA examples you can learn from in 5

然而,Photopea 真正令人惊叹的是它实际的功能。让设计师可以直接在 Web 上处理如此复杂的任务简直是天才之举。

对 PWA 的潜力持怀疑态度?试试 Photopea——它可能会改变您的看法。

以上是您可以在 5 年内学习的现实生活中的 PWA 示例的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn