在电脑浏览器上创建快捷方式 (最常用)
这是最基础也是最通用的方法,几乎所有浏览器都支持。
（图片来源网络，侵删）
方法 1：直接从浏览器创建 (推荐)
这是最简单的方法,创建的快捷方式会直接出现在你的桌面上。
步骤：
- 打开网站：在浏览器（如 Chrome, Edge, Firefox, Safari）中导航到你想要创建快捷方式的网站。
- 找到菜单：
- Chrome / Edge / Firefox：点击浏览器右上角的三个点 或 三条横线（⋮ 或 ☰）。
- Safari：点击浏览器右上角的分享图标（一个方框向上箭头）。
- 选择“将网页添加到主屏幕”或“创建快捷方式”：
- 在弹出的菜单中,找到 “更多工具” (More tools) -> “创建快捷方式” (Create shortcut)。
- 或者,在一些新版本的浏览器中，直接有 “将网页添加到主屏幕” (Add to Home screen) 的选项。
- 确认并命名：
- 会弹出一个对话框,让你为这个快捷方式命名，你可以使用默认名称，也可以自定义一个你喜欢的名字。
- 点击 “创建” (Create) 或 “添加” (Add)。
- 完成：桌面上就会出现一个带有网站图标和名称的快捷方式文件，双击它，就会用默认浏览器打开该网站。
优点：
- 简单快捷,一步到位。
- 快捷方式会自动使用网站的“Favicon”（网站小图标）。
缺点：
（图片来源网络，侵删）
- 每次打开都是一个独立的新窗口或标签页,而不是固定应用。
方法 2：将网站保存为“应用”或“PWA” (体验最佳)
对于支持 Progressive Web App (PWA) 的网站，你可以将其安装成一个类似原生应用的样子，它会有自己的独立窗口、任务栏图标，甚至可以在后台接收通知。
步骤 (以 Chrome 为例)：
- 打开支持 PWA 的网站：Google Docs, Twitter, Notion 等，你可以在地址栏看到有一个安装图标（一个带向下箭头的安装符号）。
- 点击安装图标：点击地址栏右侧的安装图标。
- 确认安装：在弹出的窗口中，你可以修改名称，然后点击 “安装”。
- 完成：网站就会被安装到你的任务栏（Windows）或启动台（macOS）上，点击它，会像一个真正的应用一样打开，没有浏览器的地址栏和标签页。
优点：
- 体验最接近原生应用。
- 可以独立运行,不占用浏览器标签页。
- 可以离线使用（如果网站支持）。
- 在任务栏/启动台有固定位置，方便启动。
缺点：
（图片来源网络，侵删）
- 仅限支持 PWA 的网站，普通静态网站无法使用此方法。
在手机/平板上创建“主屏幕快捷方式” (非常实用)
在手机上,将网站添加到主屏幕是最高效的访问方式之一，操作也非常简单。
步骤 (以 iPhone 和 Android 为例)：
iPhone / iPad (Safari 浏览器)
- 打开网站：用 Safari 浏览器打开目标网站。
- 点击分享按钮：点击浏览器底部的分享图标（一个方框向上箭头）。
- 选择“添加到主屏幕”：在弹出的分享菜单中，向下滑动，找到并点击 “添加到主屏幕” (Add to Home Screen)。
- 命名并添加：为快捷方式命名，然后点击右上角的 “添加”。
- 完成：网站图标就会出现在你的主屏幕上，点击它，Safari 会打开该网站，并且可以设置“在 App 中打开”，实现类似独立应用的体验。
Android 手机 (Chrome / Edge 等浏览器)
- 打开网站：用 Chrome 或其他浏览器打开目标网站。
- 点击菜单按钮：点击浏览器右上角的三个点 (⋮)。
- 选择“添加到主屏幕”：在菜单中找到 “添加到主屏幕” (Add to Home screen) 或 “安装应用” (Install app)。
- 确认并添加：在弹出的窗口中，你可以修改名称和图标，然后点击 “添加” (Add)。
- 完成：网站图标会出现在主屏幕上，点击它，会直接打开网站。
优点：
- 访问速度极快,无需打开浏览器再输入网址。
- 图标整齐地排列在主屏幕,方便管理。
- 对于 PWA 网站，体验与原生应用无异。
对于网站开发者：如何让你的网站支持快捷方式
如果你是网站所有者,你可以通过一些技术手段，让用户获得更好的“添加到主屏幕”体验，这主要通过 Web App Manifest (Web应用清单) 文件实现。
主要作用：
- 自定义名称：控制用户添加到主屏幕时显示的名称。
- 自定义图标：提供不同尺寸的高清图标，确保在各种设备上看起来都清晰美观。
- 设置主题色：设置应用启动时或任务栏的颜色，提升品牌感。
- 指定启动页面：定义打开应用时加载的页面。
- 启用 PWA 功能：是实现 PWA 的核心文件之一。
简单实现步骤：
-
创建
manifest.json文件：在你的网站根目录下创建一个名为manifest.json的文件，并填入以下内容（示例）：{ "name": "我的精彩网站", "short_name": "MySite", "description": "这是一个非常棒的网站", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#007bff", "icons": [ { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }name: 完整名称short_name: 用于主屏幕的短名称icons: 准备好至少 192x192 和 512x512 像素的 PNG 图标。display:standalone表示以独立应用模式打开。
-
在 HTML 中引用：在你的网站 HTML 文件的
<head>标签内添加以下代码：<link rel="manifest" href="/manifest.json">
-
配置 Service Worker (可选，但推荐)：这是实现 PWA 离线功能的关键。
完成这些配置后,当用户访问你的网站时，浏览器就会检测到这个清单文件，并在地址栏或分享菜单中提供“添加到主屏幕”的选项，并且会使用你自定义的图标和名称。
| 场景 | 推荐方法 | 优点 | 缺点 |
|---|---|---|---|
| 电脑用户 | 浏览器创建快捷方式 | 简单通用，快速访问 | 每次打开都是新窗口 |
| 电脑用户 (PWA网站) | 保存为应用/PWA | 体验佳，独立窗口，可离线 | 仅限支持PWA的网站 |
| 手机/平板用户 | 添加到主屏幕 | 访问最快，体验流畅 | 需要手动操作一次 |
| 网站开发者 | 配置 Web App Manifest | 提升品牌形象，优化用户体验 | 需要一定的技术知识 |
希望这份详细的指南能帮助到你和你的用户！
