Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Web App Manifest: "start_url" doesn't work for Safari

The "start_url" works for Android browsers, but for iPhone, Safari always uses current page's URL and ignores the "start_url".

For example, the current page is https://test.com/index.html, on manifest the "start_url" is set to be "start_url": "index.html?flag=1", but when the page is added to home screen on Safari, it still uses https://test.com/index.html, without the parameter.

Is there a way to apply a different URL as the start up URL for Safari?

like image 244
J.W Avatar asked Nov 19 '22 03:11

J.W


1 Answers

A hacky solution I've implemented here is to silently change the URL on the page you prompt the user to install the PWA with: history.pushState({}, "", "/"); (see: https://stackoverflow.com/a/56691294/827129)

This will update the URL but won't cause the page to reload or refresh the DOM, so you can see the page you're on as normal, but when the user goes to install the PWA (Add to home screen) it'll save the root URL, so that's what they'll see when they open the PWA.

Downsides here include:

  • the URL in the address bar will update (not a big deal on mobile)
  • if the user presses the back button they'll go "back" to the page you triggered the history.pushState() on, so they'll need to press back twice to actually go back
  • if the user refreshes the page they'll see the homepage

In my use case this is good enough, there might be extra solutions to handle these issues that could be applied on top of this solution to improve UX.

like image 117
fredrivett Avatar answered Jan 12 '23 11:01

fredrivett