PWA第一次体验

前言：这个例子不需要安装任何东西

部分资源来自网络资源和PWA官网。不要觉得PWA太复杂。跟着例子走。你能做到的。

普华永道简介

一个新的前端技术，PWA(全称：Progressive Web App)意味着它是一个进步的Web应用。

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

2015年由谷歌提出，2016年6月推广。它是一系列现代web技术的结合，在Web应用中实现了类似原生应用的用户体验。

官方网站对PWA的宣传是可靠、快速和吸引人的

可靠：当用户从手机主屏幕启动时，无论网络状态如何，都能立即加载PWA。

快：这一点我们都很熟悉。从用户的角度来说，如果一个网页加载速度有点太快，那么我们就会放弃浏览网站，所以PWA在这一点上做得很好，它的加载速度非常快。

引人入胜：PWA无需从APP store下载，即可添加到用户主屏幕。他们可以通过web应用Manifest文件提供类似app的体验(全屏显示可以在Android上设置，但由于有Safari支持，无法在IOS上设置)，还可以进行“推送通知”。

压水堆核电站的关键技术

服务人员(可以理解为服务工厂)清单(应用程序列表)推送通知(推送通知)服务人员

以下内容由软件表示

什么是SW？这是一个脱机缓存文件。这就是我们PWA技术使用的！软件是一个脚本，浏览器在后台独立于网页运行。它为不需要网页或用户交互的功能打开了大门。因为它被使用，所以它将具有可靠的特性。SW在浏览器和服务器之间起作用，相当于代理服务器。

浏览器支持

顺带一提，目前SW只能在HTTPS环境下使用，因为SW权限很大，可以直接拦截和返回用户的请求，所以要考虑安全问题。

事件机制

功能(还是比较差)

后台数据同步从其他域获取资源请求接收计算密集型数据的更新。多页共享这些数据。客户端编译依赖后端服务管理的钩子机制。根据URL模式，自定义模板性能，优化消息推送时机，默认更新geofence生命周期。

解析：第一次注册SW时，浏览器解析脚本并获取入口点。如果解析成功，可以访问软件的注册对象。此时，我们需要在HTML页面中添加一个判断，来判断浏览器是否支持SW。

安装：软件脚本解析完成后，浏览器会尝试安装，并执行安装中的安装事件。如果有event . waitil()方法，则在此方法中的承诺完成之前，安装事件不会成功。如果承诺被拒绝，安装将失败，软件将进入冗余状态。

已安装/正在等待：如果安装成功，软件将进入此状态。

激活：处于等待状态的软件在以下情况下将进入激活状态：

目前还没有活跃的工作人员，调用了SW脚本中的self.skipWaiting()方法(ps: self是一个作用于SW中整个世界的对象，这个方法根据英文翻译可以理解是什么意思，跳过等待状态)，用户已经关闭了SW范围下的所有页面，从而释放了活跃的工作人员，超过了指定的时间，从而释放了活跃的工作人员。

已激活(激活成功):在此状态下，在文档的全面控制下，成功接收激活的工作人员。

冗余：如果安装事件失败或激活事件失败，或者新软件将其替换为活动工作程序，则出现这种状态是有原因的。安装事件失败和激活事件失败的信息可以在Chrome浏览器的DevTools中查看

显示

网络应用程序清单是W3C规范，它定义了一个基于JSON的列表。在PWA中清单的功能是：

可以将您浏览的网页添加到手机屏幕上

可以在安卓上全屏启动，不显示地址栏(因为Iphone的浏览器是Safari，所以不支持)

控制屏幕的水平/垂直显示

定义启动屏幕

您可以设置应用程序是从主屏幕启动还是从网址启动

您可以在添加的屏幕上设置应用程序图标、名称和图标大小。

推送通知

推送和通知是两个不同的功能，涉及两个API。

通知是浏览器发送的通知消息。

推送和通知的关系，推送：服务器将更新的信息发送给软件，通知：软件将更新的信息推送给用户。

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，初始比例=1.0，最大比例=1.0，最小比例=1.0' link rel='样式表' href='main.css' rel='外部no follow ' link rel=' manifest ' href=' manifest . JSON ' rel='外部no follow '/Head body H3 hello PWA/H3/=null){ navigator . service worker . register(' SW . js ')。然后(function(registration){ console . log('支持sw: '，registration . scope)})}/script/html main . CSS

h3 { color: # f00}manifest.json

Short_name: " "用户主屏幕上的应用程序名称。

显示器：“独立”设置启动样式，这样您的web应用程序可以隐藏浏览器的URL地址栏

Start _ url: "/"设置开始url。如果未提供，则默认使用当前页面

Theme_color : " "用来告诉浏览器用什么颜色给地址栏等UI元素上色。

Background_color: " "设置启动页面的背景色

图标：“”是添加到主屏幕的图标。

{'name':' a PWA示例'，' short_name': 'PWA示例'，' start _ URL' :'/index.html '，' display' :' standalone '，' background _ color' :' # 'theme_color': '#3eaf7c '，' icons ' :[{ ' src ' : '/youhun . jpg '，' sizes ' : ' 120x120 '，' type': 'image/png' } ]，}sw.js

看看很多人在网上安装的hs和ngrokk调试。这里我直接引用sw来照顾新手

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

通过软件注册安装软件时，获取资源并将其写入缓存。一种方法是self.skipWaiting()，这样就可以在页面更新过程中激活新的SW脚本并立即生效。

import scripts(' https://storage . googleapi.com/workbox-cdn/releases/3 . 1 . 0/workbox-SW . js ')；var cachesStorageKey=' minimum-pwa-1 ' var cacheList=['/'，' index.html '，' main.css '，' youhun . jpg ']self . addeventlistener(' install '，E={ E . wait直到(cache。打开(cachestoragekey)。然后(缓存=缓存。addall (cachelist))。然后(()=self。skipwaiting ()))})处理动态缓存，我们监听fetch事件。转到缓存中匹配事件的请求，如果响应不为空，则返回响应，最后返回提取请求。在fetch事件中，我们可以手动生成响应并将其返回到页面。

更新静态资源，缓存的资源会随着版本更新而过期，所以旧的缓存会根据缓存的字符串名称清除。通过在新安装的软件中调用self.clients.claim()获得对页面的控制，以便以后打开页面时使用版本更新的缓存。旧的软件脚本在不控制页面后将被停止，即进入冗余期。

self.addEventListener('fetch ')，函数(e){ e . response with(cache . match(e . request))。然后(函数(响应){ if(响应！=null){ return response } return fetch(e . request . URL)})})self . addeventlistener(' activate ')，函数(e){ e . wait直到(//获取所有缓存名称caches.keys()。然后(cache name={ return promise . all(//获取缓存下与当前版本名cachenames.filter不同的所有内容)(cachenames={ returncachenames！==cachestoragekey})。map(cache name={ return cache。delete(cache name)}))})。然后(()={返回自我。客户。claim ()}))})

我们可以把当前pwa目录的所有内容都扔进服务器，或者编码Pages和gitHub Pages也是可以的。当然，记得打开https。在之前的改动中，SW有很大的权利。为了安全起见，我们使用https协议来访问它。

尝试访问，我们在这里使用编码页面并绑定我们自己的域名

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

让我们打开网络刷新页面，看看。我们的页面资源来自SW而不是其他地方，我们在index.html判断的句子在Console中打印出来，由浏览器支持打印出来。

接下来，我们断开网络，只需在应用程序中勾选离线。然后刷新页面，我们还是可以看到上一页，因为上图我们可以看到，他的资源是从SW获取的。我们第一次打开这个页面的时候，Resopnse对象保存在Cache Storage(SW规范中有定义，请同学们自行查询相关信息)。让我们看看下图：

通过存储在Cache Storage中，如果我们下次访问时网络较弱或断开，可以直接将本地缓存的内容展示给用户，而不需要接受网络请求，优化用户的网络较弱和网络断开的体验。

这时肯定会有同学想，如果内容更新了，页面上显示的内容是新的还是旧的？让我们打开index.html文件，给正文添加一个p标签，然后返回页面刷新。

我们可以看到页面上的内容并没有显示我刚刚添加的P标签。这表明我们获得的数据仍然是从缓存中获得的，缓存中的内容没有更新，强制刷新是不可接受的。那么如何才能让我刚才添加的P标签显示出来呢？

让我们打开sw.js脚本文件并修改cacheStorageKey。

修改后我们会再次打开网站，强制刷新或者关闭浏览器重新打开。

新添加的P标签会出现在页面上。让我们看看缓存存储中的缓存名称，该名称已被修改。

摘要

如果使用编码或gitHub提供的pages服务，要注意独立域名的最佳绑定。如果没有绑定，请注意文件请求路径。

学习PWA的门槛不低，部署的服务器需要HTTPS，ServiceWorker涉及到很多API，需要独立学习。此外，国家预防机制已经有了一个https://www.npmjs.com/package/web-pwa，可以用来娱乐。实际部署到项目的生产环境中可能会有很多坑，但是有坑要填，所以不甩就叫前端。

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