HTML5应用不能像原生App那样真正安装，但可通过PWA实现“添加到桌面”、离线运行等功能；需同时满足HTTPS、有效manifest.json、注册并激活Service Worker三个硬性条件。
HTML5应用能“安装”到本地吗？
不能像原生App那样真正安装，但现代浏览器支持 PWA（Progressive Web App） 模式，可添加到桌面、离线运行、甚至调用部分系统能力。关键不是“安装”，而是让浏览器认可它是可信的渐进式Web应用。
必须满足的三个硬性条件
浏览器只对同时满足以下条件的页面显示“添加到桌面”提示或允许手动添加：
-
HTTPS（本地开发可用localhost，但部署到真实域名必须启用 HTTPS） - 存在有效的
manifest.json文件，且 HTML 中通过正确引用 - 注册了
service worker，且其install和activate事件能成功触发（哪怕只缓存空 shell）
manifest.json 最小可用配置示例
很多失败源于 manifest 格式错误或字段缺失。注意：所有字符串字段（如 name、short_name）必须存在，icons 至少提供一个 192x192 PNG，且路径可被 public 访问。
{
"name": "我的HTML5应用",
"short_name": "HTML5App",
"start_url": "./index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#007bff",
"icons": [
{
"src": "./icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
Service Worker 注册和基础缓存逻辑
仅声明 manifest 不够，没激活 SW 就无法离线加载。常见坑：navigator.serviceWorker.register() 调用时机不对、SW 文件路径 404、或作用域越界（比如在 /app/ 下注册却想控制 /）。
在 index.html 底部添加：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js')
.catch(err => console.log('SW注册失败:', err));
});
}
sw.js 最小可行内容（放在与 index.html 同级目录）：
const CACHE_NAME = 'html5-app-v1';
const urlsToCache = ['./index.html', './style.css', './main.js'];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(r => r || fetch(e.request))
);
});
注意：缓存列表里的路径必须真实存在，且相对 SW 文件自身位置解析 —— 不是相对于 HTML。
真正卡住人的往往不是技术多难，而是 HTTPS 缺失、manifest 字段拼写错误（比如写成 shortname）、或 SW 文件本身返回了 404 或非 JS MIME 类型。验证时打开 Chrome DevTools → Application → Manifest / Service Workers 标签页，逐项确认状态。
