当前位置：首页 > wzjs >正文

国内最大的网页模板网站山西seo优化公司

wzjs 2025/8/8 18:56:58

国内最大的网页模板网站,山西seo优化公司,WordPress实现点击加载,重庆网络安全公司排名Service Worker 定义在浏览器后台运行的 JavaScript 脚本，它独立于网页的主线程。可以把它理解为一个代理服务器，位于浏览器和后端服务器之间。特点独立于主线程： 不会阻塞页面的 UI 渲染。事件驱动： 只有在需要时才会被唤…

Service Worker

定义

在浏览器后台运行的 JavaScript 脚本，它独立于网页的主线程。可以把它理解为一个代理服务器，位于浏览器和后端服务器之间。

特点

独立于主线程： 不会阻塞页面的 UI 渲染。
事件驱动： 只有在需要时才会被唤醒，空闲时会终止，节省资源。
生命周期： 有独立的安装、激活和控制页面等生命周期。
需要 HTTPS： 出于安全考虑，Service Worker 只能在 HTTPS 环境下使用。
无 DOM 访问： 无法直接操作 DOM，需要通过 postMessage 与主页面通信。

作用

离线访问和缓存
- 拦截网络请求： Service Worker 可以拦截所有由其控制的页面发出的网络请求。
- 自定义响应： 它可以决定如何响应这些请求，例如从缓存中获取资源（即使离线），或者在网络可用时再发送请求。
- “离线优先”策略： 优先从缓存中加载资源，从而在用户离线或网络条件不佳时也能提供内容，提升用户体验。
- 精确控制缓存： 比传统的浏览器缓存（如 AppCache，已被废弃）提供更精细的缓存控制能力。
推送通知
- 即使浏览器页面未打开，Service Worker 也能接收来自服务器的推送消息，并向用户展示通知。这使得 Web 应用能够像原生应用一样向用户发送实时提醒。
后台同步
- 允许应用程序在用户离线时暂存数据，待网络连接恢复时自动同步到服务器。例如，用户在离线状态下发送消息或提交表单，Service Worker 可以将其暂存并在联机时发送。
提高性能
- 通过缓存静态资源和优化网络请求，可以显著加快页面加载速度，尤其对于重复访问的用户。
渐进式 Web 应用 (PWA) 的核心
- Service Worker 是实现 PWA 的关键技术之一，它让 Web 应用具备了离线工作、可安装到主屏幕、接收推送通知等能力，从而提升用户粘性和体验。

Web Push实践

基本概念

Push API：浏览器提供的接口，用于订阅并接收来自服务器的推送消息。
Web Push Protocol：定义了服务器如何将消息发送给推送服务，再由推送服务转发给浏览器的协议。
VAPID ：一种安全规范，通过公私钥对，使服务器能向推送服务验证自身身份。
Push Subscription (推送订阅对象)：用户授权后，浏览器返回的JSON对象，包含推送服务的endpoint URL 和加密密钥，供服务器推送消息。

消息推送的完整流程

客户端注册与授权：
- Web应用在浏览器中注册Service Worker。
- 应用请求用户授权发送通知。
- 用户授权后，通过Push API获取唯一的PushSubscription对象。
- 客户端将该PushSubscription发送给服务器。
服务器存储与触发：
- 服务器存储PushSubscription并与用户关联。
- 当事件发生时，服务器准备推送通知。
服务器发送与推送服务中继：
- 服务器使用PushSubscription和VAPID密钥，通过Web Push Protocol向推送服务发送消息。
- 推送服务接收并路由消息到目标浏览器。
客户端接收与显示：
- 目标浏览器中的Service Worker被唤醒并接收push事件。
- Service Worker调用showNotification() API向用户显示通知。

客户端实现

在主 JavaScript 文件中：注册 Service Worker、请求用户授权并订阅推送

// main.js// 替换为你的 VAPID 公钥 (由服务端生成)
const VAPID_PUBLIC_KEY = 'YOUR_SERVER_GENERATED_VAPID_PUBLIC_KEY'initializePushNotifications()// 推送订阅
const initializePushNotifications = async () => {//向用户申请权限const permission = await Notification.requestPermission();if (permission !== 'granted') {return;}// 触发订阅 const registration = await navigator.serviceWorker.ready;// 获取订阅信息const applicationServerKey = urlBase64ToUint8Array(VAPID_PUBLIC_KEY);const subscription = await registration.pushManager.subscribe({userVisibleOnly: true, // 必须为 true，每次推送都对用户可见applicationServerKey: applicationServerKey});// 将订阅信息发送到服务器，服务端需将它和用户ID的映射进行保存await fetch('/api/subscribe', { // 你的后端 API 端点method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(subscription),});}
};// 辅助函数：Base64 字符串转 Uint8Array
const urlBase64ToUint8Array = (base64String) => {const padding = '='.repeat((4 - base64String.length % 4) % 4);const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');const rawData = window.atob(base64);return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
};

Service Worker 脚本（sw.js）：负责接收和展示通知

// 监听 'push' 事件
self.addEventListener('push', event => {const data = event.data.json();//显示通知给用户event.waitUntil(self.registration.showNotification(data.title, {body: data.body,icon: '/icon.png',data: { url: data.url }}));
});// 当用户点击由 Service Worker 显示的通知时，会触发这个事件。
self.addEventListener('notificationclick', event => {// 关闭当前被点击的通知。event.notification.close();// 在新的浏览器窗口或标签页中打开指定的 URLevent.waitUntil(clients.openWindow(event.notification.data.url));
});

服务端实现 (Java)

Maven 依赖 (pom.xml):

<dependency><groupId>nl.martijndwars</groupId><artifactId>web-push</artifactId><version>5.1.1</version> </dependency>
<dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk18on</artifactId><version>1.78.1</version>
</dependency>

生成和管理 VAPID 密钥：使用 web-push 库或其他工具（如 GCM/FCM 控制台或 web-push 命令行工具）生成 VAPID 公钥和私钥。私钥保密，公钥则提供给前端。

// 生成 EC 密钥对，使用 prime256v1 曲线（VAPID 要求）
KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("EC", "BC");
keyPairGenerator.initialize(new ECGenParameterSpec("secp256r1"), new SecureRandom());
KeyPair keyPair = keyPairGenerator.generateKeyPair();// 获取并编码私钥和公钥（Base64）
String privateKey = Base64.getUrlEncoder().withoutPadding().encodeToString(keyPair.getPrivate().getEncoded());
String publicKey = Base64.getUrlEncoder().withoutPadding().encodeToString(keyPair.getPublic().getEncoded());// 输出
System.out.println("==== VAPID 密钥对 ====");
System.out.println("公钥 (Base64): " + publicKey);
System.out.println("私钥 (Base64): " + privateKey);

Push Service 类：负责推送消息

@Service
public class WebPushService {@Value("${app.vapid.public-key}")private String vapidPublicKey;@Value("${app.vapid.private-key}")private String vapidPrivateKey;@Value("${app.vapid.subject}")private String vapidSubject;private PushService pushService;@PostConstructprivate void init() throws GeneralSecurityException {// 确保 BouncyCastle Provider 已添加if (Security.getProvider(BouncyCastleProvider.PROVIDER_NAME) == null) {Security.addProvider(new BouncyCastleProvider());}this.pushService = new PushService(vapidPublicKey, vapidPrivateKey, vapidSubject);}// 发送推送通知public void sendNotification(Subscription subscription, String payloadJson) {try {// 构建通知对象Notification notification = new Notification(subscription, payloadJson);// 发送通知并获取响应HttpResponse httpResponse = pushService.send(notification);} catch (Exception e) {System.out.println("发送推送通知失败：" + e.getMessage());}}
}