坚实的基础
坚实的基础是构建出色 PWA 的基本要求。要实现此基础，您需要使用一些原则来设计和编码以适应 Web 的约束
- 以移动设备为焦点约束。确保设计的每个视图都只关注基本内容和交互。
- 在设计过程中强调内容和核心功能。
- 在需要时逐步增强。首先使用最直接、最广泛可用的工具构建组件的核心内容和功能。使其易于访问。然后，测试您想要使用的高级功能，并使用它们增强您的组件。
- 提供快速且良好的用户体验，专注于以用户为中心的 Web 性能指标，获取真实用户指标，并为所有用户提升性能，无论他们的网络连接、输入类型、CPU 或 GPU 功能如何。
通过遵循这些原则并使用现代模式和 Web 功能进行增强，您可以创建出色且快速的体验，以及真正内在的设计。这些设计由约束而不是像素驱动，允许每个用户以最适合其特定浏览环境的方式访问您的内容和核心功能。
响应式 Web 设计
自 Ethan Marcotte 2010 年在 A List Apart 上发表文章 响应式 Web 设计 以来，设计师和开发者一直被鼓励创建灵活的体验，制作可在各种屏幕尺寸和设备上工作的用户界面。
但在某种程度上，这被简化为移动设备、平板电脑和桌面设备尺寸，宽度很大程度上受 iOS 屏幕尺寸的影响。借助现代 CSS 和对响应式设计最初意图的重新关注，我们可以将弹性重新放回弹性网站中。
响应式 Web 设计引入了三个技术要素
- 流式网格
- 弹性媒体
- 媒体查询
Ethan 总结说，这些技术要求还不够；前进的道路还需要不同的思维方式。
移动用户神话
在响应式设计的早期，为了使网站更易于设计，人们做出了一些假设。例如，小型体验适用于手机，宽度为 320 像素；中型体验适用于平板电脑，宽度为 1024 像素；任何大于此尺寸的体验都适用于桌面设备。小屏幕具有触摸功能，大屏幕则没有。手机用户匆忙且容易分心，因此需要“轻量级”体验。
这些都不是真的；它们是移动神话，其原因是假设用户的需求完全基于屏幕尺寸或设备类型而根本不同。这经不起推敲。
例如，以社交网络 PWA 为例，您今天可以在移动设备和桌面设备上安装它。在桌面设备上，许多用户可以在工作时保持一个狭窄的窗口，其中包含屏幕一侧的信息流，如果因为可用宽度而假设他们使用的是移动设备，那就错了。
PWA 世界脱离了浏览器的标签页，甚至给响应式设计世界带来了新的挑战，例如迷你模式以及与可折叠设备协同工作。
迷你模式
在桌面设备上安装 PWA 后，窗口可以变得非常小；比浏览器的窗口还小，比移动设备的视口还小。这是 Web 上的新事物：我们可以支持迷你模式，窗口可以小到 200x100 CSS 像素。
如今，在创建 PWA 时，最好考虑在迷你模式下提供什么，这要归功于响应式 Web 设计，例如音乐播放器上的控制按钮、仪表板信息或快速操作。
在桌面设备上，PWA 可以渲染在比您为浏览器设计的最小窗口还要小的窗口中。这为您的响应式 Web 设计增加了一个新的断点：迷你模式。
折叠屏和混合设备
折叠屏和混合设备如今也很常见
- 小型翻盖手机。
- 可用作手机或平板电脑的折叠屏设备。
- 可以转换为平板电脑的笔记本电脑。
- 可以充当带有键盘和触控板的笔记本电脑的平板电脑。
- 然后手机可以通过集线器转换为桌面设备。
虽然每个网站都面临挑战，但对于渐进式 Web 应用，您可以控制并在应用安装后对窗口负责。因此，您的设计应做出反应，并在每种情况下提供最佳体验。
一切优先
但是您应该从哪里开始呢？移动优先、内容优先、离线优先？在为 Web 的灵活性进行设计时，应该是哪个？好吧，答案是肯定的，一切优先。自 Luke Wroblewski 于 2009 年首次提出 移动优先 以来，这个术语已被以多种方式解读：从在 Web 上模拟特定于平台的 UI 和 UX 模式，到在构建 Web 应用之前构建移动应用，再到仅使用 min-width 媒体查询并称之为完成。但是，它的最初意图是：移动设备迫使您集中注意力。正如 Luke 所说
移动设备要求软件开发团队仅关注应用中最重要的数据和操作。在 320 x 480 像素的屏幕中，根本没有空间容纳多余的、不必要的元素。您必须确定优先级。因此，当团队进行移动优先设计时，结果是一种体验，专注于用户想要完成的关键任务，而没有当今桌面访问网站中充斥的弯路和界面碎片。这是一种良好的用户体验，对业务有利。
Luke Wroblewski
将您网站的每个视图都集中在用户想要在那里完成的基本任务上，并且不要仅仅因为他们拥有更多的屏幕空间而向该想法添加更多内容。
第二个原则在响应式 Web 设计中有所暗示：“不同体验的梯度”。为每个用户提供单一、相同、像素完美的体验不应该是您工作的目标；这几乎是不可能的。
与其将您的 Web 体验视为固定不变的事物，不如将其视为一组建议，用户的设备将使用这些建议为其当前上下文构建最佳体验。为此，需要拥抱渐进增强。
渐进增强
渐进增强是一种模式，它使我们能够编写可在任何地方运行的代码，从标准 HTML、CSS 和 JavaScript 开始，并在其之上添加功能层，并在 API 不可用时提供适当的回退。
您如何增强？功能检测是一种模式，您可以在其中执行支持测试，并根据该测试结果做出反应。有几种内置的 Web 平台工具和实践可以做到这一点。
使用 @supports，检查浏览器对 CSS 功能的支持，并根据结果应用规则。这适用于 CSS 属性和值；如果支持某个属性，但不支持某个值，则会失败，不支持的属性也会失败。JavaScript 代码可以通过 CSSSupportsRule 访问此功能。
大多数新的 Web 平台功能都附加到现有对象，因此对象样式检测中的“功能”在 JavaScript 中效果良好，其他类似的查找也是如此，例如检查元素上的属性或方法。
避免设备检测
您应该直接测试功能支持，而不是根据 User-Agent 字符串做出支持假设。
User-agent 字符串从来都不是真正可靠的。它们依赖于对现有的每种浏览器、操作系统和设备组合都具有近乎完美的知识才能“猜对”。即使那样，它们也容易受到用户欺骗的影响，例如，移动浏览器上的桌面站点重定向通常就像欺骗桌面用户代理字符串一样简单。
此外，浏览器正在努力冻结其 User-Agent 字符串，其中用于功能检测的 user-agent 字符串被特别指出是弃用的原因，这使得它们比以前更不可靠，无法识别用户和设备。
内容优先
为 Web 设计的另一个原则是：首先从您的内容开始。例如，带有股票价格图表的实时股票行情自动收录器，其核心是一个股票表格，其中包含股票在一段时间内的价格，可能还包含刷新站点的链接。
然后可以使用 JavaScript 和 fetch 请求对其进行增强，以按计时器更新表格的值，或者使用套接字进行增强以提供基于实时推送的更新。它可以再次增强以绘制结果图表，可以使用 CSS、SVG 或 Canvas。但核心从内容开始。
内在设计
- 移动设备作为用户体验的焦点约束。
- 在设计过程中强调内容和核心功能。
- 在可用时逐步增强高级功能。
这些原则结合在一起，为我们带来了新的东西：内在设计。在她的演讲 设计内在布局 中，Jen Simmons 谈到了使用现代 CSS 工具（如 Grid、Flexbox、流式布局和书写模式）来设计和构建用户界面。借助这些工具，她说
您可以真正使布局成为我们拥有的内容和我们想要做的设计的内在组成部分。
Jen Simmons
这种新的 CSS 使设计师能够重新获得对布局的某些控制权，但这样做的方式符合最新的 Web 设计原则。您无需创建基于固定屏幕尺寸的固定表单，而是通过利用该内容的内在属性（例如它可以有多小或多大、文本的大小以及可用空间）来定义布局发生的内容驱动规则。它们使您能够在无需控制每个像素的放置的情况下实现您的设计与内容的交互。
内在布局使关于 Web 上控制的对话完全循环，并为其提供了定义。Web 上的控制不是为访问您网站的每个访问者规定设备或屏幕尺寸或颜色或字体或布局或功能。Web 上的控制是关于编写浏览器将用来组装您的体验的规则，为您的渐进式 Web 应用中的每个用户独特地构建它。
Web 性能
我们 PWA 的最后一个但并非最不重要的基础是 Web 性能。为用户提供出色的体验是强制性的；它将以各种可能的方式带来更多转化。
Web 性能涉及以下几个步骤
- 了解可用的关键以用户为中心的指标。
- 为每个指标设定目标。
- 衡量我们的 PWA。
- 通过在我们的代码或服务器中静态地应用技术和最佳实践来改进我们的指标。
- 再次衡量。
- 根据用户的上下文，实时改进每个用户的体验。
今天的 Web 性能指标衡量您的内容在屏幕上显示的速度，以及您网站的交互性以及用户对体验的感知。
Core Web Vitals
在过去的十年中，我们一直在处理不同的指标来衡量 Web 性能的成功。今天，一组推荐的指标（称为 Core Web Vitals）侧重于影响性能和用户体验的三个关键领域
- 加载 — 由 最大内容渲染时间 (LCP) 表示。
- 交互性 — 由 与下一次绘制的交互 (INP) 表示。
- 视觉稳定性 — 由 累积布局偏移 (CLS) 表示。
借助 Core Web Vitals，您可以一目了然地了解您的 PWA 在性能和用户体验方面的好坏程度。
PWA 基础
重要的是，您的 PWA 在响应式设计、移动设备和一切优先、内在设计和 Web 性能方面具有坚实的基础，以为所有用户提供出色的体验。