[PWA] (1/2) Add web app manifest

This commit is contained in:
Alexey Rodionov 2018-03-14 15:09:05 +03:00 committed by Jordan Eldredge
parent 098779b9c8
commit 4bafd25349
12 changed files with 63 additions and 8 deletions

BIN
images/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

1
images/manifest/icon.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.1 KiB

View file

@ -11,8 +11,35 @@
<meta property="og:type" content="website" />
<meta property="og:url" content="https://jordaneldredge.com/projects/winamp2-js/" />
<meta property="og:image" content="https://jordaneldredge.com/projects/winamp2-js/preview.png" />
<link rel='stylesheet' type='text/css' href='css/page.css' />
<link rel="shortcut icon" sizes="16x16 32x32" href="favicon.ico">
<link rel='stylesheet' type='text/css' href='./css/page.css' />
<link rel="shortcut icon" sizes="16x16 32x32" href="./images/favicon.ico">
<!-- See https://goo.gl/OOhYW5 -->
<link rel="manifest" href="./manifest.json">
<!-- See https://goo.gl/qRE0vM -->
<meta name="theme-color" content="#4b4b4b">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Winamp">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Winamp">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="./images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="./images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="./images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="./images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#4b4b4b">
<meta name="msapplication-tap-highlight" content="no">
</head>
<body>
@ -30,7 +57,7 @@
<a href='https://github.com/captbaritone/winamp2-js'>GitHub</a>
</p>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="7py29249dpeddu8"></script>
<script src="built/winamp.js"></script>
<script src="./built/winamp.js"></script>
</body>
</html>
</html>

View file

@ -7,7 +7,7 @@
<body>
<div id='winamp2-js'></div>
<script src="built/winamp.bundle.js"></script>
<script src="./built/winamp.bundle.js"></script>
<script>
const Winamp = window.winamp2js;
new Winamp({
@ -25,4 +25,4 @@
</script>
</body>
</html>
</html>

27
manifest.json Normal file
View file

@ -0,0 +1,27 @@
{
"name": "Winamp",
"short_name": "Winamp",
"description": "Winamp 2.9 reimplemented in HTML5 and JavaScript",
"start_url": "./?utm_source=web_app_manifest",
"scope": "./",
"display": "standalone",
"theme_color": "#4b4b4b",
"background_color": "#ffffff",
"icons": [
{
"src": "./images/manifest/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./images/manifest/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "./images/manifest/icon.svg",
"sizes": "513x513",
"type": "image/svg+xml"
}
]
}

View file

@ -3,10 +3,10 @@
<head>
<title>Winamp2 Skin Explorer</title>
<meta charset="utf-8" />
<link rel="shortcut icon" sizes="16x16 32x32" href="favicon.ico">
<link rel="shortcut icon" sizes="16x16 32x32" href="./images/favicon.ico">
</head>
<body>
<div id='skin'></div>
<script src="built/skinExplorer.js"></script>
<script src="./built/skinExplorer.js"></script>
</body>
</html>