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

PWA初次体验

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

部分资源来自网络资源及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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hello PWA</title>
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <link rel="stylesheet" href="main.css" rel="external nofollow" >
 <link rel="manifest" href="manifest.json" rel="external nofollow" >
</head>
<body>
 <h3>Hello PWA</h3>
</body>
<script>
 // 检测浏览器是否支持SW
 if(navigator.serviceWorker != null){
 navigator.serviceWorker.register('sw.js')
 .then(function(registartion){
  console.log('支持sw:',registartion.scope)
 })
 }
</script>
</html>

main.css

h3{
 color: #f00;
}

manifest.json

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

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

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

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

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

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

{
 "name": "一个PWA示例",
 "short_name": "PWA示例",
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "#fff",
 "theme_color": "#3eaf7c",
 "icons": [
 {
  "src": "/youhun.jpg",
  "sizes": "120x120",
  "type": "image/png"
 }
 ],
}

sw.js

看网上很多人都安装的hs和ngrokk去调试，在这里为了照顾新手我是直接引用的sw

处理静态缓存，首先定义需要缓存的路径，以及需要缓存的静态文件的列表。

借助 SW 注册完成安装 SW 时，抓取资源写入缓存中。使用了一个方法那就是 self.skipWaiting( ) ，为了在页面更新的过程当中，新的 SW 脚本能够立刻激活和生效。

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");
var cacheStorageKey = 'minimal-pwa-1'
var cacheList=[
 '/',
 'index.html',
 'main.css',
 'youhun.jpg'
]
self.addEventListener('install',e =>{
 e.waitUntil(
 caches.open(cacheStorageKey)
 .then(cache => cache.addAll(cacheList))
 .then(() => self.skipWaiting())
 )
})

处理动态缓存，我们监听 fetch 事件，在 caches 中去 match 事件的 request ，如果 response 不为空的话就返回 response ，最后返回 fetch 请求，在 fetch 事件中我们可以手动生成 response 返回给页面。

更新静态资源，缓存的资源会跟随着版本的更新会过期的，所以会根据缓存的字符串名称清除旧缓存。在新安装的 SW 中通过调用 self.clients.claim( ) 取得页面的控制权，这样之后打开页面都会使用版本更新的缓存。旧的 SW 脚本不在控制着页面之后会被停止，也就是会进入 Redundant 期。

self.addEventListener('fetch',function(e){
 e.respondWith(
 caches.match(e.request).then(function(response){
  if(response != null){
  return response
  }
  return fetch(e.request.url)
 })
 )
})
self.addEventListener('activate',function(e){
 e.waitUntil(
 //获取所有cache名称
 caches.keys().then(cacheNames => {
  return Promise.all(
  // 获取所有不同于当前版本名称cache下的内容
  cacheNames.filter(cacheNames => {
   return cacheNames !== cacheStorageKey
  }).map(cacheNames => {
   return caches.delete(cacheNames)
  })
  )
 }).then(() => {
  return self.clients.claim()
 })
 )
})

部署

我们可以把当前pwa目录的所有内容都扔进服务器中，或者coding Pages和gitHub Pages也是可以的，当然，记得开启https。在上变介绍过SW的权利比较大，为了安全性，我们使用https协议来访问。

试着访问一下，我们这里用的coding Pages并且绑定了自己的域名

打开 chrom 的调试工具，打开 application ，点击 service workers 之后我们会发现 sw.js 脚本已经存到了 SW 中 。

我们打开 Network 刷新页面一下，看看，我们的页面资源来自 SW 而不是其他的地方，在 Console 中也打印出了我们在 index.html 中判断的语句，浏览器支持就会打印出这一句话。

接下来我们断网操作，在 Application 中给 Offline 打上对勾就行啦。然后刷新页面，我们仍然能看到之前的页面，原因就是我们在上图看到，他的资源是从 SW 上获得到的。当我们第一次打开这个页面的时候，Resopnse 对象被存到了 Cache Storage （ 定义在 SW 规范中 ，相关资料请同学们自行查询啦 ）中，我们看下图：

通过存放到 Cache Storage 中，我们下次访问的时候如果是弱网或者断网的情况下，就可以不走网络请求，而直接就能将本地缓存的内容展示给用户，优化用户的弱网及断网体验。

这个时候肯定会有同学在想，如果内容更新了，那么页面展示的内容是新内容呢还是旧内容呢？下面我们操作一下，打开 index.html 文件，我们在 body 中添加一个 p 标签 ，然后回到页面刷新。

我们看到，页面上的内容并没有显示出我刚刚添加的那个 p 标签。这说明了，我们拿到的数据还是从 Cache Storage 中获取到的，Cache Storage中的内容并没有更新，强制刷新也不行哦，那么我们怎么才能让我刚刚添加的那个 p 标签显示出来呢。

我们打开 sw.js 脚本文件，我们修改一下 cacheStorageKey。

修改后，我们再次打开该网址，强制刷新下或者关掉浏览器重新打开。

页面中出现了刚刚添加的P标签，我们再看一下 Cache Storage 中的缓存名字，已经被修改。

总结

如果是使用coding或者gitHub提供的pages服务，则需要注意最好绑定下独立域名。如果不绑定则注意下文件请求路径即可。

研究PWA门槛不低，部署的服务器要求HTTPS，ServiceWorker涉及API众多，需要单独学习，另外npm中也已经有这个包了https://www.npmjs.com/package/web-pwa ，玩玩可以，真正部署到项目生产环境可能坑很多，但有坑填坑，不折腾还叫前端么。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    PWA初次体验 前言:本示例不用安装任何东西 部分资源来自网络资源及PWA官网,不要把PWA想象的太复杂,跟着示例走一下,你行的. PWA介绍 一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序. 官网: https://developers.google.com/web/progressive-web-apps/ 是 Google 在 2015 年提出,2016年6月才推广的项目.是结合了一系列现代Web技术的组合,在网页应用中实现和

  • 在云服务器上使用iis搭建一个ftp站点的方法图解

    如果你的服务器还没安装ftp功能,册需要先安装ftp服务: 1.打开服务器管理器>添加角色和功能 2.安装完以后打开iis管理器,我这里安装的是iis6 3.右键'网站'>添加ftp站点 设置名字和物理路径 4.选择ip 5.选择权限:读取.写入:基本身份验 完成 现在可是试着在pc端链接ftp,使用leadftp leadftp解压后可直接使用,选择站点>站点管理器 输入服务器ip,登录服务器时的用户名和密码链接,默认端口是21 左侧是你本地地址,右侧是服务器ftp地址,可双击上传或下

  • 阿里云快速搭建一个静态网站的方法步骤

    前言: 作为一个初级程序员,都梦想着自己能搭建一个自己的个人网站,同时展示给其他人浏览.如果你刚开始接触可看一下,我建议先给自己的静态网站发布到服务器上去. 准备: 1.申请注册一个服务器 申请注册一个云服务器,可以阿里云.腾讯云等等.学生党使用服务器有优惠哈~ 2.配置ftp\ssh环境 ps:我知道的是阿里云已经把ftp和ssh配置好了,如果有可以跳过此步骤. 具体步骤: 为了方便你后期的操作和使用,你需要配置ftp和ssh环境.(ftp:文件传输协议,通俗说就是上传下载文件:ssh:安全外

  • 手把手带你搭建一个node cli的方法示例

    前言 前端日常开发中,会遇见各种各样的 cli,使用 vue 技术栈的你一定用过 @vue/cli ,同样使用 react 技术栈的人也一定知道 create-react-app .利用这些工具能够实现一行命令生成我们想要的代码模版,极大地方便了我们的日常开发,让计算机自己去干繁琐的工作,而我们,就可以节省出大量的时间用于学习.交流.开发. cli 工具的作用在于它能够将我们开发过程中经常需要重复做的事情利用一行代码来解决,比如我们在写需求的时候每新增一个页面就需要相应的增加该页面的初始化代码,

  • 搭建一个nodejs脚手架的方法步骤

    1 前言 1.1 像我们熟悉的 vue-cli,taro-cli 等脚手架,只需要输入简单的命令 taro init project ,即可快速帮我们生成一个初始项目.在日常开发中,有一个脚手架工具可以用来提高工作效率. 1.2 为什么需要脚手架 减少重复性的工作,从零创建一个项目和文件. 根据交互动态生成项目结构和配置文件等. 多人协作更为方便,不需要把文件传来传去. 1.3 怎样来搭建呢? 脚手架是怎么样进行构建的呢,我是借助了 taro-cli的思路. 1.4 本文的目标读者 1 想要学习

  • 使用docker compose搭建一个elk系统的方法

    找了不少使用 docker-elk 搭建的博客, 英文的阅读吃力不说, 镜像源也是慢的让人头皮发麻, 因此重新编排了一个docker-compose,源都是从 https://hub.docker.com/ 上找的, 即使拉的国内镜像源应该也能很好的支持了吧? 环境 Docker 18.06.0-ce docker-compose 1.22.0 给每个容器最少分配 1G 的内存 软件版本 logstash: 5.* elasticsearch: 5.* kibana: 5.* 启动前的配置 在各

  • Python编程快速上手——strip()函数的正则表达式实现方法分析

    本文实例讲述了Python strip()函数的正则表达式实现方法.分享给大家供大家参考,具体如下: 题目如下: 写一个函数,它接受一个字符串,做的事情和strip()字符串方法一样.如果只传入要去除的字符串(原字符串),没有其他参数,那么就从该字符串首尾去除空白字符串.否则,函数第二个参数指定的字符串将从该字符串中去除 思路如下: 补充:字符串的str.strip()方法,去除字符串首尾指定的字符,只能去除头尾两边,不能去除中间 程序需要做以下的事情: 接受一个字符串和要去除的字符 调用函数去

  • 超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:https://vuepress.vuejs.org/ 类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽.当然搭建成博客也不成问题. Vuepress特点 响应式,也可以自定义主题与hexo类似 内置markdown(还增加了一些扩展),并且可以在其使用Vue组件 Google Analytics 集成 PWA 自动生成Service Worker 快速上

  • 教你快速搭建Node.Js服务器的方法教程

    前言 Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,也可以理解为服务器端运行的 JavaScript.JS 作为一门编程语言,是运行在称为 JS 运行时的虚拟机中的,而在 I/O 功能上,JS 更多依赖于宿主环境.一般我们遇到的宿主环境主要是浏览器,Node.js 则是在服务器端运行的高速 JavaScript 解释器. 近期遇到一个小型网站需要建立一个简单的 Web 服务器,原本想用 SpringMVC 解决,无奈 Spring 的哲学博大精深,自己才疏学浅,不能

  • IDEA上面搭建一个SpringBoot的web-mvc项目遇到的问题

    IDEA上面搭建一个SpringBoot的web-mvc项目遇到的问题

    这几天一直在研究IDEA上面怎么搭建一个web-mvc的SpringBoot项目,看网上的教程一步步的搭建,可是还是出现一堆的问题. 为了让大家以后少走一些弯路,我在这里分享一下我这几天研究的成果,也希望对大家能有所帮助. 这里先介绍一下各种环境的配置信息:idea2016.2.1  jdk1.8.0_31 因为SpringBoot中是内置tomcat的,所以也就不需要额外的tomcat配置了,现在开始讲如何在idea上面搭建SpringBoot web-mvc项目了 步骤一:在IDEA中新建一

随机推荐