国内大厂的 APP 如微信、支付宝、抖音、京东等等都搞了自己平台的小程序,本质上其实都是一种集成了各自平台能力的 Web 应用。国外没有这种东西是因为行业更加规范,没必要多此一举,因为 PWA 完全满足需求了。

PWA 简介

渐进式 Web 应用(Progressive Web App,PWA)是一个使用 web 平台技术构建的应用程序,但它提供的用户体验就像一个特定平台的应用程序。

它像网站一样,PWA 可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样,可以安装在设备上,可以离线和在后台运行,并且可以与设备和其他已安装的应用程序集成。

iOS 的添加到主屏幕(书签)功能

在 iOS 上,只需要给网页添加这两行代码,就可以实现一个最简单的 PWA:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

解释一下:

  • apple-mobile-web-app-capable 是指应用以全屏模式运行,否则不会在全屏中运行(即直接在 Safari 浏览器中打开)。
  • apple-mobile-web-app-status-bar-style 用于定义状态栏文字颜色的,可选值有 defaultblack-translucentblack
  • black-translucent 为透明,内容滚动的时候,透过状态栏可以看到下面的内容。
  • defaultblack 为不透明,看不到下面的内容。

当然,这两个行为只会在你把这个页面添加到主屏幕(书签)时才会生效。

注意: 这个功能需要你的页面是或项目是单页面应用才行,比如 vue 项目。如果是多页面的项目,在使用的时候不太友好,跳转时上面和下面会多出工具栏和地址栏。

iOS 也支持更多的设置,参见官方文档 Supported Meta Tags

PWA 应用的能力

上面的 iOS 书签功能只是在传统的 HTML 网页上增加了两个 meta 标签,事实上,真正的 PWA 应用支持很多功能,甚至可以实现类似原生 App 的安装卸载功能,可以参见
渐进式 Web 应用(PWA),有十分详细的介绍,这里不再赘言。

参考文档

标签: PWA