你的首个 Progressive Web App

Posted 2020-09-06 愉快的一天

什么是 Progressive Web App?

Progressive Web Apps 是:

• 渐进增强 - 能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则。
• 响应式用户界面 - 适应任何环境：桌面电脑，智能手机，笔记本电脑，或者其他设备。
• 不依赖网络连接 - 通过 service workers 可以在离线或者网速极差的环境下工作。
• 类原生应用 - 有像原生应用般的交互和导航给用户原生应用般的体验，因为它是建立在 app shell model 上的。
• 持续更新 - 受益于 service worker 的更新进程，应用能够始终保持更新。
• 安全 - 通过 HTTPS 来提供服务来防止网络窥探，保证内容不被篡改。
• 可发现 - 得益于 W3C manifests 元数据和 service worker 的登记，让搜索引擎能够找到 web 应用。
• 再次访问 - 通过消息推送等特性让用户再次访问变得容易。
• 可安装 - 允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店。
• 可连接性 - 通过 URL 可以轻松分享应用，不用复杂的安装即可运行。

什么是应用外壳(App Shell)

App Shell是应用的用户界面所需的最基本的 html、CSS 和 javascript，也是一个用来确保应用有好多性能的组件。它的首次加载将会非常快，加载后立刻被缓存下来。这意味着应用的外壳不需要每次使用时都被下载，而是只加载需要的数据。

应用外壳的结构分为应用的核心基础组件和承载数据的 UI。所有的 UI 和基础组件都使用一个 service worker 缓存在本地，因此在后续的加载中 Progressive Web App 仅需要加载需要的数据，而不是加载所有的内容。

换句话说，应用的壳相当于那些发布到应用商店的原生应用中打包的代码。它是让你的应用能够运行的核心组件，只是没有包含数据。

为什么使用基于应用外壳的结构?

使用基于应用外壳的结构允许你专注于速度，给你的 Progressive Web App 和原生应用相似的属性：快速的加载和灵活的更新，所有这些都不需要用到应用商店。

设计应用外壳

第一步是设计核心组件

问问自己：

• 需要立刻显示什么在屏幕上？
• 我们的应用需要那些关键的 UI 组件？
• 应用外壳需要那些资源？比如图片，JavaScript，样式表等等。

我们将要创建一个天气应用作为我们的第一个 Progressive Web App 。它的核心组件包括：

在设计一个更加复杂的应用时，内容不需要在首次全部加载，可以在之后按需加载，然后缓存下来供下次使用。比如，我们能够延迟加载添加城市的对话框，直到完成对首屏的渲染且有一些空闲的时间。