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

地址栏右侧“安装”按钮

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

一、PWA安装条件:

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

  • 未安装 Web 应用程序
  • 符合用户参与启发式
  • 通过 HTTPS 提供服务
  • 具有一个 Web 应用清单,其中包括:
    • short_namename
    • icons - 必须包含一个 192 像素和一个 512 像素的图标
    • start_url
    • display - 必须是 fullscreenstandaloneminimal-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>
  	
    <link rel="manifest" href="manifest.json" />
  head>
  <body>
    <h1>Demoh1>
  body>
html>

3. 启动HTTP服务测试效果

【chrome】谷歌浏览器地址栏右侧“安装”按钮实现_第1张图片【chrome】谷歌浏览器地址栏右侧“安装”按钮实现_第2张图片


参考资料:

  • 如何提供应用内安装体验
  • PWA安装条件

你可能感兴趣的:(Web前端,chrome,前端)