PWA介绍PWA（Progressivewebapps，渐进式Web应用程序）使用现代WebAPI和传统的渐进式增强策略来创建跨平台的Web应用程序。PWA优点PWAisdiscoverable,easytoinstall,linkable,networkindependent,progressive,reusable,responsiveandsecureCoreguidelinesserviceworkersdatacacheaddedtothehomescreenindexedDBdatastorage数据推送serviceworkers离线缓存1、Lostnetworkconnection出现在背景。即使是世界上最好的网络应用程序也无法下载，这是一种糟糕的体验。虽然有很多技术试图解决这个问题。随着离线页面的出现，一些问题得到了解决。然而，最主要的问题是目前还没有一个很好的整体机制来控制资源缓存和自定义网络请求。之前的尝试——AppCache——似乎是一个很好的方法，因为它可以很容易地指定哪些资源需要离线缓存。但是，它假定您在使用它时会遵循许多规则，如果您不严格遵守这些规则，它会使您的应用程序变得一团糟。有关APPCache的更多详细信息，请参阅JakeArchibald的文章：ApplicationCacheisaDouchebag。后来，服务人员出现了。虽然ServiceWorker的语法比AppCache更复杂，但是你可以使用JavaScript来更精细地控制AppCache的静默行为。有了它，您可以解决当前的离线应用问题，同时做更多事情。ServiceWorker允许你的应用程序首先访问本地缓存资源，因此当它处于离线状态时，它仍然可以在通过网络接收更多数据之前提供最基本的功能。在浏览器的版本中，很多功能默认是不开启的。如果您发现示例代码在当前版本的浏览器中无法正常运行，您可能需要启用浏览器的相关配置：FirefoxNightly：访问about:config，将dom.serviceWorkers.enabled的值设置为true;重启浏览器;ChromeCanary：访问chrome://flags并启用experimental-web-platform-features；重启浏览器（注意：Chrome默认不支持某些功能）；Opera：访问opera://flags并启用ServiceWorker支持；重启浏览器ServiceWorkers网络要求必须在HTTPS下运行。本地开发可以使用localhost3，基本流程1、serviceworker首先通过navigator中的'serviceWorker'判断浏览器是否支持serviceworkerif('serviceWorker'innavigator){...}2、serviceworkerURL通过serviceWorker.register()获取并注册navigator.serviceWorker.register('/pwa/serviceWorker.js',{scope:'/pwa/'}).then(function(){console.log('registered')}).catch(function(e){console.log(e);})3.如果注册成功，serviceworker会运行在ServiceWorkerGlobalScope环境中；这是一种特殊类型的wokercontext运行环境，独立于主运行线程（执行脚本），同时没有访问DOM的能力。此时js的this指的是ServiceWorkerGlobalScope对象，而不是window4。当serviceworker控制的页面打开后，页面会尝试通过install方法安装serviceworker（开始填充indexDB和缓存站点资源）。self.addEventListener('安装',function(e){...});5.当install事件的handler被执行时，可以认为serviceworker安装完成。6.下一步是激活。安装serviceworker后，它将收到一个激活事件。onactivate的主要目的是清理在以前版本的serviceworker脚本中使用的资源。self.addEventListener('activate',function(event){...})7.基本流程安装和激活：填充你的缓存注册完成后会触发install事件。install事件通常用于填充浏览器的离线缓存功能。为实现这一点，我们使用ServiceWorker的新标志性存储API——缓存——serviceworker上的一个全局对象，它允许我们存储网络响应发送的资源并根据它们的请求生成密钥。此API的工作方式类似于浏览器的标准缓存，但特定于您的域。它会一直存在，直到你告诉它不再存储它，你有完全的控制权。注意：并非所有浏览器都支持缓存API。（有关更多信息，请参阅浏览器支持部分。）如果您现在想使用它，请考虑采用polyfill，例如Googletopeka演示，或将您的资源存储在IndexedDB中。//install方法，安装serviceWorkerself.addEventListener('install',function(e){self.skipWaiting();//告诉浏览器直接跳过等待阶段，剔除过期的sw.js，直接开始尝试激活thenewserviceworkere.waitUntil(//在尝试缓存文件时打开一个新的存储区域caches.open('myStore').then(function(cache){returncache.addAll(['/pwa/index.html','/pwa/index.js','/pwa/gallery/bountyHunters.jpg','/pwa/gallery/myLittleVader.jpg','/pwa/gallery/snowTroopers.jpg',])}))});这里我们添加了一个install事件侦听器，然后将ExtendableEvent.waitUntil()方法附加到该事件-这将确保在waitUntil()中的代码执行完成之前不会安装ServiceWorker。在waitUntil()内部，我们使用caches.open()方法创建一个名为myStore的新缓存，这将是我们站点资源缓存的第一个版本。它返回创建缓存的承诺。当它解析时，我们然后在创建的缓存实例上调用方法addAll()。该方法的参数是由一组相对于origin的URL组成的数组。这些URL是您要缓存的资源列表。如果promise被拒绝，安装将失败，worker将不会做任何事情。这也可以，因为您可以修复代码并在下次注册时重试。安装成功完成后，serviceworker将被激活。当您的serviceworker是第一次注册/激活时，这没有什么不同。但是当serviceworker更新时（请参阅后面的更新您的serviceworker部分），情况就不同了。注意：localStorage的工作原理类似于serviceworker缓存，但它是同步的，因此不允许在serviceworkers中使用。注意：IndexedDB可以用作serviceworker中的数据存储。当请求sw控制的资源时，将触发fetch方法//每次请求serviceworker控制的任何资源时，都会触发fetch事件。这些资源包括指定范围内的文档，以及这些文档中的文档引用的任何其他资源self.addEventListener('fetch',function(event){console.log(event.request.url);//劫持http响应//caches.match(event.request)允许我们将请求的网络资源与缓存中的可用资源进行匹配，看缓存中是否有对应的资源，这个匹配是通过url和varyheader进行的，只是就像一个普通的http请求。event.respondWith(caches.match(event.request).then(function(response){if(response!=undefined){//缓存中有新资源；返回响应}else{//缓存中没有新资源，尝试网络请求获取新资源，returnfetch(event.request).then(function(response){//复制一份；//原因是response是一个Stream,为了让浏览器和缓存使用这个响应//这个响应必须被克隆并复制到浏览器，一个副本被缓存在缓存中。//只能消费一次，如果要再次消费，必须克隆一次letresClone=response.clone();//抓取缓存区caches.open('myStore').then(function(cache){//put将数据放入缓存区cache.put(event.request,resClone);})returnresponse;}).catch(function(){//尝试请求失败，使用match()响应一些回滚的页面作为默认资源返回caches.match('/pwa/gallery/snowTroopers.jpg')})}}))})Deleteoldcachesactivate：每个浏览器都对serviceworkers可用的缓存空间有硬性限制。浏览器会尽力管理磁盘空间，但它可能会删除整个域的缓存。浏览器通常会删除域下的所有数据。传递给waitUntil()的承诺会阻止其他事件，直到它完成。所以你可以确保你的清理会在你的第一次获取事件之前完成//清除缓存，在第一次获取之前，self.addEventListener('activate',function(event){letcacheWhiteList=['myStore'];.log(caches)event.waitUntil(caches.keys().then(function(keyList){returnPromise.all(keyList.map(function(key){if(cacheWhiteList.indexOf(key)===-1){returncaches.delete(key)}}))}))})添加到主屏幕添加到主屏幕（简称A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松方便地将快捷方式添加到他们的最喜欢的网络应用程序（或网站）到主屏幕，这样他们就可以通过一个点访问它。BrowserSupportMobileChrome/AndroidWebview从31版本开始支持A2HS，OperaforAndroid从32版本开始，FirefoxforAndroid从58版本开始。注意：可以在电脑上实现，但不能在手机上实现。0。下面的图片。单击+时，将出现安装提示。点击安装后，您需要的程序就会出现在您的主屏幕上，同时该程序也会被打开。Manifest{"background_color":"red","description":"thisisdemo.","display":"fullscreen","icons":[{"src":"gallery/icon.png","sizes":"192x192","type":"image/png"}],"name":"onedemo","short_name":"Foxes","start_url":"/pwa/index.html"}background_color:in加载程序前，启动应用时的背景色，仅用于从网络或存储介质加载主样式表时提升用户体验description:string程序描述。categories：用作目录或商店列表Web应用程序的提示，类似于元关键字。例如“categories”：[“books”，“education”，“medical”]display：指定应如何显示应用程序。为了让它看起来像一个独特的应用程序（而不仅仅是一个网页），您应该选择一个值，例如全屏（根本不显示UI）或独立（非常相似，但具有系统级UI元素，例如状态栏）可能是可见的）。icons：指定浏览器在不同位置（例如在任务切换器或更重要的主屏幕上）表示应用程序时使用的图标。name/short_name：这些字段提供在各个地方表示应用程序时要显示的应用程序名称。名称提供完整的应用程序名称。short_name当没有足够的空间显示全名时提供缩写名。如果您的应用程序名称特别长，建议您同时提供这两个名称。start_url：提供启动添加到主屏幕的应用程序时应加载的资源的路径。请注意，这必须是真实站点主页的相对路径，相对于清单url。另外请注意，Chrome在显示安装横幅之前需要这样做，而Firefox在显示“带+号的主页”图标时不需要它。更详细的字段###帮助链接pwa实践MDN这次我们介绍了serviceworker缓存以及如何将程序添加到桌面，剩下的会在下一篇更新，欢迎小伙伴们访问
