Tomcat部署的JSP页面未请求下载manifest.json问题排查

我为PWA在JSP页面中引入了manifest.json文件，部署在Tomcat服务器上，但浏览器未发起该文件的下载请求，网络面板中无相关请求。已检查Tomcat服务器的MIME类型，json扩展名已配置为application/json。请问还需要进行哪些配置？是否需要其他MIME类型？

我的页面代码如下：

<html> 
<head> 
<script src="assets/js/font-awesome.js" type="text/javascript"></script> 
<base href=""> 
<link rel="shortcut icon" href="img/favicon.ico" /> 
<link rel="manifest" href="BI/manifest.json?v=1.01" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
<app-root></app-root> 
</body> 
</html>

咱们一步步来拆解这个问题，manifest没被浏览器请求的原因通常逃不开路径、MIME类型、浏览器限制这几个核心点，我给你逐一梳理：

1. 先确认manifest的路径是否绝对正确 #

你用的相对路径BI/manifest.json?v=1.01，再加上页面里的<base href="">（这个标签会把所有相对路径的基准设为当前页面的URL路径），很容易出现路径错位：

• 先直接在浏览器地址栏输入http://你的服务器地址/BI/manifest.json?v=1.01，看看能不能正常打开这个文件。如果返回404，说明路径错了：
  • 如果你的JSP页面在Tomcat的webapps/你的应用名下，那manifest的正确路径应该是${pageContext.request.contextPath}/BI/manifest.json，或者直接写绝对路径/你的应用名/BI/manifest.json?v=1.01
  • 也可以把<base href="">改成<base href="${pageContext.request.contextPath}/">，这样所有相对路径都会自动基于你的应用根路径解析，避免错位

2. 必须配置正确的MIME类型（重中之重！） #

虽然你已经配置了json的MIME类型为application/json，但浏览器要求manifest.json的MIME类型必须是application/manifest+json，这是PWA的硬性要求，Tomcat默认没有这个配置：

• 打开Tomcat安装目录下的conf/web.xml，添加以下MIME映射：

  <mime-mapping>
      <extension>json</extension>
      <mime-type>application/manifest+json</mime-type>
  </mime-mapping>
  

  如果你只想给当前应用配置，也可以在项目的WEB-INF/web.xml里添加这段代码
• 注意：如果之前已经有application/json的映射，没关系，浏览器会优先识别manifest文件的正确MIME类型

3. 检查浏览器的PWA触发条件 #

浏览器只会在满足以下条件时才会请求manifest：

• 页面必须通过HTTPS访问（localhost开发环境除外，直接用http就行）
• 页面不能是iframe嵌套的（你的页面是直接加载<app-root>，这个应该没问题，但还是要确认下）
• 浏览器必须支持PWA（比如Chrome、Edge、Firefox等，IE完全不支持PWA，你的meta设置了IE=EDGE，只要是Chromium内核的Edge就没问题）

4. 清除浏览器缓存，强制刷新 #

有时候浏览器会缓存旧的页面状态，即使你修改了代码，也不会重新请求manifest：

• 按Ctrl+Shift+R强制刷新页面，或者打开开发者工具，在「网络」面板勾选「禁用缓存」，然后重新加载页面

5. 检查manifest文件本身的格式 #

如果路径和MIME都没问题，还要确认manifest.json的格式是否正确，比如有没有语法错误（比如少逗号、引号不匹配），格式错误也会导致浏览器忽略这个文件

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