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