javascript - PWA: How to have dynamic "start_url" in manifest.json - Stack Overflow

I am creating a PWA and stumbled upon a problem with the "start_url" in the manifest.json fil

I am creating a PWA and stumbled upon a problem with the "start_url" in the manifest.json file. The website which I am trying to turn into a PWA depends on query params and "start_url":"/" doesn't pick up the query params.

I tried deleting the start_url from manifest.json and that seems to allow the app to be added to home screen (on iOS) but I guess on android the install prompt won't appear without the start_url?

Anyone has experienced a similar issue?

I am creating a PWA and stumbled upon a problem with the "start_url" in the manifest.json file. The website which I am trying to turn into a PWA depends on query params and "start_url":"/" doesn't pick up the query params.

I tried deleting the start_url from manifest.json and that seems to allow the app to be added to home screen (on iOS) but I guess on android the install prompt won't appear without the start_url?

Anyone has experienced a similar issue?

Share asked Oct 27, 2021 at 16:18 Why u do disWhy u do dis 4581 gold badge5 silver badges19 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8

You can create a dynamic manifest just like this: https://stackoverflow./a/57856162/8716572

And then you can do something like "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)

I tried the accepted solution without success, even with other variants of the solution. Perhaps Chrome changed something in the last three years and now it's not working any more.

My current working solution is having a real manifest.json file with default values and changing the values after building my app using NodeJS.

Furthermore I found out that you also can provide relative URLs instead of absolute URLs to the manifest.json properties "start_url", "id" and "scope". That means you can just provide the baseHref value from your progressive app (important e.g. for Angular or React).

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1743665951a4486975.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信