7、深入理解Service Worker与资源缓存

深入理解Service Worker与资源缓存

1. Service Worker基础

Service Worker是渐进式Web应用（PWA）的重要组成部分，它为Web应用提供了离线支持、后台同步等强大功能。使用Service Worker时，浏览器需要通过TLS（HTTPS）或localhost连接访问应用，这一安全层可防止恶意代理从其他位置加载Service Worker。

Service Worker文件的位置也很关键，它决定了其作用范围。默认情况下，Service Worker只能处理与其所在文件夹及子文件夹中的资源请求。例如，当应用成功注册Service Worker时，会输出类似如下内容：

console.log(`Service Worker Registration (Scope: ${reg.scope})`);

这里的 reg.scope 定义了Service Worker的操作域。如 Service Worker Registration (Scope: http://localhost:3000/) ，表示Service Worker的作用范围从localhost开始，覆盖该主机下的所有资源。

如果应用的子文件夹（如 app1 和 app2 ）需要单独的Service Worker，可以有两种方式实现：
- 将相应的Service Worker文件放在每个文件夹中，注册时会自动继承该文件夹的作用域。