What's new in web apps
Media & Web 进阶 20m

Web App 新特性：Mac 上的 Dock 应用、通知与独立浏览体验

What's new in web apps

2023年6月5日

在 Apple 官方观看视频

一句话判断

macOS Sonoma 终于支持把网站变成 Dock 里的独立 Web App 了——独立窗口、独立存储、支持通知和 Badge，加上 iOS 17 的 Safari View Controller 中也能”添加到主屏幕”，Web App 的分发门槛进一步降低。

这场 Session 讲了什么

Session 覆盖了 Web App 在 macOS Sonoma 和 iOS 17 中的新能力。

macOS Web App。在 Safari 中浏览网站时，File 菜单新增 “Add to Dock…” 选项。网站会以独立应用的形式出现在 Dock 中，拥有自己的窗口、独立的 cookie 存储（与 Safari 浏览器分离），以及简化的工具栏。网站的主题色会融入工具栏。开发者可以通过 Web App Manifest 控制工具栏导航按钮的显示、窗口标题和启动 URL。

iOS/iPadOS 更新。iOS 16.4 引入了 Home Screen Web App 的推送通知（基于 Web Push 标准）和 Badge 支持。iOS 17 新增了 Safari View Controller 中的”添加到主屏幕”选项——这意味着第三方浏览器和应用内浏览器也能触发 Web App 安装。

通知能力。Web App 支持标准的 Web Push API 发送通知，包括声音和 Badge。通知设置在系统设置中集中管理，与原生 App 的通知体验一致。

值得深挖的点

独立存储的价值：macOS Web App 有自己的 cookie 和 localStorage，与 Safari 完全隔离。这意味着用户在 Web App 中的登录状态不会与 Safari 浏览器互相干扰。对于使用多账号的用户（比如工作和个人 Gmail），这是很实用的功能。

Web App Manifest 的控制力：开发者可以通过 manifest.json 精细控制 Web App 的行为——是否显示导航按钮、窗口的初始大小、启动时打开哪个 URL。这让 Web App 的体验更接近原生应用。

Safari View Controller 中的安装：这打通了”在任何 App 内发现网站 -> 安装为 Web App”的路径。用户不需要专门打开 Safari 就能安装 Web App。

代码片段

通过 Web App Manifest 自定义 Web App 行为：

{
  "name": "我的工作台",
  "short_name": "工作台",
  "start_url": "/dashboard",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1a73e8",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Web App 中请求推送通知权限：

// 检查是否支持推送
if ('PushManager' in window) {
  // 请求通知权限
  const permission = await Notification.requestPermission();

  if (permission === 'granted') {
    // 订阅推送服务
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: '你的VAPID公钥'
    });

    // 将订阅发送到你的服务器
    await fetch('/api/push-subscribe', {
      method: 'POST',
      body: JSON.stringify(subscription)
    });
  }
}

最佳实践

  • 为你的网站添加 Web App Manifest，控制安装后的窗口行为和外观
  • 使用 display: standalone 隐藏浏览器 UI，提供更沉浸的体验
  • 设置 theme_color 与网站品牌色一致，让工具栏融入整体设计
  • 在 iOS 上通过 navigator.share 或 beforeinstallprompt 引导用户安装
  • 推送通知要克制——用户可以在系统设置中关闭，滥用会导致直接卸载

还有什么值得关注

  • macOS Web App 与 Safari 之间的数据隔离边界
  • Web App 在 visionOS Safari 上的行为
  • Service Worker 在 Web App 中的生命周期管理
  • Web App 的更新机制——用户何时看到新版本
WWDC 2023