pwa动态修改manifest.json(start_url)
pwa动态设置manifest.json
引言
在使用pwa开发时，因需求原因，需要动态设置pwa安装应用的地址，也就是manifest.json中的start_url地址，比如说业务场景需要携带不同的参数在安装地址后台，从中遇到了很多问题，以此记录下，帮你们避坑。
使用js动态修改manifest.json
刚开始的第一反应就是通过js获取到url上的参数，在pwa页面拿到url参数并动态设置到manifest.json的start_url上去，代码如下：
const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });const url = URL.createObjectURL(blob);const link = document.createElement('link');link.rel = 'manifest';link.href = url;document.head.appendChild(link);
如果环境是在pc端上是可以解决这个问题的，但是你在移动端上后你会发现pwa失效了，不管还是android还是ios上，我通过chatgpt查询了下，应该是移动端上的加载策略更为严格，js
动态修改后的格式其实是Blob形式的，也许跟这个也有关系，以下是gpt给的信息。
- 安全策略和权限限制
移动端浏览器通常比PC端浏览器有更严格的安全策略和权限限制。这些限制可能包括：
• Content Security Policy (CSP)：移动浏览器可能对CSP有更严格的执行，禁止从不可信来源加载资源。
• Same-Origin Policy：Blob URL在一些移动浏览器中可能被认为不符合同源策略，导致无法加载。
- Blob URL的处理
PC和移动端浏览器在处理Blob URL方面可能有不同的实现方式：
• Blob URL生命周期：在一些移动浏览器中，Blob URL的生命周期可能较短或需要特定的条件才能有效。
• 支持和兼容性：某些移动浏览器可能对Blob URL的支持不完全，特别是在加载应用关键资源（如manifest文件）时。
- 加载顺序和缓存行为
移动端浏览器在加载和缓存资源时可能有不同的策略：
• 加载顺序：移动浏览器可能在页面加载初期即验证并请求manifest文件，如果文件是动态生成的，可能在请求时未准备好。
• 缓存行为：移动浏览器可能对动态生成的文件有不同的缓存机制，导致文件无法及时加载。
使用node.js或者java等后端语言动态生成
通过使用node等后端服务生成是可以解决在移动端不生效的问题，下面用node示例
function createManifest() {const manifest = {name: "Dynamic PWA",short_name: "PWA",start_url: "/",display: "standalone",background_color: "#ffffff",theme_color: "#000000",icons: [{src: "/icon-192x192.png",sizes: "192x192",type: "image/png"},{src: "/icon-512x512.png",sizes: "512x512",type: "image/png"}]};// 根据需求动态修改manifest内容const theme = new URLSearchParams(window.location.search).get('theme');if (theme === 'dark') {manifest.theme_color = "#000000";} else {manifest.theme_color = "#ffffff";}const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });const url = URL.createObjectURL(blob);const link = document.createElement('link');link.rel = 'manifest';link.href = url;document.head.appendChild(link);
}// 调用函数创建并注入manifest
createManifest();然后将manifest.json的href设置为接口地址就行
<link rel="manifest" href="http://" />