00:01
最后一个呢是PW。它是什么呢?我们现在开发的项目呢,都是web APP项目,在浏览器端运行的,但是这种项目一旦处于断网离线情况,就彻底没法访问了。我们想借助PW技术来提供给项目离线访问的体验。好,我们来举个例子啊。现在呢,我已经打包出来一份代码。我们可以直接在浏览器中访问,诶现在访问是正常的。但是一旦我们通过控制台找到network,把这个网络环境调成离线状态,从而一刷新,诶,这时候就啥也不能放。不管你之前缓存做的多么好,只要断网,那么什么也访不了,这个就是VIP的一个问题。这也是我们手机APP对吧,移动的APP它的一个优点,移动的APP呢,网网,即使你断网了也能够访问一些基本功能。
01:00
好,我们希望它断网也能够正常访问,这时候就用上这个p wa技术。P wa呢叫做间接式网络应用程序progressive web APP,那么简称为p wa,它能够让我们提供一种原生应用的体验的一种web APP技术。最重要的功能就是让我们离线看房了。内部呢,通过service worker去实现的。好,怎么用呢?这个技术的一个文档呢,大家可以打开这个pad官网。访问吧,然后呢,找到中文档啊,在这个插件这里面,它其实就介绍了这个插件。我们往下翻一翻啊。和boss。在这儿吧。嗯,没说啊,我们说一下work Bo。
02:01
在这里,那么这里是间接式网络应用程序啊。OK,它下面就就会告诉你用法,首先我们要下载一个插件叫workbs we have,那么这是一个它已经分装好的插件,把我们p wa功能已经封装好了,我们只要下载引入,然后用调用我们的这个资源呢,就可以达到这个特点。所以手机下载。其次呢,我们要引入这个插件,然后去使用。就照他的去调用就好了。OK,那么常用这个选项,当然到这里呢,我们的P加技术并没有生效啊。要想生效的话呢,往下走还需要在魅JS中加载一段JS代码来注册生成service worker。注册生成了,那么我们才能够用上这个PW技术。
03:02
所以最后还是要在面积JS中我们再去加上这一段JS代码。同样的这个service work呢,有比较严重的兼容性问题啊,所以我们进行判断,存在我才去用,它会去加载这个service work这个JS文件,加载成功它会输出注册成功了,注册了,注册失败呢,会输出这个注册失败了。我们通过他这个打印结果就能知道service worker有没有注册成功。那么下面我们可以重新打包。重新打包之后呢,它会把这个service work这个文件呢,输出到我们打包的这个目录下,那么我们后面加载的时候,诶,你看这里就输出了一个service work的。当你加载这个service worker呢,它就会在给我们的应用web应用呢,注册这个p wa这些相关的一些技术,从而让我们这个浏览器呢能够理解可访问。好,我们可以打开啊,但是这样打开会有个问题,就是我们这个PW注册会失败。
04:04
刷新啊,他说注册失败,原因是加载这个servicework加载失败了,失败的去注册啊,然后因为加载失败了。因为他现在找这个service worker呢,是在当前这个杠下面去找这个service worker的,而我们的这个service worker是在斜杠D下面先,这个service work在这个斜杠Dis下面,不是斜杠。所以我们要想sorry work能够用的话呢,必须要保证我们运行项目的根目录。就是这个第。呃,做法是这样的,我们可以下载一个专门用来部署静态资源服务器的一个库,叫做serve。我们安装它全局安装就好了。这库呢,其实在瑞角度家中它也有体现啊。全局安装之后呢,我们通过serve,然后加上我们要部署的目录,就是这个D,它就会启动一个开发服务器来部署我们第下面的所有资源。那么这样呢,我们房子也就是直接访问了,就不需要再加个第三波。
05:04
那么此时我们这个呃,Service work呢,才算注册成功,注册好了。好,一旦注册好,我们可以把网络调成奥莱新号,一刷新,哎,你会发现它还是可以访问。功能。计算计算,哎,还是可以访问,没有问题,因为他会把这些资源全都缓存到我们的service work中,如果感兴趣可以去application里面,去service work里面看我们注册的这个文件情况。那么资源缓存的地址具体是存在这个cash story里面,在这里面我们可以看到我们缓存的什么资源,它的资源大小,以及资源的一些具体情况啊,在这里能看到。好了,那么这是p wa的这个技术啊。当然呢,它最大的问题就是兼容性比较差。兼容性比较差,所以现在用的也是比较少。但是当未来我们彻底抛弃一些低版本浏览器的时候,那么这个技术能够让我们web应用呢变得性能非常的好。
06:03
好了,那么这个就是最后一个优化了p wa能够让我们的应用程序呢,即使断网离线也可以正常访问。那么用法是通过一个插件,然后还需要在JS中加载一段代码,这样呢才能完成任务呢?
我来说两句