PWA 应用是什么?PWA网站怎么创建?

最近一段时间陆陆续续有眼尖的小伙伴发现,在浏览器网址输入框右侧出现了一个小小的下载图标。点击后,会有安装应用的提示,接着点击安装,就会弹出一个 Chrome 应用的文件夹,此时当前网页变成了一个独立的窗口,和其他应用一样,下面也多了小图标,在应用程序里也能找到,还能卸载。手机版 Chrome 也是如此,可以安装到桌面上,快捷打开。

这到底是什么呢?又是什么技术呢?有人觉得这是把某个网页套上了 Chrome 的壳,包装成了一个桌面 app,是个单独的进程。

从体验上看,它有点像我们在手机上用过的小程序、快应用,依托于某个平台(小程序依托微信、支付宝等,这里则是浏览器),安装十分轻量快捷。它的学名叫做 PWA(Progressive Web App),即渐进式网页应用,是利用 Web 平台技术构建的应用程序,但能提供类似特定于平台(主要是 IOS/Android)的 App 的用户体验。

PWA 可不是什么新技术,它是 Google 在 2016 年提出的,2017 年落地。在国外发展得如火如荼,然而由于国内的特殊情况(安卓版本被阉割以及各种浏览器的差异),再加上苹果的态度(有绕过其审核机制的嫌疑,所以非常敏感),它很快就被后来出现的小程序超越了,在国内少有人关注。PWA 有很多优点,包括:

PWA 可以安装在设备上,这意味着:

PWA 既可以从平台的应用商店安装,也可以直接从网络安装。

PWA 能够像特定于平台的应用程序那样安装,并且可以自定义安装过程。

安装后,PWA 会在设备上获得一个应用程序图标以及特定于平台的外观。

安装后,PWA 可以作为独立应用程序启动,而不是在浏览器中以网站的形式打开。

PWA 可以在后台和离线状态下运行:一般的网站只有在页面加载到浏览器中时才处于活动状态。

而 PWA 可以做到——

在设备没有网络连接时正常工作。

在后台更新内容。

响应来自服务器的推送消息。

使用操作系统的通知系统显示通知。

PWA 可以占据整个屏幕,而不是在浏览器的 UI 中运行。

PWA 可以与设备集成,注册为共享目标和源,并访问设备功能。

PWA 可以在应用商店中分发,也可以通过网络公开分发。

那么,如何把网站改造成 PWA 呢?

我们打开 deno.land 的网页,找到 manifest 文件(也就是 PWA 中的 Web App 清单)。打开后会发现这就是个 JSON 文件,内容非常简单,定义了名称、主题颜色、背景颜色和一堆不同大小的图标。我们可以依葫芦画瓢,在某个 SPA 的 Vue 项目中,在 public 目录下新增一个 manifest.json 文件,修改 index.html,添加一句 manifest 的引用,这样就可以了。

是不是特别简单?不过有几点需要注:

1、图标要用相对路径,不能是 URL 地址。为了保证安全的上下文环境,规范要求网站必须开启 HTTPS,不过在本地开发时,使用 localhost 或 127.0.0.1 也是可以的。

2、name、icons、start_url 和 display 是必需的。

3、display 的可选值有 fullscreen(全屏)、standalone(独立 App)、minimal-ui(比前者多了控制导航的最小 UI 元素集)、browser(像普通网站一样在浏览器新的选项卡或窗口打开)。

4、如果网站想要更好的用户体验,就需要考虑离线与后台操作,这时就要加入 Service Worker 支持。

本文以 Deno 官网的下载图标为例,引出了 PWA(渐进式网页应用)的概念。原则上只需要修改你的 index.html 并新增一个 manifest 清单,就能让你的网站变成一个 PWA。不过在实际项目中,为了获得更好的用户体验,还需要考虑离线与后台操作(后台更新、消息通知等)。

未经允许不得转载:WebApp中文站-PWA平台 » PWA 应用是什么?PWA网站怎么创建?

评论