PWA(Progressive Web Apps)学习

PWA, 前端 2019-10-14

2019-10-14

PWA（Progressive Web Apps），中文名为渐进式网页应用。是Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。

1、可以被添加到桌面并有它自己的应用图标。

2、同时，从桌面开启时，会和原生app一样有它自己的“开屏图”。

3、更进一步的，这个Web App在的样子几乎和原生应用一样——没有浏览器的地址栏、工具条，似乎和Native App一样运行在一个独立的容器中。

4、可以离线使用。

5、消息推送。

Service Worker （可以理解为服务工厂）

Manifest （应用清单）

Push Notification（推送通知）

本次做了一个小实验通了一下流程。

使用Favicon.ico & App Icon Generator生成几个不同大小的图标以及一些HTML代码，把该网站提供的代码添加到index.html文件的<head>中。

包含了一个网站的名字、主要颜色以及图标等数据。

short_name:用户主屏幕上的应用名字。

display :设置启动样式，让您的网络应用隐藏浏览器的 URL 地址栏。

start_url :设置启动网址，如果不提供的话，默认是使用当前页面。

theme_color :用来告知浏览器用什么颜色来为地址栏等 UI 元素着色。

background_color:设置启动页面的背景颜色。

icons：就是添加到主屏幕之后的图标。

什么是service worker呢？有了它，网站就可以在离线状态下运行。它是一段运行在浏览器后台进程里的脚本，可独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。

①把以下代码添加到index.html文件的当中：

作用：

从当前页面注册一个新的service worker。

注意：

要想支持service worker 的话，在线上必须以https来访问页面，否则的话，浏览器是不支持的，因为http访问会涉及到service worker安全性问题。

显示注册成功：