打牢基础
打牢基础是构建出色的 PWA 的基本要求。 要实现此基础，您需要根据 Web 的局限性来设计和编写代码，遵循以下原则：
- 使用移动设备作为聚焦限制条件。确保设计的每个视图仅专注于基本内容和互动。
- 在设计过程中强调内容和核心功能。
- 视需要逐步增强。首先，使用最简单、最广泛使用的工具构建组件的核心内容和功能。让其可供访问。然后，测试您要使用的高级功能，并利用这些功能增强组件。
- 提供快速且良好的用户体验，重点关注以用户为中心的 Web 性能指标，获取真实的用户指标，并为所有用户推送性能，无论其网络连接、输入类型、CPU 或 GPU 性能如何。
遵循这些原则并结合使用现代模式和 Web 功能，您可以通过真正内在的设计打造出快速出色的体验。设计以约束条件（而非像素）为依据，让每位用户都能以最适合其特定浏览情境的方式访问您的内容和核心功能。
自适应网页设计
自从 Ethan Marcotte 在 2010 年发表了 A List Apart 文章《自适应网页设计》以来，设计师和开发者一直被鼓励打造灵活的体验，使界面能够在各种屏幕尺寸和设备上正常运行。
不过，随着时间的推移，它逐渐缩减为移动设备、平板电脑和桌面设备的尺寸，而 iOS 屏幕尺寸也深受其影响。借助现代 CSS 和重新关注自适应设计的原始意图，我们可以让网站恢复弹性。
自适应设计涉及三个技术要素：
- 流体网格
- 柔性媒体
- 媒体查询
Ethan 认为这些技术要求是不够的；未来还需要一种不同的思维方式。
移动用户的迷思
在响应式设计的早期，人们为了让网站更易于设计，提出了一些假设。例如，小型体验适用于手机，宽度为 320 像素，中等体验适用于平板电脑，宽度为 1024 像素，大于桌面设备的任何尺寸。小屏幕支持触控，大屏幕不支持。手机用户会因为操作匆忙而分心，因此需要“轻松”的体验。
这些说法都是不正确的，它们是移动设备领域的迷思，源自于一种假设：用户的需求完全取决于屏幕尺寸或设备类型，因而根本不同。这不需要仔细审查。
例如，您现在就可以在移动设备和桌面设备上安装社交网络 PWA。 在桌面设备上，许多用户在工作时可以让一个狭窄的窗口将信息流放在屏幕的一侧，并因为可用宽度而假定自己使用的是移动设备是错误的。
脱离浏览器标签页的 PWA 世界甚至给响应式设计世界带来了新的挑战，例如迷你模式和与可折叠设备的互动。
迷你模式
在桌面设备上安装 PWA 后，窗口可能会变得非常小；小于浏览器的窗口，小于移动设备视口。这是 Web 上的一个新功能：我们可以支持迷你模式，这种模式的窗口最小可达 200x100 CSS 像素。
现在，在创建 PWA 时，不妨考虑在迷你模式下提供哪些内容，例如音乐播放器上的控制按钮、信息中心信息或快捷操作，这得益于响应式 Web 设计。
在桌面设备上，PWA 可以在比您为浏览器设计的最小窗口更小的窗口中呈现。它会为您的响应性网页设计添加一个新断点：迷你模式。
可折叠设备和混合型设备
可折叠设备和混合设备如今也非常常见：
- 小巧的翻盖手机。
- 可用作手机或平板电脑的可折叠设备。
- 可转换为平板电脑的笔记本电脑。
- 可通过键盘和触控板充当笔记本电脑的平板电脑。
- 然后，手机可以通过集线器转换为桌面设备。
虽然每个网站都存在此问题，但对于渐进式 Web 应用，您可以控制安装应用时显示的窗口，并对其负责。因此，您的设计应在各种情境中做出响应并提供最佳体验。
先解决所有问题
但该从哪里着手呢？移动优先、内容优先、离线优先？在设计时，应考虑到网络的灵活性，这是什么？答案是肯定的，先做所有事情。 自 Luke Wroblewski 于 2009 年首次提出移动优先一词以来，该术语的含义就被广泛解读：从在 Web 上模拟平台专用界面和用户体验模式，到先构建移动应用再构建 Web 应用，再到仅使用最小宽度媒体查询就大功告成。不过，其最初的意图是：移动设备会迫使您专注。正如 Luke 所说：
移动设备要求软件开发团队仅专注于应用中最重要的数据和操作。320 x 480 像素的屏幕上根本没有空间容纳多余的元素。您必须确定优先事项。 因此，当团队采用移动优先设计时，最终会获得一种专注于用户想要完成的关键任务的体验，而不会出现当今桌面版网站上充斥的绕路和界面杂物。这有助于提升用户体验，并有利于业务发展。
Luke Wroblewski
让网站的每个视图都仅专注于用户希望在该网站上完成的基本任务，不要仅仅因为这样具有更大的屏幕空间就向创意中添加更多内容。
第二个原则在《自适应 Web 设计》中有所提及：“不同体验的渐变”。 不应将同一个、完全一样的、完美的像素体验作为工作的目标，因为这是不可能实现的。
不要将网络体验视为固定不变的，而应将其视为用户设备将用来根据其当前情境打造最佳体验的一组建议。为此，需要采用渐进式增强。
采用渐进增强的方式
渐进式增强是一种模式，可让我们编写可在任何位置运行的代码，从标准 HTML、CSS 和 JavaScript 开始，并在其之上添加多层功能，以便在 API 不可用时进行适当的回退。
如何增强效果？功能检测是一种模式，您可以执行支持测试，并根据测试结果做出响应。有多种内置 Web 平台工具和做法可用于执行此操作。
使用 @supports 检查浏览器是否支持 CSS 功能，并根据结果应用规则。
这适用于 CSS 属性和值；如果属性受支持但值不受支持，则会失败，不受支持的属性也会失败。JavaScript 代码可以通过 CSSSupportsRule 访问此属性。
大多数新的 Web 平台功能都附加到现有对象，因此对象样式检测中的“feature”在 JavaScript 中非常有用，其他类似的查找（例如检查元素上的属性或方法）也是如此。
如需发布新型 JavaScript，您可以使用 module/nomodule 模式，以提供更强大的功能，为更现代的浏览器提供更小的载荷，并为旧版浏览器提供后备体验。这样一来，支持 ES 模块的浏览器就可以使用新的 JavaScript 功能基准，例如 Promise、类、箭头函数以及 const 和 let。
您甚至可以结合使用多种形式的特征检测来创建增强型基准。BBC News 团队创造了这个词语，称为“Cutting the Mustard”，意为“达到最低要求”，它可让您向所有人提供核心体验，并仅在达到特定功能检测标准后开始提升体验。
避免设备检测
您应直接测试功能支持情况，而不是根据 User-Agent 字符串做出支持假设。
用户代理字符串从来都不是真正可靠的。 它们需要对现有的每种浏览器、操作系统和设备组合有近乎完美的了解，才能“猜对”。即使这样，它们也容易受到用户欺骗，例如，在移动浏览器上实现桌面版网站重定向通常只需欺骗桌面设备用户代理字符串即可。
此外，浏览器正在努力冻结其用户代理字符串，将用于功能检测的用户代理字符串明确列为弃用原因，这使得它们比以前在识别用户和设备方面更加不可靠。
内容优先
针对 Web 设计的另一个原则是：先从内容着手。例如，包含股票价格图表的实时股票行情信息的核心是股票价格在一定时间内的表格，可能包含用于刷新网站的链接。
然后，您可以使用 JavaScript 和提取请求对其进行增强，以便按计时器更新表的值，也可以使用套接字对其进行增强，以便提供基于推送的实时更新。您可以再次对其进行增强，以便绘制结果图表，可能使用 CSS、SVG 或 Canvas。但核心是从内容开始。
内在设计
- 移动设备是用户体验的重点限制因素。
- 在设计过程中突出内容和核心功能。
- 逐步增强，并在可用时提供高级功能。
这些原则相结合为我们带来了新的功能：固有设计。在 Jen Simmons 的演讲 Designing Intrinsic Layouts 中，Jen Simmons 介绍了如何使用现代 CSS 工具（例如 Grid、Flexbox、流布局和撰写模式）设计和构建界面。她表示，借助这些工具，
您可以真正让布局与我们拥有的内容和我们想要实现的设计相得益彰。
Jen Simmons
借助这项新 CSS，设计师可以重新获得对布局的部分控制权，但其方式符合最新的 Web 设计原则。您可以定义基于内容的规则，通过利用内容的内在属性（例如内容可以有多小或多大、文本的大小以及可用空间）来确定布局，而不是根据固定的屏幕尺寸创建固定表单。借助自适应展示广告，您可以在设计与内容互动时轻松实现自己的设计，而无需控制每个像素的放置位置。
内在布局使有关 Web 上控件的对话形成了闭环，并对其进行了定义。在 Web 上进行控制，并不是要为您网站的每位访问者指定设备、屏幕尺寸、颜色、字体、布局或功能。在 Web 上进行控制，就是编写浏览器将用来组合您的体验的规则，为渐进式 Web 应用中的每位用户打造独特的体验。
网页性能
PWA 的最后一个但同样重要的基础是网页性能。必须为用户提供出色的体验，这样才能尽可能提高转化次数。
Web 性能涉及以下几个步骤：
- 了解可用的以用户为中心的关键指标。
- 为每个指标设置目标。
- 衡量我们的 PWA。
- 通过在代码或服务器中静态运用技术和最佳做法来改进我们的指标。
- 再次衡量。
- 根据用户所处的情境，提升每位用户的直播体验。
目前，网站性能指标不仅衡量内容在屏幕上显示的速度，还衡量网站的交互性以及用户对体验的感受。
核心网页指标
在过去十年间，我们一直在使用不同的指标来衡量网站性能的成效。 目前，一组名为核心 Web 指标的推荐指标重点关注影响性能和用户体验的三个关键方面：
- 加载 - 由 Largest Contentful Paint (LCP) 表示。
- 互动性 - 由 Interaction to Next Paint (INP) 表示。
- 视觉稳定性 - 由 Cumulative Layout Shift (CLS) 表示。
借助 Core Web Vitals，您可以一目了然地了解 PWA 在性能和用户体验方面的优劣。
PWA 基础
您的 PWA 在响应式设计、移动优先、固有设计和 Web 性能方面都应该有坚实的基础，这是为所有用户提供出色体验的基础。