在 PWA 应用中，manifest.json 文件是非常重要的一个文件，它可以定义应用的名称、图标、主题色、启动方式等等信息，让应用更加美观、易用。然而，在某些情况下，我们会发现 manifest.json 文件并没有起作用，这时候我们就需要解决这个问题了。
问题分析
当 manifest.json 文件没有起作用时，我们需要先分析一下问题的原因。通常来说，manifest.json 文件没有起作用的原因有以下几种：
- 文件路径不正确：manifest.json 文件必须放在应用的根目录下，并且文件名必须是 manifest.json，否则浏览器无法识别。
- 文件格式不正确：manifest.json 文件必须是一个有效的 JSON 格式文件，否则浏览器无法解析。
- 缓存问题：如果浏览器已经缓存了 manifest.json 文件，而且没有更新，那么应用就会使用缓存中的旧文件，导致无法生效。
- 服务器配置问题：如果服务器没有正确配置 manifest.json 文件，浏览器就无法正确获取文件，导致无法生效。
解决方法
根据以上分析，我们可以采取以下方法来解决 manifest.json 文件无法生效的问题：
1. 检查文件路径和格式
首先，我们需要检查一下 manifest.json 文件的路径和格式是否正确。确保文件名是 manifest.json，放在应用的根目录下，并且文件格式是正确的 JSON 格式。
2. 清除缓存
如果文件路径和格式没有问题，那么我们需要清除一下浏览器的缓存，以确保浏览器能够获取最新的 manifest.json 文件。具体的清除缓存方法因浏览器而异，可以在浏览器的设置中找到相关选项。
3. 添加版本号
为了避免浏览器缓存旧版的 manifest.json 文件，我们可以在文件名中添加一个版本号，例如 manifest.v1.json、manifest.v2.json 等等。每次更新 manifest.json 文件时，都将版本号加一，这样浏览器就会强制获取最新的文件。
4. 配置服务器
最后，我们需要确保服务器正确配置了 manifest.json 文件。具体来说，我们需要在服务器的响应头中添加以下代码：
Content-Type: application/json Link: <manifest.json>; rel="manifest"
以上代码可以告诉浏览器，这个文件是一个 JSON 格式的文件，并且是应用的 manifest.json 文件。如果服务器没有正确配置这些响应头，浏览器就无法正确获取 manifest.json 文件，导致无法生效。
示例代码
以下是一个简单的 manifest.json 文件示例：
-- -------------------- ---- -------
-
------- --- --- -----
------------- --- -----
------------ ----
---------- -------------
------------------- ----------
-------------- ----------
-------- -
-
------ ---------------------------
-------- ----------
------- -----------
--
-
------ ---------------------------
-------- ----------
------- -----------
-
-
-以上代码定义了应用的名称、启动方式、主题色、图标等信息。将以上代码保存为 manifest.json 文件，并放在应用的根目录下，就可以让浏览器正确识别应用的信息了。
总结
manifest.json 文件是 PWA 应用中非常重要的一个文件，它可以定义应用的名称、图标、主题色、启动方式等等信息，让应用更加美观、易用。当 manifest.json 文件无法生效时，我们需要检查文件路径和格式、清除缓存、添加版本号、配置服务器等等，以确保浏览器能够正确获取最新的文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662e95f5d3423812e4c8c5cb