nginx 使用localhost注册Service Worker失败

lbsnaicq  于 2023-06-05  发布在  Nginx
关注(0)|答案(1)|浏览(140)

因此,我一直在努力在localhost上注册一个Service Worker,以便在开发网站时测试其功能。根据服务工作者的MDN指南,它指出服务工作者的代码只能在HTTPS连接上注册,但也认为localhost是本地开发的安全来源[https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#setting_up_to_play_with_service_workers]。但是,当我尝试注册它时,我得到错误

DOMException: The operation is insecure. main.min.js:1:310
    <anonymous> http://localhost:3000/js/main.min.js:1

然后,我尝试使用mkcert创建的cert来HTTPS我的localhost连接,并使用nginx反向代理应用cert。在得到该设置后,我让https://localhost:8080/工作并为网站提供服务,但我仍然得到上述错误,但列出了https://localhost:8080/js/main.min.js:1
所以现在我不知道如何让这个注册为当地的发展工作。我在火狐上,如果这增加了任何额外的帮助。
服务器工作进程注册代码:

if ('serviceWorker' in navigator)
    try {
        const registration = await navigator.serviceWorker.register('/js/serviceWorker.min.js', { scope: '/' })
        if (registration.installing)
            console.log('Service Worker is installing')
        else if (registration.waiting)
            console.log('Service Worker is installed and waiting')
        else if (registration.active)
            console.log('Service Worker is active')
    }
    catch (error) {
        console.error(error)
    }
else
    console.log('Service Workers are not supported here. :(')

Nginx配置:

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen 8080 ssl;
        server_name localhost;
        ssl_certificate /Users/soul/localhost.pem;
        ssl_certificate_key /Users/soul/localhost-key.pem;
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout 5m;
        ssl_ciphers HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers on;
        location / {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Accept-Encoding "";
            proxy_pass http://localhost:3000;
        }
    }
}
vuktfyat

vuktfyat1#

在另一个浏览器Safari中测试了这个问题后,我发现了我做错了什么,因为他们给了我一个更好的错误信息。在我的注册代码中,我执行的是{ scope: '/' },但由于文件来自/js,因此无法正常工作。从.register方法中删除该片段使其工作!而且我不需要https我的本地主机。

// Failed
const registration = await navigator.serviceWorker.register('/js/serviceWorker.min.js', { scope: '/' })

// Worked
const registration = await navigator.serviceWorker.register('/js/serviceWorker.min.js')

相关问题