主要观点：

• 新开发者常认为构建高质量应用需使用 SPA 框架，作者认为即便在 SPA 革命之前，多页应用也能提供良好用户体验，且通过实验发现关注细节可创建出色的服务器渲染多页应用。

• 破除关于多页应用的 7 个常见误解：

  • 误解 1：多页应用页面过渡慢，实则浏览器已改进，可通过使用如 PJAX、Turbolinks、HTMX Boost 等库减少加载时间，或利用服务工作者进行客户端缓存来减少资产重新下载和评估。
  • 误解 2：多页应用不能离线操作和保存更新重试，服务工作者可缓存一切使应用离线运行，Workbox 可配置支持离线场景。
  • 误解 3：多页应用页面过渡时会闪白，2019 年起多数浏览器在获取下页所需资产或超时前不会绘制下一屏，此仅在同一源/域内有效。
  • 误解 4：多页应用无法实现华丽的跨文档页面过渡，Chrome 126 推出跨文档视图过渡，可仅用 CSS 或 CSS 和 JavaScript 实现。
  • 误解 5：使用 HTMX 或多页应用时，每个用户动作都需在服务器端，可利用组件岛架构和 WebComponents 等实现部分交互。
  • 误解 6：直接操作 DOM 慢，应使用 React/Virtual DOM，但对于大多数应用虚拟 DOM 并非必要，Svelte 团队有相关文章阐述。
  • 误解 7：无需为每个小交互编写 JavaScript，借助浏览器技术可仅用 CSS 和 HTML 实现一些交互，如通过 HTML 输入复选框和 HTMX 实现元素显示隐藏。
• 结论：2024 年浏览器已取得很大进步，可利用浏览器工具（HTML、CSS、少量 JavaScript）构建交互式离线应用，无需牺牲太多用户体验。

关键信息：

• 介绍服务工作者的概念、作用及在多页应用中的实现步骤，包括创建sw.js文件、列表缓存文件、定义缓存策略、使用 Workbox 生成服务工作者等。
• 提及“Speculation Rules API”可用于预渲染页面以实现即时页面导航。
• 展示多页应用在各种交互场景下的实际效果，如通过视频演示页面过渡、离线操作、跨文档过渡等。

重要细节：

• 提供了多个视频链接，如展示不同缓存和预渲染效果的视频、跨文档过渡视频等，以直观展示多页应用的性能改进和交互效果。
• 给出具体的代码示例，如用于实现元素显示隐藏的 HTML 和 CSS 代码、使用 Workbox 的配置代码等，帮助读者更好地理解和实践。