All Projects → gokulkrishh → Awesome Meta And Manifest

gokulkrishh / Awesome Meta And Manifest

Licence: mit
⚡ Awesome collection of meta tags & manifest properties.

Projects that are alternatives of or similar to Awesome Meta And Manifest

Demo Progressive Web App
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc,
Stars: ✭ 798 (+59.92%)
Mutual labels:  chrome, google-chrome, html5, pwa, progressive-web-app
Uget Chrome Wrapper
Moved to https://github.com/ugetdm/uget-integrator and https://github.com/ugetdm/uget-extension
Stars: ✭ 74 (-85.17%)
Mutual labels:  chrome, firefox, google-chrome, opera
Https Localhost
HTTPS server running on localhost
Stars: ✭ 122 (-75.55%)
Mutual labels:  chrome, firefox, pwa, progressive-web-app
Vue Pwa Asset Generator
PWA asset generator perfect with VueJS framework (but useful for all PWA!)
Stars: ✭ 97 (-80.56%)
Mutual labels:  manifest, icons, pwa, progressive-web-app
Lazy
Kule Lazy4 / CSS Framework
Stars: ✭ 147 (-70.54%)
Mutual labels:  chrome, firefox, opera, html5
Scriptsafe
a browser extension to bring security and privacy to chrome, firefox, and opera
Stars: ✭ 434 (-13.03%)
Mutual labels:  chrome, firefox, opera
Webpack Pwa Manifest
Progressive Web App Manifest Generator for Webpack, with auto icon resizing and fingerprinting support.
Stars: ✭ 447 (-10.42%)
Mutual labels:  manifest, icons, pwa
Octotree
Browser extension that enhances GitHub code review and exploration. You can download Octotree for your browser from our website.
Stars: ✭ 21,726 (+4253.91%)
Mutual labels:  chrome, firefox, opera
Gadebugger
A Chrome, Firefox & Opera devtools extension for debugging Google Analytics tracking code
Stars: ✭ 225 (-54.91%)
Mutual labels:  chrome, firefox, opera
Sponsorblock
Skip YouTube video sponsors (browser extension)
Stars: ✭ 3,627 (+626.85%)
Mutual labels:  chrome, firefox, opera
Adfilt
The place where I, DandelionSprout, store my web filter lists for countless topics, including my Nordic adblock list. As simple as that, really.
Stars: ✭ 217 (-56.51%)
Mutual labels:  chrome, firefox, opera
Pwa Asset Generator
Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images, favicons and mstile images. Updates manifest.json and index.html files with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.
Stars: ✭ 1,787 (+258.12%)
Mutual labels:  manifest, pwa, progressive-web-app
Extensions
Source code of Raindrop.io browser extension (Chrome, Firefox, Opera)
Stars: ✭ 446 (-10.62%)
Mutual labels:  chrome, firefox, opera
Emoji Helper
A small cross-browser emoji cheatsheet extension 👍
Stars: ✭ 194 (-61.12%)
Mutual labels:  chrome, firefox, opera
Metamask Extension
🌐 🔌 The MetaMask browser extension enables browsing Ethereum blockchain enabled websites
Stars: ✭ 6,585 (+1219.64%)
Mutual labels:  chrome, firefox, opera
Crunchyroll Html5
A fully fledged HTML5 player for Crunchyroll.
Stars: ✭ 175 (-64.93%)
Mutual labels:  chrome, firefox, html5
exploration-service-worker
Let's get started with ServiceWorker
Stars: ✭ 14 (-97.19%)
Mutual labels:  opera, progressive-web-app, google-chrome
Jfa Pwa Toolkit
⚡️ PWA Features to Any Website (very Fast & Easy)
Stars: ✭ 245 (-50.9%)
Mutual labels:  manifest, pwa, progressive-web-app
Fofa view
FOFA Pro view 是一款FOFA Pro 资产展示浏览器插件,目前兼容 Chrome、Firefox、Opera。
Stars: ✭ 291 (-41.68%)
Mutual labels:  chrome, firefox, opera
Melonjs
a fresh & lightweight javascript game engine
Stars: ✭ 3,721 (+645.69%)
Mutual labels:  chrome, firefox, html5

Awesome Meta Tags & Manifest Properties Awesome PRs Welcome

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

<!-- Must -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">
<title>Page Title</title>

<!-- Android  -->
<meta name="theme-color" content="red">
<meta name="mobile-web-app-capable" content="yes">

<!-- iOS -->
<meta name="apple-mobile-web-app-title" content="Application Title">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

<!-- Windows  -->
<meta name="msapplication-navbutton-color" content="red">
<meta name="msapplication-TileColor" content="red">
<meta name="msapplication-TileImage" content="ms-icon-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">

<!-- Pinned Sites  -->
<meta name="application-name" content="Application Name">
<meta name="msapplication-tooltip" content="Tooltip Text">
<meta name="msapplication-starturl" content="/">

<!-- Tap highlighting  -->
<meta name="msapplication-tap-highlight" content="no">

<!-- UC Mobile Browser  -->
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">

<!-- Disable night mode for this page  -->
<meta name="nightmode" content="enable/disable">

<!-- Fitscreen  -->
<meta name="viewport" content="uc-fitscreen=yes"/>

<!-- Layout mode -->
<meta name="layoutmode" content="fitscreen/standard">

<!-- imagemode - show image even in text only mode  -->
<meta name="imagemode" content="force">

<!-- Orientation  -->
<meta name="screen-orientation" content="portrait">

Link Tags

<!-- Main Link Tags  -->
<link href="favicon-16.png" rel="icon" type="image/png" sizes="16x16">
<link href="favicon-32.png" rel="icon" type="image/png" sizes="32x32">
<link href="favicon-48.png" rel="icon" type="image/png" sizes="48x48">

<!-- iOS  -->
<link href="touch-icon-iphone.png" rel="apple-touch-icon">
<link href="touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76">
<link href="touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120">
<link href="touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152">

<!-- Startup Image  -->
<link href="touch-icon-start-up-320x480.png" rel="apple-touch-startup-image">

<!-- Pinned Tab  -->
<link href="path/to/icon.svg" rel="mask-icon" size="any" color="red">

<!-- Android  -->
<link href="icon-192x192.png" rel="icon" sizes="192x192">
<link href="icon-128x128.png" rel="icon" sizes="128x128">

<!-- Others -->
<link href="favicon.icon" rel="shortcut icon" type="image/x-icon">

<!-- UC Browser  -->
<link href="images/icon-52x52.png" rel="apple-touch-icon-precomposed" sizes="57x57">
<link href="images/icon-72x72.png" rel="apple-touch-icon" sizes="72x72">

<!-- Manifest.json  -->
<link href="/manifest.json" rel="manifest">

Manifest

{
  "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 favor of the specified solution: userVisibleOnly.

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

References

Contributions

  • If you wish to contribute to this repository, fork it and send a PR 😬.
  • And, if you like the repo, 🌟 it.
MIT Licensed
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].