为何navigator.getBattery()在S3静态网站中无法正常工作？

• 核心原因：navigator.getBattery()属于Battery Status API，这类涉及用户设备隐私的API，Chrome要求必须运行在安全上下文（Secure Context）中才能调用。
• 安全上下文的要求：网站必须通过HTTPS协议访问（本地localhost、本地文件协议file://属于例外，不受这个限制，所以你本地测试正常）。
• S3静态网站的默认问题：如果你直接使用S3提供的默认网站域名访问（比如类似xxx.s3-website-xxx.amazonaws.com的地址），这个地址是HTTP协议，不属于安全上下文，浏览器会直接禁用该API，导致你看到navigator.getBattery is not a function的错误。

解决办法 #

给你的S3静态网站配置HTTPS访问：

1. 配置CloudFront分发，将S3作为源，并启用CloudFront的HTTPS证书；
2. 绑定自己的自定义域名，并配置SSL证书，确保网站通过HTTPS协议提供服务。

当网站处于HTTPS环境下，安全上下文条件满足，navigator.getBattery()就能正常调用了。

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