通往 PWA 之路——第一部分

通往 PWA 之路

这篇文章最初发布在我的个人博客上。

正如我在上一篇文章中提到的，
我为我的婚礼搭建了一个 PWA 应用。
在这篇文章中，我也承诺会写一篇更深入的文章，介绍我的 PWA 应用的技术细节。

所以 ...

Promise.resolve(writeBlogPost()).then(post => readBlog(post));

通往 PWA 之路

PWA（渐进式Web应用）有望成为主流。
正如我在之前的文章中提到的，原生应用的问题在于它们必须通过专门的应用商店分发。而要通过这些商店分发应用，开发者需要注册一个账号，这需要一次性或定期付费。
（我知道像F-Droid这样的开源应用商店，但我认为绝大多数智能手机用户并不了解。）

这正是 PWA 发挥作用的地方！

听起来很酷，但PWA究竟是什么？

PWA最重要的优势在于，它能够为任何现有的Web应用程序添加渐进式功能。PWA功能可以无缝集成到现有应用程序中，只要添加得当，它们不仅能在支持的浏览器中正常显示，而且不会在尚不支持这些功能的浏览器上造成任何差异或错误。

我认为构成 PWA 的三个核心组成部分如下：

1. 响应式、引人入胜的设计
2. 现代 JavaScript API
3. 服务人员
4. HTTPS

本文主要讨论 PWA 的设计，后续还会推出更多相关文章。
（HTTPS 除外。这里你只需要知道，功能齐全的 PWA 需要 HTTPS。原因会在关于 Service Worker 的文章中解释。如果你还没有有效的 TLS 证书，我推荐使用Let's Encrypt 的免费 SSL/TLS 证书。此外，GitHub Pages也支持 HTTPS，并且允许使用自定义域名。）

响应式设计

多年来，智能手机应用中逐渐形成了某些用户界面/用户体验模式。
其中最显著的两种风格无疑是iOS界面设计规范和谷歌的Material Design设计语言。

这两份风格指南详细介绍了如何为相应平台设计用户界面，以及如何处理用户交互。遵循这些指南可以让新用户更轻松地上手您的应用，因为整体外观和感觉已经让他们感到“熟悉”。

这些准则同样适用于渐进式 Web 应用 (PWA)。由于 PWA 可以作为完整网页的轻量级替代方案（例如Twitter Lite），甚至可以完全替代原生应用，因此无论用户是在使用原生应用还是访问 PWA，都应该感到宾至如归。

移动优先

传统的网页设计方法是先优化网页在桌面浏览器上的显示效果，然后再考虑如何在移动浏览器上呈现良好的效果。而移动优先的设计理念则恰恰相反，它在设计网页时就充分考虑了移动设备的体验。不仅要针对智能手机进行设计，还要运用各种技术手段，确保网页在桌面浏览器上也能获得良好的视觉效果。

为了实现这一点，可以依赖像 Twitter 的Bootstrap或Material Design Lite这样的 CSS 框架，但了解 CSS 媒体查询 [ 1 , 2 ] 肯定没有坏处。

随着移动优先用户界面的普及，Web 应用与原生应用之间的另一个主要区别在于，Web 应用仍然在浏览器中运行。

PWA 的一个优点是，它们可以像原生应用一样“安装”到设备上（目前准确地说是 Android 设备）。而
实现这一点的前提是需要一个所谓的“应用清单”。

Web应用程序清单

Web应用程序清单包含有关Web应用程序的元数据。它实际上是一个简单的JSON文件，但通常也会将该文件命名为其他名称。

manifest.webmanifest

清单文件允许配置应用程序名称、图标、显示样式、配色方案等等。

以下列表显示了 wddng 的清单文件内容：

{
  "name": "wddng",
  "short_name": "wddng",
  "start_url": "./index.html",
  "scope": ".",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "description": "Keine Hochzeit ohne Technik!",
  "dir": "ltr",
  "lang": "en-US",
  "orientation": "any",
  "icons": [
    {
      "src": "./src/images/icons/app-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "./src/images/icons/app-icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "./src/images/icons/app-icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "./src/images/icons/app-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "./src/images/icons/app-icon-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "./src/images/icons/app-icon-384x384.png",
      "type": "image/png",
      "sizes": "384x384"
    },
    {
      "src": "./src/images/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

name这部分short_name内容应该很容易理解。name它包含完整的应用程序名称，例如会显示在启动画面上。short_name它还会用于应用程序图标。

此start_url设置用于配置应用程序启动时加载的 URL。scope用户还可以通过一个可选的应用程序配置项来设置 PWA 清单应应用的范围。当导航到范围之外时，Web 应用程序将作为普通网页提供服务。此
设置"display": "standalone"将使 Web 应用程序像原生应用程序一样显示，包括启动器图标、隐藏的 URL 地址栏、隐藏的导航元素等。

目前有很多可用的选项，应用程序清单规范仍在积极开发中。根据最新的草案，也可以通过清单选项安装 Service Worker。

我不会详细介绍所有可用的值，如需了解解释性概述，您可以查看文章末尾提供的资源。

包括一份清单

<link ...>使用关系设置为 的标签包含清单文件"manifest"。

<link rel="manifest" href="/manifest.webmanifest">

附注：使用parcel.js进行打包

截至撰写本文时，parcel.js只能*.webmanifest正确打包以 .htm 结尾的清单文件。

实用资源

• Web应用程序清单规范
• MDN 文档：Web 应用程序清单
• 浏览器对应用程序清单的支持。

概括

响应式设计结合应用清单文件，可以使您的 Web 应用更适合移动设备，并方便安装。
此外，还可以通过清单文件对应用主题进行部分自定义。

向 Web 应用程序添加清单是我们迈向功能齐全的渐进式 Web 应用程序的第一步。

敬请期待更多精彩内容！

这么久

西蒙