iOS PWA 在覆盖 window 而不是相同的基础 window 中打开同域链接

Question

我创建了一个渐进式 Web 应用程序，它不是单页应用程序，但有定期 link 页面重新加载。

我添加了一个 manifest.json，看起来像这样：

{
    "name": "MyApp",
    "short_name": "MyApp",
    "theme_color": "#4FD083",
    "background_color": "#333333",
    "display": "fullscreen",
    "lang": "de-DE",
    "scope": "my_domain.tld",
    "start_url": "my_domain.tld",
    "icons": [
        /* Some icons */
    ]
}

当我在 iOS Safari 中访问页面并将其添加到主屏幕时，我第一次打开它时它没有页眉和页脚栏（这是正确的）。但是，一旦我在“应用程序”中单击任何 link，它就会在覆盖层 window 中打开此 link 的内容，其中有一个“完成”按钮和顶部的一些图标（这是不正确）。看起来像这样：

我希望同一域中的所有 link（我希望由 manifest.json 中的范围属性定义）在相同的“window”中打开，尊重manifest.json.

中“显示”属性的“全屏”或“独立”值

我也试过使用这些元标记，但无济于事：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

它在 Android (Chrome) 上按预期工作。

我做错了什么吗？

Answer 1

我成功了。我基本上做了三件事，但我不确定哪一件有用：

添加 manifest.json（下面的代码）
添加一个假的 webServiceWorker（下面的代码）
添加一些元标记

manifest.json

{
    "name": "AppName",
    "short_name": "AppName",
    "description": "Some Description",
    "lang": "de-DE",
    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "theme_color": "#4FD083",
    "background_color": "#4FD083",
    "icons": [
        {
            "src": "/img/apple-touch-icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/img/apple-touch-icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

webServiceWorker #1

<script type="text/javascript">
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('js/service-worker-pwa.js');
}
</script>

webServiceWorker #2（上面引用的实际文件）

self.addEventListener('fetch', function (e) {
});
self.addEventListener('install', function (event) {
});

元标签

<link rel="manifest" crossorigin="use-credentials" href="<url of the application>/manifest.json">
<meta name="application-name" content="AppName">
<meta name="msapplication-starturl" content="<url of the application>">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="AppName" />

希望这对其他运行解决此问题的人有所帮助。

iOS PWA 在覆盖 window 而不是相同的基础 window 中打开同域链接

iOS PWA opens same-domain links in overlay window instead of the same base window

safari

ios

progressive-web-apps

manifest.json