javascript Service Worker是什么_如何用它创建离线应用？

Service Worker 是运行在主线程外的可编程网络代理，支持离线访问、消息推送等，需 HTTPS 部署（localhost 除外），通过 install/fetch 事件实现缓存与离线响应。

Service Worker 是浏览器里一个可编程的网络代理，它运行在主线程之外，能拦截和处理网络请求，让网页实现离线访问、消息推送、后台同步等能力。它不是直接操作 DOM 的脚本，而是一个独立的、事件驱动的 worker，生命周期由浏览器控制，必须通过 HTTPS（本地开发时 localhost 除外）启用。

Service Worker 的核心特点

• 它是 JavaScript 文件，但运行在自己的线程中，不阻塞页面渲染或交互
• 只能通过 HTTPS 部署（开发时 localhost 被豁免）
• 一旦注册成功，它会持续存在，即使关闭标签页甚至浏览器，只要没被系统清除，下次打开仍可能激活
• 默认不持有页面上下文（没有 window、document），也不能直接操作 DOM
• 通过 postMessage 和页面通信，用 fetch + cache API 实现资源缓存与离线响应

三步完成基础离线应用

1. 创建并注册 Service Worker 文件（如 sw.js）
在网页的 JavaScript 中调用 navigator.serviceWorker.register()：

<script><br> if ('serviceWorker' in navigator) {<br> navigator.serviceWorker.register('/sw.js')<br> .then(reg => console.log('SW registe<a style="color:#f60; text-decoration:underline;" title= "red"href="https://www.php.cn/zt/122037.html" target="_blank">red', reg))<br> .catch(err => console.error('SW registration f<a style="color:#f60; text-decoration:underline;" title= "ai"href="https://www.php.cn/zt/17539.html" target="_blank">ailed', err));<br> }<br></script>

立即学习“Java免费学习笔记（深入）”；

2. 在 sw.js 中监听 install 和 fetch 事件
安装阶段缓存关键资源；请求阶段优先返回缓存，再回退到网络：

Android创建和使用数据库详细指南 中文WORD版

每个应用程序都要使用数据，Android应用程序也不例外，Android使用开源的、与操作系统无关的SQL数据库--SQLite，本文介绍的就是如何为你的Android应用程序创建和操作SQLite数据库。 数据库支持每个应用程序无论大小的生命线，除非你的应用程序只处理简单的数据，那么就需要一个数据库系统存储你的结构化数据，Android使用SQLite数据库，它是一个开源的、支持多操作系统的SQL数据库，在许多领域广泛使用，如Mozilla FireFox就是使用SQLite来存储配置数据的，iPhon

0

查看详情

const CACHE_NAME = 'my-offline-cache-v1';
const urlsToCache = ['/','/index.html','/style.css','/app.js'];

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request)
      .then(response => response || fetch(e.request))
  );
});

3. 处理更新与缓存清理（可选但推荐）
每次修改 sw.js，浏览器会自动下载新版本并触发 waiting → activating 流程。可在 activate 事件中清理旧缓存：

self.addEventListener('activate', e => {
  const cacheWhitelist = [CACHE_NAME];
  e.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys.map(key => {
        if (!cacheWhitelist.includes(key)) {
          return caches.delete(key);
        }
      }));
    }))
  );
});

常见注意事项

• 缓存策略要按需选择：Cache First、Network First、Stale-While-Revalidate 等，不能一概而论
• 动态请求（如 API）建议单独缓存并设置合理过期逻辑，避免数据陈旧
• 页面首次加载时 SW 还未生效，需二次刷新才真正离线可用
• 开发调试时勾选 DevTools → Application → Service Workers 中的 “Update on reload” 和 “Bypass for network” 更方便
• 不支持 IE，现代浏览器基本都支持（Chrome、Firefox、Edge、Safari 16.4+）

基本上就这些。Service Worker 不复杂但容易忽略细节，关键是理解它的生命周期和缓存时机——写对 install 和 fetch，离线体验就有了骨架。

以上就是javascript Service Worker是什么_如何用它创建离线应用？的详细内容，更多请关注php中文网其它相关文章！