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给的信息。

1. 安全策略和权限限制

移动端浏览器通常比PC端浏览器有更严格的安全策略和权限限制。这些限制可能包括：

•	Content Security Policy (CSP)：移动浏览器可能对CSP有更严格的执行，禁止从不可信来源加载资源。
•	Same-Origin Policy：Blob URL在一些移动浏览器中可能被认为不符合同源策略，导致无法加载。

2. Blob URL的处理

PC和移动端浏览器在处理Blob URL方面可能有不同的实现方式：

•	Blob URL生命周期：在一些移动浏览器中，Blob URL的生命周期可能较短或需要特定的条件才能有效。
•	支持和兼容性：某些移动浏览器可能对Blob URL的支持不完全，特别是在加载应用关键资源（如manifest文件）时。

3. 加载顺序和缓存行为

移动端浏览器在加载和缓存资源时可能有不同的策略：

•	加载顺序：移动浏览器可能在页面加载初期即验证并请求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://" />