iOS PWA 在覆盖窗口而不是同一基本窗口中打开同域链接

Question

我创建了一个渐进式网络应用程序，它不是单页应用程序，但具有页面重新加载的常规链接。

我添加了一个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中访问该页面并将其添加到主屏幕时，第一次打开它时它没有页眉和页脚栏（这是正确的） 。但是，一旦我单击“应用程序”中的任何链接，它就会在覆盖窗口中打开该链接的内容，该窗口有一个“完成”按钮和顶部的一些图标（这是不正确的）。看起来像这样：

我希望同一域上的所有链接（我希望由 manifest.json 中的范围属性定义）在同一个“窗口”中打开，尊重“全屏”或者manifest.json 中“display”属性的“standalone”值。

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

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

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

我做错了什么吗？

Answer 1

我成功了。我基本上做了三件事，但不确定其中哪一个起作用：

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

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" />

希望这对遇到此问题的其他人有所帮助。