我的 PWA 应用程序中的内部链接在 IOS 上作为外部打开

Question

清单文件（manifest.json）：

{
      "theme_color": "#202020",
      "background_color": "#ffffff",
      "display": "standalone",
      "orientation": "portrait",
      "start_url": "/",
      "name": "Example",
      "short_name": "EXP",
      "description": "A system for stuff",
      "icons": [
        {
          "src": "/icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": "/icon-256x256.png",
          "sizes": "256x256",
          "type": "image/png"
        },
        {
          "src": "/icon-384x384.png",
          "sizes": "384x384",
          "type": "image/png"
        },
        {
          "src": "/icon-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ]
    }

元数据配置：

export const metadata: Metadata = {
  title: "Example",
  description: "The offical example page.",
  generator: "Next.js",
  manifest: "/manifest.json",
  keywords: ["exp", "stuff", "stuff"],
  authors: [{ name: "Gerald Ibra" }],
  appleWebApp: {
    capable: true,
    title: "Example",
    statusBarStyle: "black-translucent",
  },
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
};

详细问题描述： 在 iOS 设备（例如 iPhone 或 iPad）上访问我的 PWA“示例”时，本应在应用程序内打开的内部链接（根据 PWA 性质）却在 Safari 浏览器中从外部打开。此行为与 Android 设备和桌面浏览器上的预期行为不一致，内部链接在应用程序内正确导航。

重现步骤：

• 在 iOS 设备上打开 PWA“示例”。
• 导航到应用程序内的任何内部链接（例如，从主页导航到/about）。请注意，内部链接在 Safari 浏览器中从外部打开，而不是停留在 PWA 内。

预期行为：

• 内部链接应在 PWA 本身内打开， 维护中定义的独立体验 清单.json.

其他背景：

• PWA 是使用 Next.js 构建的。 next-pwa 包
• 我正在使用下一个链接组件，但我也尝试了普通标签
• 仅当我点击链接时在我的手机中发生

我输入了虚假的标题和描述以保护身份 该项目是一个公司项目，不是我的。

Answer 1

我终于解决了这个问题。对我来说这是一个服务器问题。我从 .htaccess 中删除了密码保护，它工作正常。要更快地调试此问题，您可以使用类似的工具

“ngrok”：https://ngrok.com/

此工具将通过提供本地环境的链接来帮助您，您可以在任何移动设备中进行测试。