在Mobile Safari Break应用程序中反应PWA图像上传？ [英] React PWA Image Upload in Mobile Safari breaks application?

问题描述

我们很惊讶在网上没有发现任何提及此问题的内容，因此我们在此发帖，希望找到解决方案。

在Mobile Safari中使用iPhone时，当我们运行下面两个容易遵循的测试时，一个有效，一个不起作用。

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

以下是我们运行的两个测试(都列在链接中)，其中一个在非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

推荐答案

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

在回顾了iOS PWA生命周期(article here)和几个令人抓狂的小时反复试验之后，我能够找到一个半可接受的解决方案。

我的猜测是，当你在上传过程中离开应用程序(测试2)时，iOS处理PWA的方式中有一些内部上下文没有被重置，所以当你返回并尝试再次上传文件时，它会认为上传对话框已经打开。

本文提到，在没有target=_blank的情况下打开外部链接会导致PWA上下文被删除，因此当应用程序内浏览器关闭时，PWA页面会重新加载到独立窗口中。我以为这可能会重置"分离上载"上下文，但最终还是起作用了。

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

// 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就可以达到同样的效果，这是有效的。我的最终解决方案如下。当用户从应用内浏览器按下完成时，它会导致整个应用程序重新加载，但在我看来，这比让它们重新添加到主屏幕上要好得多。

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生命周期。

摘要

关键问题：

1. 在任何"文件上传"对话框(‘拍照’、‘图片库’或‘浏览’)处于打开状态时离开iOS PWA会中断iOS PWA的生命周期。这种破坏会使用户在单击文件输入时无法打开任何"文件上传"对话框。
2. 为了解决此问题，必须完全重置PWA上下文。
3. 重置PWA上下文的唯一方法似乎是重新启动手机、删除应用程序并将其重新添加到主屏幕，或者打开外部链接。
4. 打开外部链接时，关闭iOS PWA嵌入式浏览器的"完成"按钮不会显示在初始页面上。用户必须导航到其他外部页面才能显示"完成"按钮。
5. 外部链接在具有target="_blank"时不会触发PWA上下文重置的重置。

解决方案：

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

1. (在PWA中)：向用户显示一个链接，以修正Upload对话框未显示的问题。链接目标必须是完全不相关的域(不是子域)，并且必须具有target="_self"(问题#5)。
2. (外部页面)：一旦用户点击链接，外部页面打开，就看不到离开页面的方式(问题4)。若要解决此问题，您可以使用history.pushState模拟导航到其他页面。
3. (外部页面-奖励)：要让用户清楚地知道问题已解决，请在左上角添加一个指向"完成"按钮的箭头(如我的屏幕截图所示)。

这篇关于在Mobile Safari Break应用程序中反应PWA图像上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！