189 8069 5689

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 的权利比较大，能够直接截取和返回用户的请求，所以要考虑一下安全性问题。

PWA介绍及快速上手搭建一个PWA应用的方法

事件机制

PWA介绍及快速上手搭建一个PWA应用的方法

功能(还是比较逆天的)

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

生命周期

PWA介绍及快速上手搭建一个PWA应用的方法

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 文件

PWA介绍及快速上手搭建一个PWA应用的方法

index.html




 
 Hello PWA
 
 
 


 
Hello PWA

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


名称栏目：PWA介绍及快速上手搭建一个PWA应用的方法-创新互联
网址分享：http://jkwzsj.com/article/dghgjg.html

其他资讯