PWA介绍及快速上手搭建一个PWA应用的方法-创新互联

PWA初次体验

创新互联公司是一家以网络技术公司，为中小企业提供网站维护、成都做网站、网站设计、外贸营销网站建设、网站备案、服务器租用、国际域名空间、软件开发、微信平台小程序开发等企业互联网相关业务，是一家有着丰富的互联网运营推广经验的科技公司，有着多年的网站建站经验，致力于帮助中小企业在互联网让打出自已的品牌和口碑，让企业在互联网上打开一个面向全国乃至全球的业务窗口：建站联系电话：13518219792

前言：本示例不用安装任何东西

部分资源来自网络资源及PWA官网，不要把PWA想象的太复杂，跟着示例走一下，你行的。

PWA介绍

一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。

官网： https://developers.google.com/web/progressive-web-apps/

是 Google 在 2015 年提出，2016年6月才推广的项目。是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验。

官网上给出 PWA 的宣传是 ： Reliable （ 可靠的 ）、 Fast （ 快速的 ）、 Engaging （ 可参与的 ）

Reliable：当用户从手机主屏幕启动时，不用考虑网络的状态是如何，都可以立刻加载出 PWA。

Fast：这一点应该都很熟悉了吧，站在用户的角度来考虑，如果一个网页加载速度有点长的话，那么我们会放弃浏览该网站，所以 PWA 在这一点上做的很好，他的加载速度是很快的。

Engaging： PWA 可以添加在用户的主屏幕上，不用从应用商店进行下载，他们通过网络应用程序 Manifest file 提供类似于 APP 的使用体验（ 在 Android 上可以设置全屏显示哦，由于 Safari 支持度的问题，所以在 IOS 上并不可以 ），并且还能进行 ”推送通知” 。

PWA关键技术

• Service Worker （可以理解为服务工厂）
• Manifest （应用清单）
• Push Notification （推送通知）

Service Worker

以下用SW来表示

SW 是什么呢？这个是离线缓存文件。我们 PWA 技术使用的就是它！SW 是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门，因为使用了它，才会有的那个 Reliable 特性吧，SW 作用于 浏览器于服务器之间，相当于一个代理服务器。

浏览器支持

顺便带一句：目前只能在 HTTPS 环境下才能使用SW，因为SW 的权利比较大，能够直接截取和返回用户的请求，所以要考虑一下安全性问题。

事件机制

功能(还是比较逆天的)

• 后台数据的同步
• 从其他域获取资源请求
• 接受计算密集型数据的更新，多页面共享该数据
• 客户端编译与依赖管理
• 后端服务的hook机制
• 根据URL模式，自定义模板
• 性能优化
• 消息推送
• 定时默认更新
• 地理围栏

生命周期

Parsed （ 解析成功 ）： 首次注册 SW 时，浏览器解决脚本并获得入口点，如果解析成功，就可以访问到 SW 注册对象，在这一点中我们需要在 HTML 页面中添加一个判断，判断该浏览器是否支持 SW 。

Installing （ 正在安装 ）：SW 脚本解析完成之后，浏览器会尝试进行安装，installing 中 install 事件被执行，如果其中有 event.waitUntil ( ) 方法，则 installing 事件会一直等到该方法中的 Promise 完成之后才会成功，如果 Promise 被拒绝，则安装失败，SW会进入 Redundant（ 废弃 ）状态。

Installed / Waiting （安装成功/等待中）：如果安装成功，SW 将会进入这个状态。

Activating （ 正在激活 ）：处于 waiting 状态的 SW 发生以下情况，将会进入 activating 状态中：

当前已无激活状态的 worker 、 SW脚本中的 self.skipWaiting（）方法被调用 （ ps： self 是 SW 中作用于全局的对象，这个方法根据英文翻译过来也能明白什么意思啦，跳过等待状态 ）、用户已关闭 SW 作用域下的所有页面，从而释放了当前处于激活状态的 worker、超出指定时间，从而释放当前处于激活状态的 worker

Activated （ 激活成功 ）：该状态，其成功接收了 document 全面控制的激活态 worker 。

Redundant （ 废弃 ）：这个状态的出现时有原因的，如果 installing 事件失败或者 activating 事件失败或者新的 SW 替换其成为激活态 worker 。installing 事件失败和 activating 事件失败的信息我们可以在 Chrome 浏览器的 DevTools 中查看

Manifest

Web App Manifest 是一个 W3C 规范，它定义了一个基于 JSON 的 List 。Manifest 在 PWA 中的作用有：

​ 能够将你浏览的网页添加到你的手机屏幕上

​ 在 Android 上能够全屏启动，不显示地址栏 （ 由于 Iphone 手机的浏览器是 Safari ，所以不支持哦）

​ 控制屏幕 横屏 / 竖屏 展示

​ 定义启动画面

​ 可以设置你的应用启动是从主屏幕启动还是从 URL 启动

​ 可以设置你添加屏幕上的应用程序图标、名字、图标大小

Push Notification

Push 和 Notification 是两个不同的功能，涉及到两个 API 。

​ Notification 是浏览器发出的通知消息。

​ Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 SW ，Notification： SW 将更新的信息推送给用户。

PWA示例

准备

我们先创建一个关于 PWA 的项目文件夹，

进入文件夹下我们准备一张 120x120的图片一张，作为我们的应用程序图标。

创建一个 index.html 文件

创建一个 main.css 文件

创建一个 manifest.json 文件

创建一个 sw.js 文件

index.html

 
 
 
 
 


 
Hello PWA

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻名称：PWA介绍及快速上手搭建一个PWA应用的方法-创新互联
地址分享：http://cqcxhl.cn/article/dghgjg.html