PWA:如何在manifest.json中拥有动态的“start_url”?

9
我正在创建一个PWA,但在manifest.json文件中的"start_url"出现了问题。我试图将网站转换为PWA,但它依赖于查询参数,而"start_url":"/"无法获取查询参数。
我尝试从manifest.json中删除start_url,似乎可以让该应用程序添加到主屏幕(在iOS上),但我想在Android上没有start_url时,安装提示不会出现?
是否有人遇到过类似的问题?
1个回答

6
您可以像这样创建动态清单:https://dev59.com/vCf_s4cB2Jgan1znJWtU#57856162,然后您可以执行类似于 "start_url":"your-url? query =" + queryValue 的操作。
<link rel="manifest" id="my-manifest-placeholder">

var myDynamicManifest = {
  "name": "App name",
  "short_name": "short",
  "start_url": "your-url?query=" + queryValue
  "background_color": "#000000",
  "theme_color": "#0f4a73",
  "icons": [{
    "src": "icon.png",
    "sizes": "512x5126",
    "type": "image/png"
  }]
}

const stringManifest = JSON.stringify(myDynamicManifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
document.querySelector('#my-manifest-placeholder').setAttribute('href', manifestURL);

var link = document.createElement('Link');
link.rel = "manifest";
link.setAttribute('href', 'data:application/json;charset=8' + stringManifest)

虽然这个链接可能回答了问题,但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改,仅有链接的答案可能会失效。-【来自审查】 - aerial
@aerial301 很好的观点,我已经包含了答案的必要部分。 - Guillermo Romero
太棒了,像魔法一样!非常感谢@Guillermo! - Why u do dis
@Whyudodis 我很高兴它有帮助到你。 - Guillermo Romero
不幸的是,这个解决方案在某些情况下不起作用 - 请查看我的解释 - dan

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接