服务工作者
#javascript #网络开发人员 #初学者 #pwa

你好,伙计们!在本文中,我们将了解服务人员及其在创建渐进式网络应用程序中的作用。

ð简介

服务工作者是在网页背景中运行的脚本,与主页线程分开。

它们只是一个JavaScript文件,但与普通JavaScript文件并不完全相同。

因此,每当我们创建某种网站时,我们可能会混合使用HTML,CSS和JavaScript文件,然后将这些文件上传到服务器。当我们通过转到网址要求它们时,我们会在浏览器中看到它们。普通的JavaScript文件在浏览器内部的单个线程上运行,该线程与HTML页面紧密连接,并且可以访问DOM并操纵页面内容。

现在,当我们创建一个服务工作者JavaScript文件时,它不会在与普通JavaScript文件相同的线程上运行。它在远离HTML页面的浏览器的另一部分中的另一部分中运行。这就是为什么它无法访问DOM的原因。因此,我们无法直接读取,更改或删除页面内容。

服务工作者是背景过程。他们的工作是通过聆听和对浏览器中发生的事件做出反应来提供类似应用的功能。

服务工作者会听浏览器提出的 fetch http请求之类的事件。

service worker

ð服务工作者生命周期

服务工作者遵循以下生命周期:

  1. 注册:首先用浏览器注册服务工作者。从我们普通的JavaScript文件(例如App.js)中,我们注册了一个服务工作者,基本上告诉浏览器某个JavaScript文件(例如SW.JS)应注册为服务工作者并将其放在该单独的线程上。

    >

  2. 安装:注册后,浏览器下载并安装服务工作脚本。我们可以在sw.js\文件本身中收听此生命周期事件。当服务工作者注册时,只有一次 就会发射。或服务工作者文件中的代码自上次安装在浏览器中以来已更改。

  3. Active :安装服务工作者时会变得有效。服务工作者处于活动状态后,它可以访问其范围内的所有不同页面和所有不同的文件

    如果我们对服务工作者文件进行了一些更改,那么只有在关闭应用程序的所有实例时,它才会变得活跃。

  4. 提取和缓存:当发生提取事件时,服务工作者拦截了网络请求,并且可以用缓存的资产响应而不是提出网络请求。这使服务工作者即使用户离线也可以提供内容。服务工作者还可以在可用时使用网络的新内容更新缓存。

  5. 更新:当浏览器检测到新版本的服务工作者时,将下载并安装在后台。新版本在当前活跃的服务工作者处理任何正在进行的事件时输入“等待”状态。一旦关闭了使用旧服务工作者的所有选项卡,新版本将在激活阶段进行控制,并且周期继续。

service worker lifecycle

ð优点

服务工作人员有助于实现您在以下移动设备上运行的现代应用中期望的所有事项:

  • 脱机加载内容:您仍然通过使用缓存的资产和数据打开并在没有任何Internet连接的情况下查看应用程序。

  • 使用背景同步:如果用户在离线时试图执行通常需要连接的操作,则在连接重新连接时,它将在背景中执行操作 - 建立。

  • 使用推送通知:我们的应用程序可以在设备上通知用户

ð加总好!!

这就是本文的全部。感谢您的时间!!让我们联系以学习和成长。 LinkedIn Twitter Instagram

Buy-me-a-coffee