Deprecated meta tag "apple-mobile-web-app-capable"

[reynaldichernando]

Link to the code that reproduces this issue

https://github.com/reynaldichernando/nextjs-meta-tag-deprecated

To Reproduce

1. Clone the minimal reproduction repo
2. Run the app normally npm run dev
3. Visit localhost:3000 and open Chrome DevTools

Current vs. Expected behavior

Current: Snippet from the reproduction repo app/page.tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  appleWebApp: {
    capable: true,
  },
};

...

Having this appleWebApp.capable metadata will show the warning for deprecated meta tag on Chrome DevTools

Expectation:

• The appleWebApp.capable metadata type should be deprecated
• Add support for the metadata mobile-web-app-capable

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Mon Aug 12 20:51:54 PDT 2024; root:xnu-11215.1.10~2/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 18.20.2
  npm: 10.5.0
  Yarn: N/A
  pnpm: 9.9.0
Relevant Packages:
  next: 15.0.0-canary.160 // Latest available version is detected (15.0.0-canary.160).
  eslint-config-next: N/A
  react: 19.0.0-rc-e740d4b1-20240919
  react-dom: 19.0.0-rc-e740d4b1-20240919
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

https://web.dev/learn/pwa/web-app-manifest#designing_your_pwa_experience

[!WARNING]
Warning: Before the web app manifest spec was defined, several browsers, including Safari on iOS/iPadOS and Chrome on Android, supported custom elements to describe the application experience, such as apple-mobile-web-app-capable. Do not use these elements today; it's no longer recommended, and may harm the installation experience when the browser can't load the manifest properly; the experience you get as a fallback may be different and unexpected.

https://web.dev/learn/pwa/enhancements#installation_reliability

[!WARNING] Warning: If Safari can't load the manifest, it will fall back to check if your PWA has some deprecated meta tags, such as apple-mobile-web-app-capable. You should not use these metatags. They provide a home screen app experience without essential attributes for your PWA, such as honoring the start_url or the scope attributes, making a terrible app experience.

Reference from other framework with similar issue https://github.com/flutter/flutter/issues/154596

[naaa760]

Hello @reynaldichernando

Hello Please, remove the deprecated appleWebApp.capable metadata from your app/page.tsx. Instead, ensure you're using the modern web app manifest to handle PWA capabilities across browsers. The apple-mobile-web-app-capable meta tag is deprecated, and relying on it can harm your app's installation experience, especially in Safari. Focus on properly defining your PWA in the manifest, which will handle essential attributes like start_url and scope. This will eliminate the warning in Chrome DevTools and improve cross-browser compatibility.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.