【chrome】谷歌浏览器地址栏右侧“安装”按钮实现

news2024/11/24 14:32:32

地址栏右侧“安装”按钮

这玩意学名叫PWA：
全称：Progressive Web App，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

一、PWA安装条件：

在 Chrome 中，渐进式 Web 应用程序必须满足以下条件才能触发 beforeinstallprompt 事件和显示浏览器内安装推广栏

未安装 Web 应用程序
符合用户参与启发式
通过 HTTPS 提供服务
具有一个 Web 应用清单，其中包括：
- short_name 或 name
- icons - 必须包含一个 192 像素和一个 512 像素的图标
- start_url
- display - 必须是 fullscreen、standalone 或 minimal-ui
- 不能有 prefer_related_applications，或值为 false
使用 fetch 处理程序注册服务工作进程

二、实战

1. 新建manifest.json文件

在项目根目录创建manifest.json文件

{
  "short_name": "Weather",
  // 安装的PWA应用名称
  "name": "Weather: Do I need an umbrella?",
  // 安装的PWA应用描述
  "description": "Weather forecast information",
  "icons": [
  	// 不同icon资源调用方式
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml", // 资源类型：image/svg+xml、image/png、image/png
      "sizes": "512x512" // 资源(图像)大小，得和实际的大小一致
    },
  ],
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "screenshots": [
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "720x540",
      "form_factor": "wide"
    }
  ]
}

2. 新建一个demo.html文件

<!DOCTYPE html>
<html>
  <head>
  	<!-- 引入manifest.json -->
    <link rel="manifest" href="manifest.json" />
  </head>
  <body>
    <h1>Demo</h1>
  </body>
</html>