Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gokulkrishh/awesome-meta-and-manifest

⚡ Awesome collection of meta tags & manifest properties.
https://github.com/gokulkrishh/awesome-meta-and-manifest

List: awesome-meta-and-manifest

awesome awesome-list awesome-lists chrome firefox google-chrome html html5 icons manifest manifest-json manifest-properties manifests meta-tags opera progressive-web-app pwa uc-browser

Last synced: about 2 months ago
JSON representation

⚡ Awesome collection of meta tags & manifest properties.

Awesome Lists containing this project

README

        

# Awesome Meta Tags & Manifest Properties [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

> Awesome collection of meta tags and manifest properties available for building progressive web applications.

## Browsers Support

### Desktop

- `Google Chrome`
- `Mozilla Firefox`
- `Opera`
- `Edge`
- `Safari`

### Mobile

- `Google Chrome`
- `Firefox`
- `Opera`
- `Safari`
- `Samsung Internet Browser`
- `UC Browser` (partial support)

### Meta Tags

```html

Page Title

```

### Link Tags
```html

```

### Manifest
```json
{
"name": "app name",
"short_name": "short name",
"icons": [{
"src": "images/icons/icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/icons/icon-168x168.png",
"sizes": "168x168",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"gcm_sender_id": "",
"gcm_user_visible_only": true,
"start_url": "/?utm_source=homescreen",
"permissions": [
"gcm"
],
"scope": "",
"orientation": "portrait",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff"
}
```

### Some issues in browsers & its fixes

#### `Android`

- Icons for manifest.json, doesn't need to have many icons. Adding ```192px``` size icon will scale perfectly for most of the devices.
- ```gcm_user_visible_only``` key removed in [Chrome 45](https://www.chromestatus.com/feature/5778950739460096) favor of the specified solution: [```userVisibleOnly```](https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe).

#### `iOS`

- In safari mobile browser, add to home screen will add black background for icon if its in PNG format. Make it as JPG to work.
- Safari doesn't support manifest.json for add to home screen yet.

#### `UC Browser`

- Meta tag ```browsermode``` is not working.
- Link tag ```icon``` for home screen is not working.

### Tools

- [Manifest Validator](https://manifest-validator.appspot.com)
- [Add To Home Icon Generator](https://romannurik.github.io/AndroidAssetStudio/index.html)
- [Icon Size Generator](http://realfavicongenerator.net/)

### References

- [Apple Developer Site](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
- [Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/)
- [UC Browser](http://www.uc.cn/download/UCBrowser_U3_API.doc)
- [Microsoft Internet Explorer](https://github.com/joshbuchea/HEAD#microsoft-internet-explorer)
- [PWACompat](https://github.com/GoogleChromeLabs/pwacompat) - to add support for splash screen in any device.

#### Contributions

- If you wish to contribute to this repository, fork it and send a PR 😬.
- And, if you like the repo, 🌟 it.

##### MIT Licensed