首页 > 网页制作 >网站一键添加至iOS主屏幕：PWA全屏模式指南

网站一键添加至iOS主屏幕：PWA全屏模式指南

来源：互联网 2026-07-02 08:31:01

iOS资讯合集

先说说结果：通过配置 Web App Manifest 并启用 Service Worker，确实能让 iOS Safari 支持“添加到主屏幕”，并以一种接近原生应用的方式全屏运行网站，彻底摆脱地址栏和导航控件的束缚。下面直接上干货。想让网站在 iOS 上真正“独立”运行——启动后看不到 Saf

先说说结果：通过配置 Web App Manifest 并启用 Service Worker，确实能让 iOS Safari 支持“添加到主屏幕”，并以一种接近原生应用的方式全屏运行网站，彻底摆脱地址栏和导航控件的束缚。下面直接上干货。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

想让网站在 iOS 上真正“独立”运行——启动后看不到 Safari 地址栏，也没有底部工具栏——本质上就是把它构建成一个符合标准的渐进式 Web 应用（PWA）。iOS 对 PWA 的支持确实不算全面，比如不能后台同步或接收推送通知，但自 iOS 11.3 起，display: "fullscreen" 这个模式以及主屏幕图标的安装能力已经完整支持。所以，这条路是走得通的。

关键操作可以拆成三步：

第一步：创建 manifest.json 文件

这是必需项。把下面这个文件放到网站根目录（比如 https://yoursite.com/manifest.json），并且一定要通过 HTTPS 提供服务。HTTP 环境下只在 localhost 调试时才能用，生产环境必须上 HTTPS。

{  
  "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 文件，一个最简版本就够用：

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

第三步：在 HTML 头中正确引用

每个需要支持添加到主屏幕的页面，它的里必须包含以下内容：

到了验证环节：

用 Safari 打开网站 → 点击分享按钮 → 滚动到底部，找到“添加到主屏幕”。
启动刚添加的图标，如果配置正确，它会全屏打开，顶部状态栏显示的是你自定义的样式，而不是 Safari 默认的样子。
在 JavaScript 里，可以通过 window.matchMedia('(display-mode: standalone)').matches 来检测当前是否以 PWA 模式运行。这在做一些适配时很有用。

总结一下：iOS 的“添加到主屏幕”不是什么魔术，就是 PWA 的标准实践。manifest.json 是起点，display: "fullscreen" 是关键开关，HTTPS 和合理的图标配置是落地的硬性前提。加上 Service Worker 之后，你的网站就能获得接近原生应用的启动体验和离线能力。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述