Question 311655 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – PWA manifest start_url as current_url

I have a Progreesive web app(PWA). In that i have a manifest.json. I want to set the manifest’s start_url as Current url. Is there any way to set start_url to the current url, when installing the app?

Note:- In my PWA i every user gets a unique url to their account. So when they install the PWA, the start_url should be their current_url (ex: https://example.com/user/id=abc1322112 )

I tried to change the manifest using script.js. nothing works.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <script>
const manifest = {
  name: 'My App',
  short_name: 'My App',
  display: 'standalone',
  theme_color: '#ffffff',
  background_color: '#ffffff',
  icons: [
    { src: `${window.location.origin}/icon-192x192.png`, sizes: '192x192', type: 'image/png' },
  ],
  start_url: window.location.href
};
const link = document.createElement('link');
link.rel = 'manifest';
link.href = `data:application/json;base64,${btoa(JSON.stringify(manifest))}`;
document.head.appendChild(link);
</script>

    if anyone needed, this script works.

    delete your manifest.json and put this scipt inside your JS or html. replace your icon with "icon-192x192.png"


  2. 0

    You can’t change the URL in the manifest, but you can set it to a fake URL that the service worker will redirect.

    Manifest:

    {
  "start_url": "/user/me"
}

    Service worker:

    self.addEventListener("fetch", event => {
  const url = new URL(event.request.url);
  if (url.pathname === "/user/me") {
    const userId = /* get user id here */;
    const newUrl = `/user/id=${userId}`;
    // Redirect to the correct url
    const response = new Response(null, { status: 302, headers: { Location: newUrl } });
  } else {
    // In all other cases, just fetch from the network
    event.respondWith(fetch(event.request));
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search