sw.js：你不可不知的 Web 开发黑科技

最新推荐文章于 2025-05-16 18:05:00 发布

2301_78802081

最新推荐文章于 2025-05-16 18:05:00 发布

阅读量1.5k

点赞数 35

文章标签：前端 javascript 科技

本文链接：https://blog.csdn.net/2301_78802081/article/details/147073623

版权

说在前面

各位前端打工人，今天我们来聊聊一位「隐形打工人」——sw.js（Service Worker）。它就像你网站的私人管家，平时低调得很，但关键时刻能让你体验原地起飞：离线访问、资源缓存、后台同步… 这些 PWA 的骚操作全得靠它！不过，这家伙脾气有点怪，今天我们就来扒一扒它的「使用说明书」，保准让你用起来不翻车~

1. SW.js 是谁？你的网站「背后灵」

简单来说，Service Worker 就是个跑在浏览器后台的脚本，独立于网页主线程，专门负责拦截请求、缓存资源、搞点「网络加速」的大事情。

// 注册 Service Worker（仪式感要有！）
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW 注册成功！身份牌：', registration.scope);
    })
    .catch(err => {
      console.log('SW 注册翻车：', err);
    });
}

小结：

先检查浏览器是否支持（别对 IE 用户耍流氓）。
注册路径决定管辖范围（/sw.js 能管整个域名，别乱写）。
控制台输出的 scope 就是它的「地盘」。

2. 生命周期：SW.js 的「职场晋升路」

SW 的生命周期比你家的猫还难伺候，分为三个阶段：

2.1 安装 (Install)：实习生上岗

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/style.css',
        '/app.js',
        '/offline-cat.jpg'  // 离线时显示猫咪图，用户怒气-99%
      ]);
    })
  );
});

装逼指南：

event.waitUntil() 表示「不干完活别推进到下一步」。
缓存命名带版本号（比如 v1），方便日后清理「前任」的黑历史。

2.2 激活 (Activate)：转正仪式

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== 'v1')
          .map(badCache => caches.delete(badCache))
      );
    })
  );
});

宫斗技巧：

趁机删除旧缓存（防止用户手机存储被你的 v1、v2、v3… 塞爆）。
此时旧的 SW 还在控制页面，需等所有页面关闭后，新 SW 才能上位。

2.3 拦截请求 (Fetch)：正式开卷！

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 有缓存用缓存，没缓存去网络
        return response || fetch(event.request);
      })
      .catch(() => {
        // 连网络都挂了？祭出猫咪大法！
        return caches.match('/offline-cat.jpg');
      })
  );
});

骚操作扩展：

可定制缓存策略（比如「网络优先」、「缓存优先」）。
甚至能伪造响应（但别用来做坏事，小心律师函警告）。

3. 别惹毛 SW.js 的「三大禁忌」

3.1 HTTPS 限定

SW 只在 HTTPS 环境生效（本地 localhost 除外），否则它直接摆烂——这是为了阻止中间人攻击，毕竟权力越大，责任越大。

3.2 脚本必须独立

SW 文件必须和注册页面同源，不能挂在 CDN 上（不然谁知道你是不是恶意脚本？）

3.3 默认 24 小时休眠

浏览器可能随时终止 SW 节省资源，所以别指望它 7x24 小时待命。想搞后台同步？用 Background Sync API 提前打报告！

4. SW.js 的「装酷指南」

4.1 后台数据同步

用户发帖失败？SW 偷偷存草稿，等有网了自动重发！

self.addEventListener('sync', event => {
  if (event.tag === 'resend-post') {
    event.waitUntil(resendFailedPost());
  }
});

4.2 推送通知

即使用户没打开网页，也能弹消息：「亲，你关注的博主爆照了！」（误）

self.addEventListener('push', event => {
  const payload = event.data.json();
  event.waitUntil(
    self.registration.showNotification(payload.title, {
      body: payload.body,
      icon: '/notification-icon.png'
    })
  );
});