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

Question

如何让网站像这样安装在这里?我正在制作一个开源歌曲创建者，并认为这可能对那些想要离线使用它的人有帮助!

Answer 1

您可以通过以下步骤获得

简介:

1. web应用程序尚未安装
2. 满足用户粘性启发式
3. 通过HTTPS服务
4. 包含一个web应用清单，其中包括:
   • short_name或name
   • 图标-必须包括一个192px和512px的图标
   • start_url
   • 显示-必须是全屏，独立或最小ui之一
   • prefer_related_applications必须不存在或为false
5. 用fetch处理程序注册一个service worker(在这里阅读service worker)

正如你所看到的，在你的网站上包含的有趣的文件是一个web应用程序manifest 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"
}
]
}

要将其包含在您的web应用程序中，请在网站所有页面的头部添加此标记。点击这里阅读更多内容。

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

希望这对你有帮助。