入门服务工作者

>服务工作者：离线Web应用程序和超越

>本文探讨了服务工作者，背景脚本通过拦截网络请求，从而启用推送通知和离线功能等功能。 我们将介绍注册，缓存，更新和调试技术。

密钥概念：

>
• 背景操作：服务工人即使关闭了网站，也独立于网页运行。 他们通过。 出于安全原因，postMessage >服务工作者需要https（或
）。 浏览器会自动处理多个注册。 （
• 进行检查）。 localhost>事件处理：chrome://serviceworker-internals>他们响应
>，
• 和>缓存：install服务工作者缓存网页组件，在后续访问中启用脱机访问。activate fetch
>调试：调试是一个实验功能（在Chrome DevTools中启用）。 通过
• 。
入门：注册
• >注册服务工作者涉及检查浏览器支持并使用chrome://serviceworker-internals/。
参数定义了工人控制的URL路径。>

安装和激活：navigator.serviceWorker.register()scope>

<code class="language-javascript">if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./service-worker.js', {scope: './about'})
        .then(registration => console.log(registration))
        .catch(e => console.error(e));
} else {
    console.log('Service Worker not supported.');
}</code>

事件在第一次遇到时触发。

>表示工人控制的工人。 请注意，在服务工作者中登录需要启用DevTools的调试。>

拦截网络请求：

事件允许拦截请求。 我们可以将缓存的内容或转发请求提供给服务器。 install>加载外部脚本（例如，用于更广泛兼容性的高速缓存）。activate

<code class="language-javascript">self.addEventListener('install', event => console.log(event));
self.addEventListener('activate', event => console.log(event));</code>

缓存更新： 更新缓存需要增加

。 新服务工作者等到所有受控页面都关闭之前，然后清理

>事件中的旧缓存版本。fetch importScripts()

<code class="language-javascript">importScripts('js/cache-polyfill.js');
const CACHE_VERSION = 'app-v1';
const CACHE_FILES = [ '/', 'images/background.jpeg', 'js/app.js', 'css/styles.css', 'https://fonts.googleapis.com/css?family=Roboto:100' ];

self.addEventListener('install', event => {
    event.waitUntil(caches.open(CACHE_VERSION).then(cache => cache.addAll(CACHE_FILES)));
});

self.addEventListener('fetch', event => {
    event.respondWith(caches.match(event.request).then(res => res || requestBackend(event)));
});

function requestBackend(event) {
    const url = event.request.clone();
    return fetch(url).then(res => {
        if (!res || res.status !== 200 || res.type !== 'basic') return res;
        const response = res.clone();
        caches.open(CACHE_VERSION).then(cache => cache.put(event.request, response));
        return res;
    });
}</code>

>调试：

CACHE_VERSION启用服务人员在Chrome DevTools中调试（标志，实验）。 资源面板显示注册工人，允许手动启动。activate>

>常见问题：

本节包括有关服务工作者的常见问题的答案，涵盖了与网络工人的差异，测试策略，HTTP请求处理，更新机制，实时数据适用性，调试方法，API兼容性，安全方面，浏览器支持和未注册过程。

此修订后的输出维护原始图像位置和格式，同时显着将文本重新列出以提高清晰度和流动性，避免直接窃。 关键信息保持不变。

以上是入门服务工作者的详细内容。更多信息请关注PHP中文网其他相关文章！