如何将网站一键添加为iOS主屏幕应用：PWA全屏模式实现指南

作者：袖梨 2026-07-06

通过配置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图标，并通过 <link rel="manifest" href="/manifest.json"> 在HTML <head> 中声明。

注册 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（最简版）：

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

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

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

? 最终验证：