27-尚硅谷-webpack从入门到精通-PWA

接下来呢，我们来学习的是这个p wa的技术的使用。是由servicework加上cash这个方法呢构成的。它作用呢，是用来帮助我们，让我们的网页呢像APP应用程序一样，可以离线，也可以访问，那么性能也更好。是这样的一个作用，那么它呢，也可以叫做渐进式网络开发应用程序。那么PBA使用量多不多呢？诶，因为啊兼容性问题，所以呢，它普及开来呢，还是需要一些时间啊，虽然早就发明了啊，但是呢，目前呢还是有很多大厂在使用的，比方说淘宝。我们看一下啊。我们看一下另外一个网站，比方说我们的金吧，金啊。哎，这接的是一个开发论坛嘛，对吧，我们可以右键检查一下，检查我们调到network。好，当我们是当我们把这个。网站呢，调为离线状态，我们一刷新啊，你会发现我们正常呢，就访问不了任何东西的。

这所有网页呢，只要你没有PW技术，那么都是这样的结果，所以这是正常的啊。但是淘宝呢，它使用了PW技术啊，所以我们再去右键检查。把它网络呢调为。Of。好，再次刷新啊，诶，你会发现即使啊这个没有网，它呢也可以正常访问。那这个访问呢，肯定内容是有限的，并不是所有内容都是没问题的，还是大部分内容呢，都是看的是挺正常的，少部分内容呢会有些问题。那么有问题的东西呢，我们看从network看，红色部分呢，就是有问题的资源，而灰色部分呢，就是没有问题的资源。而这些没问题的资源呢，基本上都来自于service。就是来自于p wa这个技术给他提供的技术啊。好了，那么大家也可以看到啊，PW技术的功能非常强大啊，非常强大，那么它到底怎么用呢？所以接下来这就是我们学习PW的一个重点，我们让我们的程序呢，也变成这样，离线也可以访问的一个一个东西内容。

好。P技术呢，它主要啊是通过work bos啊这个库去做的。那么我们也会在WiFi中借助这个库来使用它。我们把这个零二十二复制一份啊来到25。P答辩。好，我们来稍微写的内容。往上翻啊。好，PW。叫做间接式网络开发应用程序。OK，好。它的简单的概括啊，就是离线可访问技术啊，然后我们的网站的离线了也可以访问，离线可访问。好，那么它这里面又包含什么内容呢？诶又怎么用呢？那么一般来讲呢，我们都是通过work去使用啊。这是歌开源的一个东西，那么同样呢，我们在中呢，就不能使work，而使用插件啊，叫work。

通过这个插件呢，我们就可以更好的使用我们的这个啊P技术。好，我们来用一下啊。下载。这个库。好下来，同时呢，我们也负责引入一下他啊。好，我们就不。稍微的比弱啊，因为我知道呢，网速的可能不是那么好啊，所以呢，我可能下时间比较久，大家如果网速快的话呢，应该是挺快的。好，我们来改一下啊。但是呢，不管你网速好还是网速差，一定要确保这个包呢是下载好的啊，千万不要因为包没下载好，你去调试的时候，结果出了一些问题，你却找不到原因啊。好下好了之后呢，就别管它了，我们直接用它。往下啊。来到差这里，我们直接去new啊，来到，注意来到差的数组中，直接去new调用一次。那么需要使用。

好，这里面呢，需要进行两项配置才能做好啊，分别叫做clients claim，指位处。还有一个呢，叫做skip waiting啊两个。那么这两个配置能有什么用呢？啊，就起两个作用，第一个啊，当然不帮我们。啊，我们写一下service worker啊。帮助我们source快速启动。啊，就不要这么慢了啊，你慢慢吞吞的启动，那我那我就早就跑了，你给我快点启动。好，第二个呢，就是啊解决就是去去除删除或者删除吧，删除叫的service。就是把之前的work呢删掉，我不要用之前的，我用最新的啊这样的。那么这样呢，它就会帮我们啊，生成一个service的一个配置文件啊，那么这插件呢，会帮我们生成一个service配的配置文件啊，它它最终功能就会。生成一个service的一个配置文件，那么我们后面呢，就要通过这个配置文件呢，去注册我们service。

那么怎么注册呢？我们得来到我们的一个入口JS中啊，一般是在入口JS文件中去做配置。诶，我们要往上走啊，我们在这里要注册service。那么service work呢？它有问题，所以还要处理这个问题。啊，当然了，我们处理呢是比较简单的啊，就是你你支持就用，你不支持那就完了，就别用了，怎么判断呢，就判断这个service worker是否，哎，我们就复制了啊。咱work是否在那个属某个属性中，诶这个属性呢叫navigator。好，如果在，那么我们就给他绑定事件啊window。啊，在的话呢，说明支持啊，就at even listener把那个lot事件。等全局资源全部加载完成啊，我们再去做这service service的注册。

通过navigator.service worker点去注册。注册的话呢，其实啊，它要传一个参数啊，传一个文件，这个文件呢，就叫service worker。这个文件呢，它待会就会有我们那个那个work。Plug插件生成servicework这个文件。那么我们再去注册这个文件里面的配置。通过方法和catch方法呢，我们能够接听它到底是注册成功还是注册失败了。注册成功呢，我们打一话叫做service注册成功。那么注册失败呢？同样的，我们打一句话吧。啊，这叫注册失败了。OK，那么到这呢，我们就配置好了这个service。来判断他在不在navigator上，在的话呢，把你的事件。

在全局资源全部加载好，再去注册这个service。注册成功打印会注册成功，注册失败会打印失败，那么注册这个文件呢，它会通过那个构建后输出的这个资源生成。所以我们构建一次就能看到结果，来我们来在终端中打开啊。构建一下，通过去构建一下我们代码。好，那么构建完成呢，我们就能看一下这个结果啊。构建完成了啊，它这里有个两个警告，好，哎，这里其实有个小问题啊，啊，我这里忘记说了啊。之前呢，我们写yes con，这里呢，我们只写这个继承这个LB base啊，这里要注意我们再演示一遍，再演示一遍。我们啊，再运行一次啊。这有小问题啊，就是呢，它会报错误。因此呢，它并不认识一些全局变量，比如说navigator window啊，这些东西他并不认识啊，但实际上呢，我们浏览器运行的时候呢，是一定会有window这个全局变量，而window上呢，又有这个navigator。

所以我们要让E呢认识这两个变量，怎么办呢？要改配置啊，这配置那就是。只能为brothers为true。Browse是浏览器的意思，尾呢就是让它支持浏览器的全局变量。好，这配置呢，我们在这写一下啊。有几个问题啊。第一问题。认是个navig。那么让他认识呢，啊，需要。啊，解决的话呢，需要修改这个配置啊。Package dress中yes is con配置。

需要修改这个配置啊，那么像这样一个。这个意思呢，就是支持浏览器的批量。啊，如果你要支持no端变量呢，你可以写个no为啊，就支持no端的全体变量了。所以这是我们第一个要做的事啊，加上这个之后，我们再勾进的时候呢，就不会报错了。好，再次构建一次。好，这时候呢，它出了两个警告，28行，31行啊，对应的就是这个两个cel语句啊，这L语句呢，我们就忽略了啊，就忽略了。因为呢，这两个开头语句呢，我们是正常是想调试查看的，所以现在呢，我们就不心现在就让打着啊，不管它。那么好，那么到这呢，我们就构建完成，我们可以看一下构建后的资源啊。构建资源呢，我们可以去看一下外面，你会发现呢，它会生成一个叫做service worker这个文件。而service work文件呢，待会我就要通过注册的方式去加载这个service资源，通过这个service work这个文件呢，我们就会做些相应做一些service work pw的一些注册工作呢。

所以呢，到这呢，我们就完成了基本操作。下面我们就验证我们这个技术到底有没有应用成功。那么应用呢，我们又遇到第二个问题啊。这个service呢，必须运行在啊代码啊代码。必须运行在服务器上。当然综合的代码啊，它必须要运行在服务器上，所以我们必须要通过服务器的方式去启动咱们的这个啊，最后构建后的这个build下面的资源啊。然后这个必下面资源必须启动服务器。那么当然有两种减法。一种显。啊，代码。考虑到大家呢，很多人可能那呢不是那么好啊，那么你会的话可以直接写啊，所以我们大家呢，用一种简单的方式啊。

这个方式呢，需要你先下载一个。叫做。想追啊？Serve呢，能够帮我们快速创建一个服务器，一个静态资源服务器就可以了啊。全局安装之后呢，全局就了个指通过S啊呢，指的是我们要运行代码的目录，你看我们的目录就是这个。他呢，就会将的这个目录下面的资源呢，给部署成静态资源，它会启动一个。目录为静态。啊，所以就这样好，大家呢，需要全局安装这个server server啊，所以呢，我们给大家全局安装一下。

好，全局安装呢，就不需要回到之前的目录啊，如果是本地安装就要回到之前全局安装呢，在哪里都可以安装，然后再通过二五这个啊。那么就会创建一个服务器了，就会启动服务器，它默认呢是5000啊是5000，我们按住CTRL键加鼠标左键就会点进去。好，这时候呢，你可以看到，诶看呢，打这里面看看L啊，我们刷新一下。好，那么它这里呢，没有出现一些内容啊，我们看有没有效果啊。呃，好像没有注册成功。我们来看什么原因啊。If service worker in navigator啊，应该是没问题的啊。If呢，哎，对啊，这里写错了啊，这个work呢是首字母大写。啊，要注意这个work的首字母大写别的东西呢。后面的也改一下啊，改完之后呢，我们重新打包一次啊，字母是大写的啊，要注意通法。

我们重新构建一次啊。这里面呢，我们只要将它改一下这个首字母大写啊，因为小同命法重新构建一次，那么我们就会以看结果了，再通过service s build去运行我们刷新。这时候你可以看到他就打一句话叫做service注册成功了。一旦注册成功呢，大家可以application里面找到这个service，看到注册的这个service。这数据呢，其实就是我们刚刚写的内容。那么你要做的是什么呢？将网络调为offline，再重新刷新一次。你会发现咱们的页面呢，还是可以访问的。然后这三个资源呢，它都是从service worker里面都加载出来的。这就是我们所谓的离线可访问技术啊。好，总而言之呢，就是它里面呢，通过配置啊，我们再回顾一下做到哪些配置啊。

第一个我们需要在con里面呢，去串下载一个插件work bos we。再通过这个方法呢，去创建这个插使用的插件。这插件呢，它最终啊，会帮你生成一个service worker DS这样的一个文件啊，那除了这些文件呢，还生成了一些其他东西。是你看打包的时候就会出来这个这个文件了，诶这个文件呢，就是那个插件生成的。好，一旦生成呢，因为我在入口文件中写了一段这样的代码。而写的这样代码。好，那么他呢，就会去尝试注册这个service worker。一旦注册成功，那么下一次就会失效，下次我因为网网络断断线，所以这些东西呢全都会失效，这资源呢全都加载不出来。那么它就会从S里面去下载东西啊，就会拿到我之前上一次通过缓存的结果，所以结果还是一样的啊。计化实验的。那么这里要注意两件事，第一个呢，它不认识一些全局变量，所以我们要在里面加一个配置选项啊。

在page中加一个this is里面加一个env browse为就行了。第二个search呢，必须运行在服务器中才能看到结果啊，你不能右键啊，是run，这样不太好。所以呢，我们可以通过诶一个库去运行下载一个快速创建服务器的一个库，通过它呢，启动服务器，将必要的目录暴露出去。那么就是在这个服务器的基础上去测试这个service。好了，那么这就是SOP使用。那么它的功能非常强大，能让我们网络呢网网，我们网站呢，离线也可以正常访问。好，那么接下来呢，大家可以自己尝试做一次。