Skip to content

Commit 8109b56

Browse files
author
Walle Cyril
committed
webmanifest guide
1 parent 613b031 commit 8109b56

4 files changed

Lines changed: 98 additions & 34 deletions

File tree

‎html/HTML_EXAMPLE.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
<title>html boilerplate</title>
66

77
<!-- style -->
8+
<link rel="icon" href="icon.png">
89
<meta name="viewport" content="width=device-width">
910
<link rel="stylesheet" href="css/normalize.css">
1011
<link rel="stylesheet" href="css/examples/demo.css">
11-
<link rel="icon" href="images/icons/16.png">
1212

1313
<!-- install -->
14-
<link rel="manifest" href="manifest.webapp">
14+
<link rel="manifest" href="manifest.webmanifest">
1515
<meta name="msapplication-TileColor" content="#123456">
1616
<meta name="msapplication-square150x150logo" content="images/icons/150.png">
1717
<meta name="apple-mobile-web-app-capable" content="yes">
@@ -21,6 +21,7 @@
2121
<link rel="prerender" href="x.html">
2222
</head>
2323
<body>
24+
2425
<p>Drink water</p>
2526

2627

‎html/OTHER_HTML_TEMPLATE.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>HTML TEMPLATE</title>
6-
<meta name="viewport" content="width=device-width">
7-
<link rel="stylesheet" href="doc.css">
8-
<link rel="icon" href="favicon.png">
9-
</head>
10-
<body>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>HTML TEMPLATE</title>
6+
<link rel="icon" href="favicon.png">
7+
<meta name="viewport" content="width=device-width">
8+
<link rel="stylesheet" href="doc.css">
9+
</head>
10+
<body>
1111

12-
<main>
13-
<p>Hi</p>
14-
</main>
15-
16-
<!-- <script></script> -->
17-
</body>
12+
<main>
13+
<p>Hi</p>
14+
</main>
15+
16+
<!-- <script></script> -->
17+
</body>
1818
</html>

‎html/manifest.webmanifest‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
11
{
2-
"version": "1.0.0",
3-
"name": "NAME",
2+
"version": "",
3+
"dir": "",
4+
"lang":"",
5+
"default_locale": "",
6+
"name": "",
47
"short_name": "",
58
"description": "",
6-
"launch_path": "",
9+
"scope": "/",
10+
"icons": [
11+
{
12+
"src": "images/logo-optimized2.svg",
13+
"sizes": "16x16",
14+
"type": "image/svg+xml"
15+
}
16+
],
17+
"display": "fullscreen",
18+
"orientation": "any",
719
"start_url": "",
8-
"icons": {
9-
"16": "/images/icons/16.png",
10-
"32": "/images/icons/32.png",
11-
},
20+
"theme_color": "orange",
21+
"background_color": "yellow",
22+
"categories": "",
23+
"screenshots": [],
24+
"iarc_rating_id": "undefined",
1225
"developer": {
13-
"name": "NAME",
14-
"url": "URL"
26+
"name": "",
27+
"url": ""
1528
},
16-
"lang":"",
17-
"default_locale": "",
18-
"fullscreen": "true",
19-
"appcache_path": "",
20-
"orientation": ["portrait"]
29+
"launch_path": "/"
2130
}

‎html/web_app_manifest_guide.md‎

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,61 @@
1-
# Web App Manifest Guide
1+
# Web Manifest Guide
2+
3+
4+
## About
5+
26

37
manifest.webmanifest is a special file that contains meta-data about a web app. It is a requirement to make a web app "installable" on a home-screen. It enhances <meta> tags already in HTML.
4-
> When members like the name or icons is missing from the manifest, user agents can search in a manifest's owner [HTML] document for things like icons and the application name
8+
> When members like the name or icons is missing from the manifest, user agents can search in a manifest's owner `[HTML]` document for things like icons and the application name.
9+
10+
## How
11+
12+
To add a manifest to an HTML document, create a file named `manifest.webmanifest`.
13+
14+
[Example Manifest](https://www.w3.org/TR/appmanifest/#x1-1-example-manifests)
15+
16+
Then add this line in the head of the html
17+
18+
`<link rel="manifest" href="manifest.webmanifest">`
19+
20+
### display
21+
22+
23+
https://www.w3.org/TR/appmanifest/#display-member
24+
25+
26+
```
27+
"fullscreen",
28+
"standalone",
29+
"minimal-ui",
30+
"browser"
31+
```
32+
33+
34+
### orientation
35+
36+
37+
https://www.w3.org/TR/screen-orientation/#orientationlocktype-enum
38+
39+
40+
```
41+
"any",
42+
"natural",
43+
"landscape",
44+
"portrait",
45+
"portrait-primary",
46+
"portrait-secondary",
47+
"landscape-primary",
48+
"landscape-secondary"
49+
```
50+
51+
### start_url
52+
53+
54+
To use the same as the html document that has the manifest link use an empty string.
55+
56+
57+
58+
559

660

761
## Content Type
@@ -10,13 +64,13 @@ manifest.webmanifest is a special file that contains meta-data about a web app.
1064
1165
The file extension is `.webmanifest`
1266

67+
68+
1369
## Links
1470

1571
https://www.w3.org/TR/appmanifest/#idl-index
1672

17-
1873
https://www.w3.org/TR/appmanifest
1974

20-
2175
https://developers.google.com/web/fundamentals/app-install-banners/
2276

0 commit comments

Comments
 (0)