滁州易推,您最值得信赖的滁州网站建设公司
  13687364536     913676469@qq.com      网站地图 
RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-18:30
推荐扫一扫添加微信咨询
微信二维码
关闭右侧工具栏

营销知识

服务工作者:允许在没有网络的情况下访问网页
  • 浏览量:
  • 发表时间:2019-05-28 06:38:04
  • 来源:易推网络

简介

PWA(Progressive Web Apps)必须是未来移动发展趋势。

渐进式Web应用程序比applet更方便。对于初次使用的用户,他们可以直接在浏览器中访问它们。安装应用程序。即使在恶劣的网络环境中,也可以快速加载并推送相关消息。它也可以像本机应用程序一样添加到桌面或浏览器主屏幕,并且可以提供全屏浏览体验。

PWA与服务工作者之间的关系是什么?服务工作者是在浏览器的后台进程中运行的js。它可以实现消息推送,静默更新,拦截和处理网络请求,包括可编程响应缓存管理,这是PWA的核心。

工作原理

服务工作者是一个完全独立于网页的js脚本,并且有自己的生命周期。

每个服务工作者都有一个缓存池,每个缓存池都有多个缓存仓库。

首先谈谈它的声明周期,借用Google的图片:

Serice Worker

如果网站的cacheName没有安装,它将首先安装事件。

如果安装失败,请退出并等待下一次访问开始;否则激活事件被触发。

在激活中,确定当前页面是否在上面声明的filesToCache列表中,如果是,则接管显示页。

接管页面后,如果当前内存不足,它会被杀死;否则它将等待获取和消息事件。这两个事件之一是网络请求时,或者其他网页发送消息时。本文仅讨论如何在没有网络的情况下访问您的网页。如果您不谈论这两个事件,下一篇文章将告诉您服务工作者的深度使用。

从使用开始

准备工作

首先,您的网站必须支持https。

其次,您必须至少了解js开发。

最后,您必须拥有52或更高版本的Chrome才能进行调试。

注册服务工作者

首先,在您网站的根目录中创建service-worker.js文件(文件名自定义)。

此service-worker.js文件必须放在目录中,因为服务工作者的范围基于其结构在目录中。位置确定。

然后您需要检查浏览器是否支持服务工作者。如果您支持它,请注册服务工作者并将以下代码添加到要加载的页面。 JS。

if(导航器中的'serviceWorker'){//注册在上一步中创建的js文件navigator.serviceWorker .register( '/service-worker.js')。then(function(){console.log('Service Worker Registered');}); }

加载缓存

当用户访问注册了服务工作者的页面时,会触发安装事件,因此我们首先监听此事件。

var cacheName ='oslab-kymjs-blog'; var filesToCache = []; self.addEventListener('install',function(e){console.log('[ServiceWorker] Install'); e.waitUntil(caches.open(cacheName).then(function(cache){console .log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache);}));});

在收听安装事件后,转到缓存池并打开名为oslab-kymjs-blog的缓存存储库。

每个服务工作者都有一个缓存池,每个缓存池都有多个缓存池。

只是缓存打开时,它会调用cache.addAll()并传入一个url列表,然后加载这些资源并将响应添加到缓存中。

那里需要注意的是,在cache.addAll()方法中,如果文件无法下载,整个缓存将失败,服务工作者的安装事件将失败。如果安装失败,那么服务工作者根本不会工作。因此,请务必注意文件列表不能太长。它越长,失败的概率就越高。要缓存的页面越大,失败的概率就越高。

调试

Chrome开发人员工具调试服务工作者非常方便。

首先运行本地服务器(我的博客是由jekyll生成的,所以直接使用jekyll服务),然后Chrome右上角三点,更多工具,开发者工具。 (mac快捷键cmd + opt + i)

切换到应用程序视图

您应该可以看到这样的页面

Serice Worker

第一次运行应该显示为空,你看不到任何东西,只需刷新它。但是如果你在刷新后仍然看不到它g,这意味着当前打开的页面没有注册的Service Workers,检查是否加载了注册步骤的js。

请在刷新前检查[重新加载时更新]。否则,每次都会启动一个新的服务工作者,然后它就是一个字符串。行执行,将等待前一个完成,或者您必须手动单击[skipWaiting]。

然后,如果您检查[重新加载时更新],您可能会看到此警告,无所谓,只需忽略它。

Serice Worker

删除无用缓存

服务工作者启动时会触发activate事件。所以我们在这里监听激活以更新缓存。

self.addEventListener('activate',function(e){console.log('[ServiceWorker] Activate'); e .waitUntil(caches.keys()。then(function(keyList){return Promise.all(keyList.map(function(key){console.log('[ServiceWorker] Remove old cache',key); if(key! == cacheName){return caches.delete(key);}}));}));});

代码表示如果执行被激活,首先确定缓存池中的缓存存储库cacheName现在是否与我们声明的cacheName相同。如果没有,它将清空缓存池中的缓存(在安装中安装新缓存,在激活缓存中删除旧缓存)。因此,建议您在cacheName的末尾添加版本号,以便服务工作者始终可以加载最新的缓存。

此时,我们已经完全访问了我们博客的服务工作者。

本文由滁州易推网络公司提供,公司主要提供全椒网站建设业务,站内文章大部分为原创,部分转载于网络,若转载请标注 /article/17_136.html

上一篇:网站建设所需的工具和软件
下一篇:商城网站建设网站需要做好这四个地方。