Progressive Web App: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(→Header) |
||
| Line 24: | Line 24: | ||
<!-- android application --> | <!-- android application --> | ||
<link rel="manifest" href="./static/config/manifest.json"> | <link rel="manifest" href="./static/config/manifest.json"> | ||
</source> | |||
==Browser Config== | |||
<code>browserconfig.xml</code> | |||
<source lang="xml"> | |||
<?xml version="1.0" encoding="UTF-8"?> | |||
<browserconfig> | |||
<msapplication> | |||
<tile> | |||
<TileColor>#ffffff</TileColor> | |||
<TileImage src="./static/icons/pwa/ms/ms_icon_150x150.png"/> | |||
<square70x70logo src="./static/icons/pwa/ms/ms_icon_70x70.png"/> | |||
<square150x150logo src="./static/icons/pwa/ms/ms_icon_150x150.png"/> | |||
<square310x310logo src="./static/icons/pwa/ms/ms_icon_310x310"/> | |||
<wide310x150logo src="./static/icons/pwa/ms/ms_icon_310x150"/> | |||
</tile> | |||
</msapplication> | |||
</browserconfig> | |||
</source> | |||
==Manifest== | |||
<code>manifest.json</code> | |||
<source lang="json"> | |||
{ | |||
"name" :"Academia", | |||
"icons":[{ | |||
"sizes" : "36x36", | |||
"type" : "image\/png", | |||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]", | |||
"density": "0.75" | |||
},{ | |||
"sizes" : "48x48", | |||
"type" : "image\/png", | |||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]", | |||
"density": "1.0" | |||
},{ | |||
"sizes" : "72x72", | |||
"type" : "image\/png", | |||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]", | |||
"density": "1.5" | |||
},{ | |||
"sizes" : "96x96", | |||
"type" : "image\/png", | |||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]", | |||
"density": "2.0" | |||
},{ | |||
"sizes" : "144x144", | |||
"type" : "image\/png", | |||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]", | |||
"density": "3.0" | |||
},{ | |||
"sizes" : "192x192", | |||
"type" : "image\/png", | |||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]", | |||
"density": "4.0" | |||
}] | |||
} | |||
</source> | </source> | ||
Revision as of 22:15, 5 February 2020
Header
<!-- ms application -->
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./static/icons/pwa/ms/ms_icon_144x144.png">
<meta name="msapplication-config" content="./static/config/browserconfig.xml">
<!-- web application -->
<link rel="icon" type="image/png" sizes="16x16" href="./static/icons/pwa/favicon/[email protected]">
<link rel="icon" type="image/png" sizes="32x32" href="./static/icons/pwa/favicon/[email protected]">
<link rel="icon" type="image/png" sizes="96x96" href="./static/icons/pwa/favicon/[email protected]">
<link rel="icon" type="image/png" sizes="192x192" href="./static/icons/pwa/favicon/[email protected]">
<!-- apple application -->
<link rel="apple-touch-icon" sizes="57x57" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon" sizes="60x60" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon" sizes="72x72" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon" sizes="76x76" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon" sizes="114x114" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon" sizes="120x120" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon" sizes="144x144" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon" sizes="152x152" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon" sizes="167x167" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon" sizes="180x180" href="./static/icons/pwa/apple/[email protected]">
<!-- android application -->
<link rel="manifest" href="./static/config/manifest.json">
Browser Config
browserconfig.xml
<?xml version="1.0" encoding="UTF-8"?>
<browserconfig>
<msapplication>
<tile>
<TileColor>#ffffff</TileColor>
<TileImage src="./static/icons/pwa/ms/ms_icon_150x150.png"/>
<square70x70logo src="./static/icons/pwa/ms/ms_icon_70x70.png"/>
<square150x150logo src="./static/icons/pwa/ms/ms_icon_150x150.png"/>
<square310x310logo src="./static/icons/pwa/ms/ms_icon_310x310"/>
<wide310x150logo src="./static/icons/pwa/ms/ms_icon_310x150"/>
</tile>
</msapplication>
</browserconfig>
Manifest
manifest.json
{
"name" :"Academia",
"icons":[{
"sizes" : "36x36",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]",
"density": "0.75"
},{
"sizes" : "48x48",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]",
"density": "1.0"
},{
"sizes" : "72x72",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]",
"density": "1.5"
},{
"sizes" : "96x96",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]",
"density": "2.0"
},{
"sizes" : "144x144",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]",
"density": "3.0"
},{
"sizes" : "192x192",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]",
"density": "4.0"
}]
}