无需Node/NPM，能否在纯HTML+JS+CSS应用中实现Workbox？

当然可以！完全不需要依赖Node.js或者NPM，纯前端静态环境下就能用上Workbox的所有核心功能。我给你梳理下具体实现步骤：

• 直接引入Workbox的CDN脚本
  你可以在HTML文件里直接通过CDN加载Workbox的预构建脚本，不用本地安装任何包。比如在你的主页面（比如index.html）里添加：

  <script src="https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-sw.js"></script>
  

  注意替换成最新的稳定版本号就行。

• 编写Service Worker文件
  创建一个sw.js文件，直接在里面使用Workbox的API来配置缓存策略、路由规则等。举个简单的例子，缓存静态资源并采用“先缓存后网络”的策略：

  // 导入Workbox核心模块
  importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-core.js');
  importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-routing.js');
  importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-strategies.js');
  
  // 配置路由：缓存CSS、JS、图片等静态资源
  workbox.routing.registerRoute(
    ({ request }) => request.destination === 'style' || 
                     request.destination === 'script' || 
                     request.destination === 'image',
    new workbox.strategies.CacheFirst()
  );
  

  这里也可以根据需求选择其他策略，比如StaleWhileRevalidate（优先用缓存，后台同步最新资源）或者NetworkFirst（优先请求网络）。

• 注册Service Worker
  在你的主JS文件（或者直接写在HTML的script标签里）添加注册代码：

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js')
        .then(registration => {
          console.log('Service Worker注册成功:', registration.scope);
        })
        .catch(error => {
          console.log('Service Worker注册失败:', error);
        });
    });
  }
  

一些注意事项 #

• 本地开发时，浏览器允许localhost使用Service Worker，但线上环境必须是HTTPS（除了某些特殊的静态托管平台例外）。
• 如果你需要预缓存特定资源，也可以用Workbox的workbox-precaching模块，同样通过CDN导入后配置即可。
• Workbox的官方文档里所有基于API的配置，都可以用这种纯前端方式实现，完全不需要构建工具。

亲测这种方式完全可行，我自己在纯静态项目里用过好几次，效果和用Node.js构建的版本没区别。

内容的提问来源于stack exchange，提问作者lams