如何在index.php/sw.js中关联src目录下的manifest.json适配PWAbuilder

• 在index.php的区块中添加manifest关联标签
  这是让PWAbuilder识别到manifest的核心步骤，直接在页面的里插入以下代码：

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

  注意href要使用绝对路径（以/开头），确保无论当前页面在哪个层级，都能正确指向src目录下的manifest文件。如果index.php本身就在网站根目录，相对路径src/manifest.json也可以，但绝对路径更稳妥。

• 排查manifest的可访问性
  手动在浏览器地址栏输入你的域名/src/manifest.json，确认文件能正常加载：

  • 如果返回404，检查文件是否确实在src目录下、文件名拼写是否正确（注意Linux服务器区分大小写）、Apache是否允许访问src目录（查看.htaccess里有没有限制src目录访问的规则）。
  • 如果能正常加载，再检查manifest内容是否符合PWA规范：必须包含name、short_name、start_url、display、icons这些必填字段，字段值格式要正确。

• 无需移动manifest文件
  你之前移动文件导致网站崩溃，大概率是.htaccess的规则依赖了manifest在src目录的结构，或者网站内部逻辑（比如JS加载manifest的路径）没同步修改。保持manifest在src目录，通过link标签关联是更安全的方案。

• sw.js无需处理manifest关联
  manifest的识别依赖页面的link标签，service worker（sw.js）不需要额外配置关联，它只负责PWA的离线缓存、推送等功能。

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