Progressive Web App: Difference between revisions
Jump to navigation
Jump to search
(→Meta) |
|||
| (5 intermediate revisions by the same user not shown) | |||
| Line 22: | Line 22: | ||
<source lang="html"> | <source lang="html"> | ||
<!-- web application --> | <!-- web application --> | ||
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> | |||
<link rel="icon" type="image/png" sizes="16x16" href="./static/icons/pwa/favicon/[email protected]"> | <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="32x32" href="./static/icons/pwa/favicon/[email protected]"> | ||
| Line 75: | Line 76: | ||
"type" : "image\/png", | "type" : "image\/png", | ||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]" | "src" : ".\/static\/icons\/pwa\/android\/[email protected]" | ||
},{ | |||
"density": "1.33", | |||
"sizes" : "64x64", | |||
"type" : "image\/png", | |||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]" | |||
},{ | },{ | ||
"density": "1.5", | "density": "1.5", | ||
| Line 85: | Line 91: | ||
"type" : "image\/png", | "type" : "image\/png", | ||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]" | "src" : ".\/static\/icons\/pwa\/android\/[email protected]" | ||
},{ | |||
"density": "2.66", | |||
"sizes" : "128x128", | |||
"type" : "image\/png", | |||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]" | |||
},{ | },{ | ||
"density": "3.0", | "density": "3.0", | ||
| Line 95: | Line 106: | ||
"type" : "image\/png", | "type" : "image\/png", | ||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]" | "src" : ".\/static\/icons\/pwa\/android\/[email protected]" | ||
},{ | |||
"density": "5.33", | |||
"sizes" : "256x256", | |||
"type" : "image\/png", | |||
"src" : ".\/static\/icons\/pwa\/android\/[email protected]" | |||
}] | }] | ||
} | } | ||
| Line 106: | Line 122: | ||
* [https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12 Progressive Web Apps with React.js: Part I] | * [https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12 Progressive Web Apps with React.js: Part I] | ||
* [https://medium.com/a-man-with-no-server/create-a-progressive-web-app-with-react-792ed8c69bc7 Create a Progressive Web App with React] | * [https://medium.com/a-man-with-no-server/create-a-progressive-web-app-with-react-792ed8c69bc7 Create a Progressive Web App with React] | ||
* [https://docs.sencha.com/cmd/guides/extjs/cmd_app.html Using Sencha Cmd 6.5 with Ext JS 6.2] | |||
* [https://github.com/sencha-extjs-examples/MultiPackageDemo Sencha ExtJS Multi Package Demo] | |||
* [https://cdn.chorke.org/docs/academia/icons/ Chorke Academia Icons] | |||
* [https://github.com/sencha-extjs-examples/PWA Sencha PWA Example] | |||
* [[ExtJS]] | |||
| valign="top" | | | valign="top" | | ||
* [https://stackoverflow.com/questions/23043429 What is a simple browserconfig.xml] | |||
* [https://www.favicon-generator.org/ Favicon & Appicon Generator] | * [https://www.favicon-generator.org/ Favicon & Appicon Generator] | ||
* [https://liferay.dev/blogs/-/blogs/ie11-windows-tile-support IE11/Windows Tile Support] | * [https://liferay.dev/blogs/-/blogs/ie11-windows-tile-support IE11/Windows Tile Support] | ||
Latest revision as of 20:40, 2 January 2021
Header
Meta
<!-- apple application -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Academia">
<meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">
<!-- 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"><!--
<meta name="msapplication-wide310x150logo" content="./static/icons/pwa/ms/ms_icon_310x150">
<meta name="msapplication-square310x310logo" content="./static/icons/pwa/ms/ms_icon_310x310">
<meta name="msapplication-square70x70logo" content="./static/icons/pwa/ms/ms_icon_70x70.png">
<meta name="msapplication-square150x150logo" content="./static/icons/pwa/ms/ms_icon_150x150.png">
<meta name="msapplication-config" content="none">
-->
Link
<!-- web application -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<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.png"/>
<wide310x150logo src="./static/icons/pwa/ms/ms_icon_310x150.png"/>
</tile>
</msapplication>
</browserconfig>
Manifest
manifest.json
{
"name" : "Academia",
"icons": [{
"density": "0.75",
"sizes" : "36x36",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]"
},{
"density": "1.0",
"sizes" : "48x48",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]"
},{
"density": "1.33",
"sizes" : "64x64",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]"
},{
"density": "1.5",
"sizes" : "72x72",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]"
},{
"density": "2.0",
"sizes" : "96x96",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]"
},{
"density": "2.66",
"sizes" : "128x128",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]"
},{
"density": "3.0",
"sizes" : "144x144",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]"
},{
"density": "4.0",
"sizes" : "192x192",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]"
},{
"density": "5.33",
"sizes" : "256x256",
"type" : "image\/png",
"src" : ".\/static\/icons\/pwa\/android\/[email protected]"
}]
}