0

我正在开发 PWA 并在付款页面上遇到了这个问题。基本上：

方案 1

  1. 用户填写付款表格
  2. 点击提交，被重定向到第 3 方支付页面 - Stripe（这会在移动设备上的 Chrome 中打开一个标签，并且无法调整以在桌面上打开模式）
  3. 支付成功，第 3 方页面重定向到 PWA，PWA 自动重启。

问题是我有一个无法显示的成功页面，因为重新启动时我失去了我所处的整个状态。

方案 2

  1. 用户填写付款表格
  2. 点击手机上的返回按钮/主页按钮
  3. 从桌面，再次打开应用程序。有时应用程序会以之前的状态重新打开（填写表格），有时它会重新启动，再次丢失所有内容。

我能做些什么来防止这种情况发生吗？我知道当您从桌面打开 PWA 图标时，您基本上是在打开 chrome。但是，如果该应用程序已经打开（并且它仍然在“最近”选项卡中可见），我能做些什么来阻止它重新启动吗？估计手机会自动关机。

可能的解决方案：

我现在唯一能想到的就是将所有内容存储在 localStorage 中并尝试在刷新时重新加载。这样我可以确保即使它关闭并再次打开，我仍然保持以前的状态。

有趣的是，场景 1（最让我困扰）只发生在三星 Galaxy S7 上（到目前为止测试了 6-7 台设备，而且它是唯一能重现的设备）。Chrome 版本几乎都相同。

有任何想法吗？谢谢！

4

1 回答 1

2

所以保存到本地存储的例程起作用了。我传递给 Stripe 的回调函数被调用，但在 PWA 重新启动后立即被调用。

所以我所做的是将我的状态保存在 localStorage 回调中的第一件事，带有标志，paymentInProgress然后才尝试在服务器上调用 save 并显示成功页面。如果一切都在两者之间崩溃，则应用程序会重新启动，并且componentDidMount我正在检查 localStorage 数据和paymentInProgress === true标志。

我仍然很好奇是否有其他解决方案可以防止从头开始重新加载页面。

于 2017-07-21T11:57:16.663 回答