[Bug] Hosting under a subpath will cause wrong URL being saved when adding to home screen on iPhone

[christaikobo]

Describe the bug
I have pairdrop hosted at this URL: https://mydomain.com/pairdrop
I used Caddy to reverse proxy pairdrop, and I use Caddy to strip /pairdrop from the URL transparently. Since all paths are already relative, it works, at least in a desktop browser.

When visiting https://mydomain.com/pairdrop using safari on my iPhone, the website works too, but problem ensues when I tried to save the page to a shortcut on the home screen. I can only save https://mydomain.com/, not https://mydomain.com/pairdrop
Upon further investigation, someone points to a possible reason:
https://www.reddit.com/r/react/comments/xkp3ue/add_to_home_screen_in_safari_saves_homepage_only/
He says it is because of start_url in manifest.json is pointing towards "/"

I guess 2 possible solution is to either remove start_url, or add an option "baseurl" so pairdrop is aware that it is served under a subpath thus modifying start_url as needed.

EDIT: I can confirm that by editing /home/node/app/public/manifest.json and removing "start_url", this problem is resolved.

Smartphone (please complete the following information):

• Device: [e.g. iPhone SE 2020]
• OS: [iOS15]
• Browser [safari]

Bug occurs on official PairDrop instance https://pairdrop.net/
No
Version: v1.10.10

Bug occurs on self-hosted PairDrop instance
Yes

Self-Hosted Setup
Proxy: Caddy
Deployment:

docker run -d \
  --restart unless-stopped \
  --name=pairdrop \
  --hostname pairdrop \
  --net custom --ip ****** \
  -e PUID=1026 \
  -e PGID=101 \
  -e TZ=******* \
  -e RATE_LIMIT=true \
  -e WS_FALLBACK=true \
  -e RTC_CONFIG="/home/node/app/rtc_config.json" \
  -v /*****/docker/pairdrop/rtc_config.json:/home/node/app/rtc_config.json  \
  ghcr.io/schlagmichdoch/pairdrop

Version: v1.10.10

[schlagmichdoch]

Hey @terrytw

If we remove the start_url parameter from the manifest.json completely, I think saving the page to the homescreen would always use the url from which the page was saved. I think this could also be https://pairdrop.net/#about which would not be what we want.

Can you please test the behavior when saving from your #about page?

As an alternative, a stackoverflow thread supposes this relative path and scope combination:

"start_url": "./"
"scope": "."

Does this combination work for you?

[christaikobo]

Thanks for the reply

1. When start_url is removed, and I save https://mydomain.com/pairdrop/#about to home screen on my iPhone, I will get https://mydomain.com/pairdrop/ after clicking on the saved bookmark on home screen.

I can't tell whether it saves https://mydomain.com/pairdrop/#about but redirects to https://mydomain.com/pairdrop/, or it straight up saves https://mydomain.com/pairdrop/ ignoring #about, because iPhone truncates the URL and it only shows https://mydomain.com/pai........ when saving to homescreen.

2. Using this combination

"start_url": "./"
"scope": "."

works the same as removing start_url.

So for me either one is OK, but I don't really understands which is better because I don't know much about html...It's up to you:)

[schlagmichdoch]

I can't tell whether it saves https://mydomain.com/pairdrop/#about but redirects to https://mydomain.com/pairdrop/, or it straight up saves https://mydomain.com/pairdrop/ ignoring #about

Does it open the about page every time you launch the pwa?

[christaikobo]

No, it does not show about page at all.

[schlagmichdoch]

I don't really understands which is better

Apparently, it does not matter, as the default behavior is to use the URL that links to the manifest.json is used, which is exactly ./ for PairDrop. So I will simply omit it. Thanks for your help! :)