渐进式Web应用(PWA)-对前端技术的挑战-CSDN博客

本文链接：https://blog.csdn.net/qq_36969894/article/details/87693788

1.什么是pwa?
　 PWA是指可以在任何浏览器上执行的支持互联网的应用程序，它是由服务器端脚本(PHP和ASP)和客户端脚本(JavaScript和HTML)组成的。
　一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。解决了哪些问题？可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能-实现了消息推送。
　
2.PWA的原理是什么，它是如何开始工作的

    第一步：使用HTTPS
    第二步：创建一个应用程序清单（Manifest）
    第三步：创建一个 Service Worker
    第四步：创建可用的离线页面

3.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">
	  <link rel="manifest" href="manifest.json">
	</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和ngrok去调试，
在这里为了照顾新手我是直接引用的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 中判断的语句，浏览器支持就会打印出这一句话。

 通过存放到 Cache Storage 中，我们下次访问的时候如果是弱网或者断网的情况下，
 就可以不走网络请求，而直接就能将本地缓存的内容展示给用户，优化用户的弱网及断网体验。
这个时候肯定会有同学在想，如果内容更新了，那么页面展示的内容是新内容呢还是旧内容呢？
下面我们操作一下，打开 index.html 文件，我们在 body 中添加一个 p 标签 ，然后回到页面刷新。
我们看到，页面上的内容并没有显示出我刚刚添加的那个 p 标签。这说明了，
我们拿到的数据还是从 Cache    Storage 中获取到的，
Cache Storage中的内容并没有更新，强制刷新也不行哦，
那么我们怎么才能让我刚刚添加 的那个 p 标签显示出来呢。我们打开 sw.js 脚本文件，我们修改一下   cacheStorageKey。

总结

PWA的核心目标并不是想取代App，就像电子书的出现并没有取代纸书一样，它真正想做的相信还是不断改善用户体验，将网络与应用的长处结合起来。
尽管PWA身后是Web的标准与规范，在使用体验上也更接近原生App，但有时问题核心并不只取决于技术与体验，而更多在对开发者的互惠上，无论是PWA
，小程序，还是快应用，哪个可以让开发者和商家更快更便捷地搭建自己的服务并推广出去进而形成商业闭环才是最重要的。
当然，PWA作为开源协作的典范，以及开放的Web特性，人们还是愿意看到它完善的那一天。
只是在那一天来之前，国内局面还是要靠BAT这些更懂商业而不是情怀的公司所掌控