Internal links in my PWA app open as external on IOS

Manifest File (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"
        }
      ]
    }

Metadata Configuration:

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,
};

Detailed Issue Description: When accessing my PWA "Example" on iOS devices (such as iPhone or iPad), internal links that are supposed to open within the app (as per the PWA nature) are instead opening externally in the Safari browser. This behavior is inconsistent with the expected behavior on Android devices and desktop browsers, where internal links correctly navigate within the app.

Steps to Reproduce:

• Open the PWA "Example" on an iOS device.
• Navigate to any internal link within the app (e.g., navigating to /about from the homepage). Observe that the internal link opens externally in the Safari browser, rather than staying within the PWA.

Expected Behavior:

• Internal links should open within the PWA itself, maintaining the standalone experience as defined in the manifest.json.

Additional Context:

• The PWA is built using Next.js. next-pwa package
• I am using next Link component but I also tried normal tag
• Only happens in I phone when I click a link

I have entered fake title and description to protect the identity of the project since is a compony project not mine.

I finally managed to solve the problem. For me it was a server issue. I removed the password protection from .htaccess and it worked correctly. To debug this issue faster you can use a tool like

"ngrok" : https://ngrok.com/

This tool will help you by providing a link for your local enviroment where you can test after in any mobile device.