开始使用

渐进式 Web 应用仍然是网站,具有增强的特性和功能。它们未关联到特定的技术栈,您可以从一个新网站从头开始,或者对现有网站进行更新,而无需全面翻新。 在本指南中,您将学习如何创建 PWA 模式的良好实现。 下面列出了一些可帮助您顺利上手的策略:

从小处着手!此方法包括从基本的清单文件、简单的离线网页以及用于提供离线网页并缓存一些关键的 CSS 和 JavaScript 的 Service Worker 开始。得益于关键的 CSS 和 JavaScript 缓存,您现有的 Web 应用将可以离线工作,同时提升其性能。

专注于某项功能

选择一项会显著影响您的用户或业务的新功能,例如推送通知或文件处理。这样,您就无需一次性更改过多内容,就可以深入探索 PWA 了。

构建简单版本

以应用的现有部分或特定用户体验历程(例如视频播放或访问登机牌)的形式,使其作为离线优先的 PWA 前后对比(独立或情境)。这让您可以进行低风险实验,让您能够重新思考用户使用 PWA 的体验。

从头开始

如果您要重新设计网站,或者可以从头开始设计,此策略非常合适。与其他策略相比,借助该模式,您可以更轻松地构建 PWA 设计模式,尤其可让您从一开始就充分利用 Service Worker 的所有功能。

升级商店应用

借助将 PWA 发布到应用商店的功能,您可以将 PWA 封装到 PWA 启动器中,并将其上传到 Google Play 商店或 Windows 商店等商店。如果您已有平台专用应用,可以将其替换为应用店发布的 PWA。

通过这种方法,现有用户将升级到 PWA 体验,并且新用户仍然可以通过浏览器或应用商店使用或安装您的 PWA。此外,您还能为所有人打造一款应用,从而节省成本、节省时间并改善用户体验。

PWA 核对清单

渐进式 Web 应用是一个网站,这会引出一个问题:何时会成为渐进式 Web 应用? 答案并不是那么简单,因为 PWA 概念不是指特定技术或堆栈,而 PWA 是一种包含各种技术组件的模式。

虽然所有浏览器都没有独特的规则,但有一组名为渐进式 Web 应用核对清单的建议可帮助您打造用户喜爱的 PWA。

核心要求

由于 PWA 覆盖所有设备(从移动设备到桌面设备),因此核心的渐进式 Web 应用核对清单可帮助您了解如何确保所有用户(无论屏幕尺寸或输入类型如何)都能安装您的应用且可靠。

核心要求包括:

启动速度快,且运行速度快

性能对任何在线体验的成功都起着至关重要的作用,因为与效果不佳的网站相比,效果较好的网站能更好地吸引并留住用户。网站应专注于针对以用户为中心的效果指标进行优化。

适用于任何浏览器

渐进式 Web 应用首先是 Web 应用,这意味着它们需要跨浏览器运行,而不仅限于某种浏览器。不过,您无需在所有浏览器中获得相同的体验。有些功能可能无法在单个浏览器中实现,而提供了后备选项,以确保良好的体验。

适应任何屏幕尺寸

用户可以在任何尺寸的屏幕上使用您的 PWA,并且所有内容在任何视口尺寸下都可以显示。

提供自定义离线页面

当用户离线时,将其保留在 PWA 中,与回退到默认浏览器离线页面相比,能提供更顺畅、更接近原生体验的体验。

可安装

在主屏幕上安装或添加应用的用户更容易与这些应用互动,而当安装 PWA 时,它可以利用更多功能来提供更好的用户体验。

最佳 PWA 特征

若要打造真正出色的渐进式 Web 应用(让人感觉像是一流的应用),您不仅需要核心核对清单,最佳的渐进式 Web 应用核对清单是指如何让您的 PWA 感觉强大且可靠,同时充分利用网络的强大功能。

提供离线体验

通过允许用户在离线状态下使用您的 PWA,您可以为他们打造类似应用的真实体验。为此,您需要识别那些不需要连接的功能,这样用户至少可以使用部分功能。

完全可访问

确保应用的所有内容和交互都可以被屏幕阅读器理解,仅通过键盘即可使用,焦点明确指示并且色彩对比度很高。让您的 PWA 可访问,以确保所有人都能使用它。

使用强大的功能(如果可用)

从推送消息传递、WASM 和 WebGL,到文件系统访问、联系人选择器以及与应用商店的集成。我们提供用于创建功能强大、深度集成的 PWA 的工具,让您能够打造功能齐全的用户体验,这种体验之前是平台应用所独有的,您的用户无论身在何处,都可以随身携带。

超过一半的网站流量来自自然搜索。确保内容存在规范网址且搜索引擎可以将您的网站编入索引,这对于用户找到您的 PWA 至关重要。

支持任何输入类型

使用您的应用时,用户应该能够在各种输入类型之间无缝切换,并且输入法不应取决于屏幕尺寸。

为权限请求提供上下文

只有在提供上下文理由以提高用户接受提示的几率后,才触发针对权限(如通知、地理定位和凭据)的提示。

遵循有关运行状况良好的代码的最佳做法

通过及时更新应用并保持代码库的良好状态,您可以更轻松地提供新功能,以实现此核对清单中列出的其他目标。

资源