Step 1: Create a website
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A2HS demo</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="images/fox1.jpg" alt="a fox picture">
</body>
</html>
Step 2:Add to Home screen
Add your site to the home screen on their phone or desktop
First,Create a Manifest for your site.
为了实现PWA应用添加至桌面的功能,除了要求站点支持HTTPS之外,还需要准备 manifest.json文件去配置应用的图标、名称等信息.
<link rel="manifest" href="/manifest.json">
通过一系列配置,就可以把一个PWA像APP一样,添加一个图标到手机屏幕上,点击图标即可打开站点.
1.Manifest实现添加至主屏幕
<head>
<title>Minimal PWA</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="/e.png" type="image/png" />
</head>
manifest.json
{
"name": "一个PWA示例", // 必填 显示的插件名称
"short_name": "PWA Demo", // 可选 在APP launcher和新的tab页显示,如果没有设置,则使用name
"description": "The app that helps you understand PWA", //用于描述应用
"display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
"start_url": "/", // 应用启动时的url
"theme_color": "#313131", // 桌面图标的背景色
"background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
"icons": [ // 桌面图标,是一个数组
{
"src": "/public/img/logo.png",
"sizes": "144x144",
"type": "image/png"
}]
}
Second,Add button and js,you can Add a icon to Home screen when click it.
https://github.com/mdn/pwa-examples/blob/master/a2hs/index.html
other:
Add to home screen (A2HS)
The ability for a user to "install" a website and use it as if it was a natively installed app. To enable this behaviour, a website must serve a valid Web App Manifest and load it's assets through a Service Worker.
Useful links
https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps