如何将我的静态网站配置为可安装

Question

如何使网站可安装like this here？我正在制作一个开源歌曲创作器，并认为这可能对那些想离线使用它的人有所帮助！

Answer 1

您可以按照 here

概述的步骤进行操作

总结：

网络应用尚未安装
满足用户参与启发式
通过 HTTPS 提供服务
包括一个网络应用程序清单，其中包括：
- short_name 或姓名
- 图标 - 必须包含一个 192 像素和一个 512 像素的图标
- start_url
- 显示 - 必须是全屏、独立或最小显示之一-ui
- prefer_related_applications 不得存在或为假
使用获取处理程序注册服务工作者（阅读有关服务工作者的信息 here）

如您所见，要包含在您网站上的有趣文件是网络应用程序清单 JSON 文件。

下面是清单文件的示例以及如何将其包含在您的网站 HTML 文件中。

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "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" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "540x720"
    }
  ]
}

要将其包含在您的网络应用程序中，请将此标记添加到网站所有页面的头部。阅读更多 here.

<link rel="manifest" href="/manifest.json">

希望对您有所帮助。

如何将我的静态网站配置为可安装

How do I configure my static website to be installable

javascript

html

css

scripting