在项目中使用Service Worker 与 PWA

linwu-hi

已于 2023-09-24 13:38:51 修改

阅读量704

点赞数 4

文章标签： udp 网络协议网络前端 typescript vue.js javascript

于 2023-09-24 13:37:46 首次发布

本文链接：https://blog.csdn.net/weixin_52898349/article/details/133238736

版权

在这里插入图片描述

小册

这是我整理的学习资料，非常系统和完善，欢迎一起学习

引言

最近next项目有使用pwa技术，使用起来也不复杂，目前浏览器的兼容性也比较良好

Service Worker是浏览器中独立于网页运行的脚本，而PWA（渐进式Web应用程序）是一种Web应用程序，其外观和感觉类似于原生应用程序。在讨论Service Worker与PWA之前，让我们先简要了解一下Web Worker。

Web Worker

1. 什么是 Web Worker？

Web Worker 是浏览器内置的线程，用于执行非阻塞事件循环的 JavaScript 代码。由于 JavaScript 是单线程语言，一次只能处理一个任务。复杂任务的出现可能导致主线程被阻塞，严重影响用户体验。Web Worker 的作用是允许主线程创建 worker 线程，使它们可以同时运行。Worker 线程主要负责处理复杂的计算任务，然后将结果返回给主线程。简而言之，worker 线程执行复杂计算，同时保持页面（主线程）的流畅性，不会造成阻塞。

2. 类型

Web Worker 有三种主要类型：

Dedicated Workers【专用 Worker】由主线程实例化，只能与主线程通信。
Shared Workers【共享 Worker】可以被同源的所有线程访问。
Service Workers【服务 Worker】能够控制其关联的网页，拦截和修改导航、资源请求，并缓存资源，使您能够在某些情况下灵活控制应用程序的行为。

3. 限制

1. 同源限制

分配给 Worker 线程运行的脚本文件必须与主线程的脚本文件同源，通常都应该放在同一项目下。

2. DOM 限制

Web Workers 无法访问某些关键的 JavaScript 特性，包括：

1 DOM（因为这可能导致线程不安全）

2 window 对象

3 document 对象

4 parent 对象

3. 文件限制

出于安全考虑，worker 线程无法读取本地文件。它们加载的脚本必须来自网络，并且必须与主线程的脚本同源。

什是Service Worker？

Service Worker（服务工作线程）是一种在浏览器背后运行的脚本，用于提供强大的离线和缓存功能，以改善 Web 应用程序的性能和可靠性。它是渐进式网络应用程序（Progressive Web App，PWA）的关键组成部分，可以让 Web 应用程序更像本地应用程序，即使在离线状态下也能正常工作。Service Worker 是 Web 开发中的一个强大工具，它使开发人员能够更好地控制和管理 Web 页面的资源缓存、网络请求和响应，从而提供更快速、更稳定的用户体验。

Service Worker 的功能和优点

Service Worker 提供了许多重要功能和优点，其中包括：

1. 离线支持

Service Worker 可以缓存 Web 应用程序的资源，使其在断网或低网络质量环境下仍能够加载和运行。这意味着用户可以随时访问应用程序，无需依赖网络连接。

2. 更快的加载速度

通过将资源缓存在本地，Service Worker 可以显著提高 Web 页面的加载速度。它可以从缓存中获取资源，而无需每次都从服务器重新下载。

3. 支持后台同步

Service Worker 允许在后台执行任务，例如数据同步或推送通知。这使得应用程序可以在不干扰用户的情况下执行一些重要的操作。

4. 增强的安全性

Service Worker 受同源策略的限制，因此它可以提供更安全的资源缓存和请求处理。它还可以用于拦截和处理恶意请求。

5. 支持推送通知

Service Worker 具有推送通知功能，可以通过浏览器向用户发送实时通知，提高用户参与度和留存率。

使用

// 注册 Service Worker
if ('serviceWorker' in navigator) {
   
  navigator.serviceWorker.register('/sw.js')
    .then(function(registration) {
   
      console.log('Service Worker 注册成功：', registration);
    })
    .catch(function(error) {
   
      console.log('Service Worker 注册失败：', error);
    });
}

// 在 Service Worker 中缓存资源
self.addEventListener('install', function