PWA

{
    "name": "我的PWA应用",
    "short_name": "PWA应用",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#3367D6",
    "icons": [
        {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

由于Safari对PWA的支持比较特殊，你还需要额外添加：

<!-- 让iOS以独立应用模式运行 -->
<meta
    name="apple-mobile-web-app-capable"
    content="yes"
/>
<!-- 设置状态栏样式 -->
<meta
    name="apple-mobile-web-app-status-bar-style"
    content="black-translucent"
/>
<!-- 指定iOS上的应用图标 -->
<link
    rel="apple-touch-icon"
    href="/icons/apple-touch-icon.png"
/>

crossorigin="anonymous"

1. 核心作用

• 启用 CORS 请求：允许跨域资源共享，不携带身份信息（如 Cookies），且无法通过 JavaScript 读取响应内容（如 fetch 或 XMLHttpRequest）。添加 crossorigin="anonymous" 会显式启用 CORS，允许服务器决定是否共享资源。
• 匿名请求：anonymous 表示请求 ​​不携带用户凭据​​（如 Cookies、HTTP 认证头），仅发送最基本的请求头（如 Origin）。如果需要凭据，需改用 crossorigin="use-credentials"。

个人理解：

- script 请求的时候，如果是公共资源，就需要带上，方便双方都清楚这是个跨域请求，同时出现错误也能打印出更详细的信息（有些服务器也根据这个来做判断决定是否返回资源）
- canvas 要求图片资源带上，否则会触发安全错误（Tainted canvases）
- fonts 资源通常也要求，否则浏览器可能拒绝加载