PWA Service Worker技术问询：嵌入页面、跨域注册及无外部文件实现

1. 是否可以将sw.js嵌入到index.html中？ #

可行，但需要通过Blob URL的方式实现。因为navigator.serviceWorker.register()方法必须接收一个URL，无法直接传入脚本内容，所以可以把要内嵌的Service Worker代码转换成Blob对象，再生成对应的Blob URL来完成注册。

实现代码示例 #

修改index.html中的注册逻辑，把Service Worker代码以字符串形式内嵌：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TEST</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#46a546" />
    <link rel="manifest" href="pwa.json">
    <script>
    if ("serviceWorker" in navigator) {
        window.addEventListener("load", async () => {
            const container = navigator.serviceWorker;
            if (container.controller === null) {
                // 内嵌的Service Worker代码
                const swCode = `'use strict';
const CACHE_STATIC = 'static-cache-v1';

function hndlEventInstall(evt) {
    async function cacheStaticFiles() {
        const files = ['icon.png'];
        const cacheStat = await caches.open(CACHE_STATIC);
        await Promise.all(
            files.map(url => cacheStat.add(url).catch(reason => {
                console.log(\`'\${url}' failed: \${String(reason)}\`);
            }))
        );
    }
    evt.waitUntil(cacheStaticFiles());
}

function hndlEventFetch(evt) {
    async function getFromCache() {
        const cache = await self.caches.open(CACHE_STATIC);
        const cachedResponse = await cache.match(evt.request);
        if (cachedResponse) return cachedResponse;
        const resp = await fetch(evt.request);
        await cache.put(evt.request, resp.clone());
        return resp;
    }
    evt.respondWith(getFromCache());
}

self.addEventListener('install', hndlEventInstall);
self.addEventListener('fetch', hndlEventFetch);`;

                // 创建Blob对象并生成URL
                const blob = new Blob([swCode], { type: 'application/javascript' });
                const swUrl = URL.createObjectURL(blob);
                // 注册Service Worker
                await container.register(swUrl);
                // 可选：注册后释放URL资源，浏览器也会自动回收
                URL.revokeObjectURL(swUrl);
            }
        });
    }
    </script>
</head>
<body>
</body>
</html>

注意：这种方式每次页面刷新都会生成新的Blob URL，会触发Service Worker的更新流程；且调试体验不如独立文件友好。

2. 在CORS无问题的前提下，是否可以从https://test.com为https://test.example.com注册Service Worker？ #

不行。Service Worker的注册有严格的同源及作用域限制：

• 注册操作必须从目标域名的同源页面发起，且Service Worker文件的源必须与注册页面一致。
• 即使CORS配置完全正确，https://test.com的页面也无法为https://test.example.com注册Service Worker——浏览器会直接阻止跨源的注册请求，这是同源策略的硬性要求。

3. 是否可以创建无需外部文件的PWA Service Worker？ #

可行，就是上述第一个问题中提到的Blob URL内嵌方案：把Service Worker的代码直接写在index.html中，通过生成Blob URL完成注册，完全不需要单独的sw.js文件。前面的代码示例已经完整实现了这种方式。

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