Search code examples
javascriptstripe-paymentsprogressive-web-appssamsung-galaxy

Prevent PWA from restarting when it's accessed

I'm developing a PWA and came across this problem on a payment page. Basically:

Scenario 1

  1. User fills payment form
  2. Hits submit, is redirected to 3rd party payment page - Stripe (this opens a tab in Chrome on mobile, and can't be tweaked to open a modal like on desktop)
  3. Payment successful, the 3rd party page redirects to the PWA, which automatically restarts.

The problem is that I have a success page that can't be displayed because when restarting I lose the entire state I was in.

Scenario 2

  1. User fills payment form
  2. Hits back button/home button on phone
  3. From desktop, opens app again. Sometimes the app opens back in the previous state (with the form filled), sometimes it restarts, again, losing everything.

Is there anything I can do to prevent this? I know that when you open a PWA icon from desktop you're basically opening chrome. But if the app was already opened (and it's still visible in the Recent Tab), is there anything I can do to prevent it from restarting? I guess the phone automatically shuts it down.

Possible solution:

The only one thing I can think of right now is storing everything in localStorage and trying to reload on refresh. This way I can ensure that even if it closes and opens again I remain with the previous state.

Funny thing is that scenario 1 (which bothers me the most) only happens on Samsung Galaxy S7 (tested 6-7 devices until now, and it's the only one it reproduces on). Chrome versions are mostly the same on all of them.

Any ideas? Thanks!

Solution

  • So the save to local storage routine worked. The callback function I was passing to Stripe was getting called, but immediately after the PWA was restarted.

    So what I did was to save my state in localStorage the first thing in the callback, with a flag of paymentInProgress and only then try to call save on server and display the success page. If everything crashed in between, the app got restarted and in componentDidMount I'm checking for localStorage data and for the paymentInProgress === true flag.

    I'm still curious if there are other solutions to prevent the page reloading from scratch.