html怎么创建manifest应用清单_html manifest.json PWA应用清单配置【从零开始】

哈喽！今天心血来潮给大家带来了《html怎么创建manifest应用清单_html manifest.json PWA应用清单配置【从零开始】》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

HTML不创建manifest.json，仅通过引入；该文件须手动编写并部署于根目录或正确路径，满足HTTPS、application/manifest+json MIME类型、非空name/short_name及含192x192和512x512 PNG图标的icons等条件。

HTML 本身不创建 manifest.json，它只是通过 引入一个独立的 JSON 文件；这个文件必须由开发者手动编写并部署在 Web 服务器上，且需满足 MIME 类型、路径可访问、HTTPS（生产环境）等硬性要求。

manifest.json 文件必须放在 Web 根目录或可被正确引用的路径下

浏览器只接受通过绝对路径或相对于 HTML 文档的合法路径加载 manifest。常见错误是把文件放在 /src/ 或 /assets/ 下却用根路径引用，导致 404。

• 推荐做法：将 manifest.json 放在网站根目录（如 https://example.com/manifest.json），然后在 HTML 的 中写：

  <link rel="manifest" href="/manifest.json">

• 如果放子目录（如 /static/manifest.json），href 必须匹配：

  <link rel="manifest" href="/static/manifest.json">

• 开发时用 file:// 协议打不开 manifest——PWA 要求 HTTPS（localhost 除外）

必需字段只有 name、short_name 和 icons

缺任意一项，Chrome 等浏览器会直接忽略 manifest，不触发“添加到主屏幕”提示。尤其 icons 数组必须至少含一个 192×192 和一个 512×512 PNG 图标，且 src 路径可访问、type 正确、sizes 格式为 "192x192"（不是 192x192 或 "192×192"）。

• name 是安装后显示的全名；short_name 是主屏幕图标下方文字（建议 ≤12 字符）
• icons 中每个对象必须有 src、sizes、type，例如：

  [{"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"}]

• start_url 建议设为 "./" 或 "/"，避免相对路径解析失败；若设为 "index.html"，离线时可能 404

service worker 注册和 manifest 是两件事，不能互相替代

有 manifest.json ≠ 是 PWA；没注册 service worker，就无法缓存资源、离线运行或真正“安装”。manifest 只负责描述应用元信息，而安装行为依赖 service worker 控制页面生命周期。

• 必须在 JS 中显式注册 service worker：

  navigator.serviceWorker.register('/sw.js')

• sw.js 文件需存在、返回 200、MIME 类型为 text/javascript，且不能是 301 重定向目标
• manifest 中的 display: "standalone" 只在 service worker 已激活后才生效；否则仍以浏览器标签形式打开

最容易被忽略的是：修改 manifest.json 后，旧版本会被浏览器强缓存——用户不会自动看到更新，必须清空站点数据或等待 24 小时以上。上线前务必检查网络面板中 manifest.json 的响应头是否含 Cache-Control: no-cache 或类似配置。

到这里，我们也就讲完了《html怎么创建manifest应用清单_html manifest.json PWA应用清单配置【从零开始】》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！