How to save PWA state in iOS

Question

I realize that iOS is not currently fully supportive of Progressive Web Apps, but until Service Workers and the Web App Manifest standard are supported I would like the app to be able to be closed and reopened in the same state. I should mention, that currently I have the app opening with no Nav bar, so it does feel like a native app in that regard, but is missing this one thing that I think may be beneficial and possible.

Here is an example:

WHAT HAPPENS:

1. Open PWA from homescreen icon
2. Opens to default opening page
3. Navigate to specific page within PWA
4. Return to homescreen
5. Open PWA from homescreen icon
6. Opens to default opening page

WHAT I'D LIKE TO HAPPEN:

1. Open PWA from homescreen icon
2. Opens to default opening page
3. Navigate to specific page within PWA
4. Return to homescreen
5. Open PWA from homescreen icon
6. Opens to navigated page from above in #3

I read a comment somewhere weeks ago by someone that said they had accomplished this, but can't find it anymore. I realize there is not an 'official' way to do this, but wonder if there is any trick to accomplish that.

Any thoughts or experience would be appreciated.

Answer 1

Good news! This bug has been fixed in iOS 13

iOS 12 brought the improvement of a persistent state in PWAs, meaning that when you close the app, it would be in the same state when you went back to it. However, this brought another bug: force quitting the app still wouldn’t bring the app back to a fresh state.

In iOS 13 and iPadOS, these bugs have now been fixed fully and the app lifecycle appears to be the same as native apps to the end user.

There isn’t any special setup needed for this: by upgrading to iOS 13/iPadOS, you should immediately see the improvement.

Reference: https://wespeter.com/posts/ios13-pwa-improvements/

Answer 2

I do not know if you use any client side routing library, but what we realized is that iOS 12 navigated to the 'login' page after reload. So what we did with angularjs is to cache the state on transitions and then read it back on '$stateChangeStart'

     if (toState.name === 'login') {
                        event.preventDefault();
                        var appState = $rootScope.$localStorage.applicationState;
                        if (appState && appState.state && appState.state.name && appState.params) {
                            $state.go(appState.state.name, appState.params);
                        } else {
                            $state.go('main.orders');
                        }
                    } else {
                        $rootScope.$localStorage.applicationState = { state: toState, params: toParams };
                    }

Answer 3

iOS/iPadOS 14 is available now and it brings a significant improvement:

From iOS 11.x to iOS 13, every installed PWA had its storage completely isolated from Safari and other PWA installations of the same manifest.

I've found in iOS and iPadOS 14, this behavior has changed completely:

PWAs share Service Worker's registration and CacheStorage with Safari. This new behavior matches what happens on Android when you install a PWA. However, Cookies, Web Storage, and IndexedDB are still isolated and separately from Safari and other icons of the same PWAs. That is, partial storage will be available when you open a PWA from the home screen.

When you install some PWAs, you can continue your session on the standalone experience. For example, on Pinterest, if you are logged in within the browser, you are also logged in within the App, but there are some glitches (I presume because of partial storages). I'm not yet sure why it happened if cookies are different (and they are in my testing)

Source: Safari on iOS 14 and iPadOS 14 for PWA and Web Developers