如何将网站一键添加为iOS主屏幕应用（PWA全屏模式实现指南）-html教程-PHP中文网

通过配置web app manifest和启用service worker，可让ios safari支持“添加到主屏幕”并以类原生应用方式全屏运行网站，摆脱浏览器地址栏与导航控件。

通过配置web app manifest和启用service worker，可让ios safari支持“添加到主屏幕”并以类原生应用方式全屏运行网站，摆脱浏览器地址栏与导航控件。

要让您的网站在iOS设备上通过“添加到主屏幕”（Add to Home Screen）真正呈现为独立应用——即启动后无Safari地址栏、无底部工具栏、全屏沉浸式体验——您需要构建一个符合标准的渐进式Web应用（Progressive Web App, PWA）。iOS虽对PWA支持有限（如不支持后台同步或推送通知），但自iOS 11.3起已完整支持display: "fullscreen"模式及主屏幕图标安装能力。

✅ 关键三步实现：

创建 manifest.json 文件（必需）
将以下文件置于网站根目录（如 https://yoursite.com/manifest.json），并确保通过HTTPS提供（HTTP仅在localhost下可用）：

{
  "name": "我的应用名称",
  "short_name": "我的App",
  "description": "简洁描述您的网页应用功能",
  "theme_color": "#2563eb",
  "background_color": "#f9fafb",
  "display": "fullscreen",
  "scope": "/",
  "start_url": "/",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

⚠️ 注意事项：

display: "fullscreen" 是实现无浏览器UI的核心属性（iOS Safari 16.4+ 完整支持；旧版本建议用 "standalone" 作为兼容降级）；
start_url 必须是相对路径（如 / 或 /app.html），且需与 scope 一致，否则添加失败；
至少提供192×192和512×512 PNG图标，并通过在HTML 中声明。

注册 Service Worker（增强可靠性与离线能力）
虽然iOS“添加到主屏幕”基础功能不强制要求Service Worker，但它是PWA认证核心，且能提升加载速度与离线体验：

// 在 main.js 或页面底部添加
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg))
      .catch(err => console.error('SW registration failed:', err));
  });
}

对应创建 /sw.js（最简版）：

求职方舟

求职方舟是一款AI求职招聘工具，AI求职工具，智能识别自动填简历。

下载

self.addEventListener('install', e => e.waitUntil(self.skipWaiting()));
self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));

HTML 页面头中正确引用
确保每个需支持添加的页面包含：

<link rel="manifest" href="/manifest.json"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="我的App"><link rel="apple-touch-icon" href="/icons/icon-192.png">

? 最终验证：