渐进式 Web 应用（PWA）：Web 与原生应用的融合

import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
 
// 静态资源：Cache First
registerRoute(
    ({ request }) => request.destination === 'style' || request.destination === 'script',
    new CacheFirst({ cacheName: 'static-resources' })
);
 
// API：Network First
registerRoute(
    ({ url }) => url.pathname.startsWith('/api/'),
    new NetworkFirst({ cacheName: 'api-data' })
);
 
// 字体：Stale While Revalidate
registerRoute(
    ({ request }) => request.destination === 'font',
    new StaleWhileRevalidate({ cacheName: 'fonts' })
);

// 激活时启用
self.addEventListener('activate', (event) => {
    event.waitUntil(self.registration.navigationPreload.enable());
});
 
// 使用预加载响应
self.addEventListener('fetch', (event) => {
    event.respondWith(async () => {
        const preload = await event.preloadResponse;
        if (preload) return preload;
        return caches.match(event.request) || fetch(event.request);
    })();
});

{
    "name": "My App",
    "short_name": "MyApp",
    "description": "A progressive web application",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#1976d2",
    "icons": [
        { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
        { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
        { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
    ],
    "categories": ["productivity"],
    "shortcuts": [
        { "name": "New Item", "url": "/new", "icons": [{ "src": "/icons/new.png", "sizes": "96x96" }] }
    ]
}

// 注册同步
navigator.serviceWorker.ready.then(reg => {
    reg.sync.register('submit-form');
});
 
// Service Worker 中处理
self.addEventListener('sync', (event) => {
    if (event.tag === 'submit-form') {
        event.waitUntil(submitFormData());
    }
});

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const shaderModule = device.createShaderModule({ code: wgslCode });

document.startViewTransition(async () => {
    // 更新 DOM
    updateContent();
});

::view-transition-old(root) {
    animation: fade-out 0.3s ease;
}
::view-transition-new(root) {
    animation: fade-in 0.3s ease;
}