Question

令我们感到惊讶的是，我们在网上的任何地方都找不到任何提及此事的消息，因此我们在此发布，希望找到解决方案。

当我们遇到此问题时，请使用下面的2个易于遵循的测试来使用带移动浏览器的iPhone，其中一项可行，一项没有。

这是我们运行的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

中消失了

任何想法如何通过允许我们选择截屏＃1 中的上传选项而无需破坏应用程序而去野生动物园而使测试2 起作用设置以清除历史记录和网站数据以使其再次起作用？

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以达到相同的效果，并且有效。我的最终解决方案如下。当用户在应用程序内浏览器中按“完成”时，它将导致整个应用程序重新加载，但这比将它们重新添加到主屏幕要好得多。

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生命周期。此中断使用户无法打开单击文件输入时出现的任何“文件上传”对话框。
为了解决此问题，必须完全重置PWA上下文。
似乎重置PWA上下文的唯一方法是重启手机，删除应用程序并将其重新添加到主屏幕或打开外部链接。
打开外部链接时，关闭iOS PWA嵌入式浏览器的“完成”按钮将不会显示在初始页面上。用户必须导航到其他外部页面才能显示“完成”按钮。
外部链接具有target="_blank"时，不会触发PWA上下文重置的重置。

解决方案：

为了使用户能够再次上传文件，必须重置PWA上下文。（我认为）最简单的方法是要求他们打开外部链接。

（在PWA中）：向用户显示一个链接，以修复未显示上载对话框的事实。链接目标必须是完全不相关的域（而不是子域），并且必须具有target="_self"（问题5）。
（外部页面）：用户单击链接并打开外部页面时，将没有可见的方式离开该页面（问题4）。要解决此问题，您可以使用history.pushState模拟导航到其他页面。
（外部页面-奖励）：要向用户明确说明问题已解决，请在左上方添加一个箭头，指向“完成”按钮（如我的屏幕截图所示）。

在Mobile Safari中反应PWA图片上传会中断应用程序？

1 个答案:

摘要

关键问题：

解决方案：