local-storageprogressive-web-appssame-origin-policymanifest.json

iOS PWA separate storage from browser?

I have a website in which I stored a ton of data in localStorage.

Just now, I have upgraded it to a PWA. Here's my manifest.json:

{
    "id": "foo", "name": "bar", "short_name": "baz",
    "start_url": "./",
    "scope": "./",
    "icons": ["*et al*"],
    "display": "standalone"
}

I have tried running the PWA on iOS, but what I found is that localStorage of the original website is inaccessible - I just don't see the data as if my origin has changed!

How can this happen? My origin did not change!

  1. My website was a available at https://example.org/my-app/
  2. Now, my website serves https://example.org/my-app/manifest.json
  3. It's referenced from https://example.org/my-app/index.html and https://example.org/my-app
  4. Lighthouse doesn't light up any problems with my PWA setup
  5. It works, when I debug locally (using webpack dev server), but then, everything is located at the root of the site, so that might not be quite a fair test...

So how is this possible?

UPDATE 1:

I have reconfigured my testing environment:

  1. Now, in testing, all files are served from /my-app/
  2. I have stored some data in localStorage
  3. I installed the Chrome PWA app for macOS
  4. All the data that was there is available

UPDATE 2:

I have found the following thing here:

Caution

On Apple devices, you can install the same PWA multiple times; each installation will have its own isolated storage, and it will be treated as a different app.

I think this means, that PWA in iOS are by design separate from browser...

Solution

  • On iOS each installation of your PWA is a unique origin. User start in safari, it's origin 1. He install the pwa, it's origin 2. He install the pwa again, it's origin 3. And so on.

    All of them have separated storage, if he delete origin 3 he keeps the datas from origin 1 and 2.

    On android, in the same scenario there is only 1 origin for the 2 contexts (you can't install the same pwa twice on android).

    For iOS what you can do is fingerprint (using clientjs) the pwa in safari and store the user datas on your server, when he install the pwa he will have the same fingerprint and you can download back his datas inside the second origin from you server. Obviously, that only work if it's not sensitive datas :)