ios - 移动 Safari 中的 React PWA 图像上传会破坏应用程序吗？

Question

我们很惊讶我们没有在网上的任何地方找到任何提及这个，所以我们在这里发布希望我们找到解决方案。

使用带有移动 Safari 的 iPhone 是当我们遇到此问题时，运行以下 2 个易于遵循的测试，一个有效，一个无效。

链接在这里
https://pwa-react.netlify.com/

这是我们运行的 2 个测试(都在链接中列出)，一个在非 PWA 模式下工作，另一个在 PWA 模式下失败。

测试 #1:完美运行(预期行为)

Visit https://pwa-react.netlify.com/ from iPhone in mobile safari
1. Make sure you have google drive on the phone but not logged in.
2. Click "Choose File". It will show you the list of options to choose from.
3. Click "Browse" to look for the photo.
4. Click "Cancel" and you're back here.
5. Click "Choose File" it will still show you the list of options to choose from.
   This works perfectly in mobile safari but NOT in PWA mode below.

测试 #2:不起作用(意外行为)(PWA)

Visit https://pwa-react.netlify.com/ from iPhone in mobile safari, hit the share
button, then add to home screen. This will add the PWA app on your phone. Open App.
1. Make sure you have google drive on the phone but not logged in.
2. Click "Choose File". It will show you the list of options to choose from.
3. Click "Browse" to look for the photo.
4. When it shows you the Google Drive logo with Sign In, double click the home 
   button, then go back to the PWA.
5. Click "Choose File" it will NOT show you the list of options to choose from. 
   This is now 100% broken.
   The ONLY way to fix it is to go to Settings>Safari>Clear History and Website Data (all the way down)
   How can we fix this so when the user hits "Choose File" it shows the list of 
   options to choose from in the PWA?

截图 #1:这些是出现在 中的选项测试 #1 并停止出现在 测试 #2



截图 #2:此屏幕允许我们在 中取消测试 #1 但它在 中消失了测试 #2



知道如何获得 测试 #2 通过允许我们选择上传选项来工作，如 截图 #1 在不破坏应用程序的情况下，不必转到 safari 设置以清除历史记录和网站数据以使其再次运行？

PS - 这是存储库文件 pwa-react/src/App.js

Answer 1

我们在 PWA 中面临几乎完全相同的问题，所以首先，我要感谢您帮助我们缩小原因。

在查看了 iOS PWA 生命周期 (article here) 和几个令人抓狂的试验和错误之后，我找到了一个半可接受的解决方案。

我猜测当您在上传中途离开应用程序(测试＃2)时发生的事情是，iOS 处理 PWA 的方式存在一些内部上下文而未被重置，因此当您返回并尝试再次上传文件时认为上传对话框已经打开。

文章中提到在没有target=_blank的情况下打开外部链接将导致 PWA 上下文被删除，因此当应用内浏览器关闭时，PWA 页面会在独立窗口中重新加载。我认为这可能会重置“分离上传”上下文，并且它最终起作用了。

所以我创建了一个托管在另一个域上的页面，并在 PWA 中的上传按钮下方链接到它:

// not sure the target={'_self'} is necessary but not risking it
<a href={'https://externalDomain.com/reset'} target={'_self'}>
    Having Issues? Reset Upload
</a>

这工作得很好，减去一个问题。当您单击此链接时，它会打开应用程序内浏览器，但没有“完成”按钮或导航工具供用户了解如何退出。链接回 PWA 不起作用，因为 iOS 检测到它并且不会重置应用程序上下文。我注意到的是，如果我从第一个外部页面导航到另一个页面(我最初只是在 google.com 上对此进行了测试)，则会显示“完成”按钮，让退出的方式一目了然。

有了这些知识，我猜你可能会做 window.history.pushState达到相同的效果，这是有效的。我的最终解决方案如下。当用户从应用程序内浏览器按下 Done 时，它​​会导致整个应用程序重新加载，但在我看来，这比让它们重新添加到主屏幕要好得多。

const Reset: React.FC = props => {
    React.useEffect(() => {
        // Redirect any wayward users who find this page from outside the PWA
        if (!window.matchMedia('(display-mode: standalone)').matches) {
            navigate('/');
        }
        // push an additional page into history
        const newUrl = `${window.location.href}?reset`;
        window.history.pushState({ path: newUrl }, '', newUrl);
    }, []);
    return (
        <Grid container>
            <ArrowUpIcon />
            <Typography variant={'h5'}>Press done above to return to App</Typography>
            <Typography variant={'body1'}>Sorry for the inconvenience!</Typography>
        </Grid>
    );
};

希望这可以帮助!很想听听它是否适合你。

生产测试后编辑:
另一个重要的注意事项是，您的“重置”页面必须位于完全不同的域上才能使其正常工作。今天在生产中遇到了这个问题，因为我们的重置页面位于与 PWA 具有相同根的子域上，iOS 没有重置整个 PWA 生命周期。

概括

关键的问题:

在任何“文件上传”对话框(“拍照”、“照片库”或“浏览”)打开时离开 iOS PWA 会破坏 iOS PWA 生命周期。这种破坏使用户无法打开任何"file"单击文件输入时出现“上传”对话框。

为了解决这个问题，必须完全重置 PWA 上下文。

似乎重置 PWA 上下文的唯一方法是重新启动手机，删除应用程序并将其重新添加到主屏幕，或者打开外部链接。

打开外部链接时，关闭iOS PWA嵌入式浏览器的“完成”按钮不会显示在初始页面上。用户必须导航到额外的外部页面才能显示“完成”按钮。

外部链接在具有 target="_blank" 时不会触发 PWA 上下文重置.

解决方案:

为了让用户能够再次上传文件，必须重置 PWA 上下文。最简单的方法(在我看来)是要求他们打开外部链接。

(在 PWA 中):向用户提供链接以修复上传对话框未显示的事实。链接目标必须是完全不相关的域(不是子域)并且必须具有 target="_self" (问题#5)。

(外部页面):一旦用户点击链接并打开外部页面，将没有可见的方式离开页面(问题 #4)。要解决此问题，您可以使用 history.pushState模拟导航到附加页面。

(外部页面 - 奖励):为了让用户清楚问题已解决，请在左上角添加一个指向“完成”按钮的箭头(如我的屏幕截图所示)。