Progressive Web App: Difference between revisions

From Chorke Wiki
Jump to navigation Jump to search
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Header==
==Header==
===Meta===
<source lang="html">
<source lang="html">
<!-- 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 -->
<!-- ms application -->
<meta name="theme-color"            content="#ffffff">
<meta name="theme-color"            content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./static/icons/pwa/ms/ms_icon_144x144.png">
<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-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">
-->
</source>
 
===Link===
<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/favicon_16@1x.png">
<link rel="icon" type="image/png" sizes="16x16"  href="./static/icons/pwa/favicon/favicon_16@1x.png">
<link rel="icon" type="image/png" sizes="32x32"  href="./static/icons/pwa/favicon/favicon_16@2x.png">
<link rel="icon" type="image/png" sizes="32x32"  href="./static/icons/pwa/favicon/favicon_16@2x.png">
Line 35: Line 51:
             <TileColor>#ffffff</TileColor>
             <TileColor>#ffffff</TileColor>
             <TileImage        src="./static/icons/pwa/ms/ms_icon_150x150.png"/>
             <TileImage        src="./static/icons/pwa/ms/ms_icon_150x150.png"/>
             <square70x70logo  src="./static/icons/pwa/ms/ms_icon_70x70.png"/>
             <square70x70logo  src="./static/icons/pwa/ms/ms_icon_70x70.png"/>
             <square150x150logo src="./static/icons/pwa/ms/ms_icon_150x150.png"/>
             <square150x150logo src="./static/icons/pwa/ms/ms_icon_150x150.png"/>
             <square310x310logo src="./static/icons/pwa/ms/ms_icon_310x310"/>
             <square310x310logo src="./static/icons/pwa/ms/ms_icon_310x310.png"/>
             <wide310x150logo  src="./static/icons/pwa/ms/ms_icon_310x150"/>
             <wide310x150logo  src="./static/icons/pwa/ms/ms_icon_310x150.png"/>
         </tile>
         </tile>
     </msapplication>
     </msapplication>
Line 48: Line 65:
<source lang="json">
<source lang="json">
{
{
     "name" :"Academia",
     "name" : "Academia",
     "icons":[{  
     "icons": [{
        "density": "0.75",
         "sizes"  : "36x36",
         "sizes"  : "36x36",
         "type"  : "image\/png",
         "type"  : "image\/png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_36@1x.png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_36@1x.png"
        "density": "0.75"
     },{
     },{
        "density": "1.0",
         "sizes"  : "48x48",
         "sizes"  : "48x48",
         "type"  : "image\/png",
         "type"  : "image\/png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_48@1x.png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_48@1x.png"
        "density": "1.0"
     },{
     },{
        "density": "1.33",
        "sizes"  : "64x64",
        "type"  : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_64@1x.png"
    },{
        "density": "1.5",
         "sizes"  : "72x72",
         "sizes"  : "72x72",
         "type"  : "image\/png",
         "type"  : "image\/png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_36@2x.png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_36@2x.png"
        "density": "1.5"
     },{
     },{
        "density": "2.0",
         "sizes"  : "96x96",
         "sizes"  : "96x96",
         "type"  : "image\/png",
         "type"  : "image\/png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_48@2x.png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_48@2x.png"
        "density": "2.0"
     },{
     },{
        "density": "2.66",
        "sizes"  : "128x128",
        "type"  : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_64@2x.png"
    },{
        "density": "3.0",
         "sizes"  : "144x144",
         "sizes"  : "144x144",
         "type"  : "image\/png",
         "type"  : "image\/png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_36@4x.png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_36@4x.png"
        "density": "3.0"
     },{
     },{
        "density": "4.0",
         "sizes"  : "192x192",
         "sizes"  : "192x192",
         "type"  : "image\/png",
         "type"  : "image\/png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_48@4x.png",
         "src"    : ".\/static\/icons\/pwa\/android\/android_icon_48@4x.png"
         "density": "4.0"
    },{
         "density": "5.33",
        "sizes"  : "256x256",
        "type"  : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_64@4x.png"
     }]
     }]
}
}
Line 84: Line 116:


==References==
==References==
{|
| valign="top" |
* [https://www.sencha.com/blog/creating-progressive-web-applications-using-sencha-ext-js Creating Progressive Web Apps using Ext JS 6]
* [https://www.sencha.com/blog/creating-progressive-web-applications-using-sencha-ext-js Creating Progressive Web Apps using Ext JS 6]
* [https://docs.sencha.com/cmd/guides/progressive_web_apps.html Building Progressive Web Apps with Cmd 6.5.0]
* [https://docs.sencha.com/cmd/guides/progressive_web_apps.html Building Progressive Web Apps with Cmd 6.5.0]
* [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" |
* [https://stackoverflow.com/questions/23043429 What is a simple browserconfig.xml]
* [https://www.favicon-generator.org/ Favicon & Appicon Generator]
* [https://liferay.dev/blogs/-/blogs/ie11-windows-tile-support IE11/Windows Tile Support]
* [https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html Apple Web Application]
* [https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/ Apple App Icon]
|}

Latest revision as of 21: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/favicon_16@1x.png">
<link rel="icon" type="image/png" sizes="32x32"   href="./static/icons/pwa/favicon/favicon_16@2x.png">
<link rel="icon" type="image/png" sizes="96x96"   href="./static/icons/pwa/favicon/favicon_16@6x.png">
<link rel="icon" type="image/png" sizes="192x192" href="./static/icons/pwa/favicon/favicon_16@12x.png">
<!-- apple application -->
<link rel="apple-touch-icon"      sizes="57x57"   href="./static/icons/pwa/apple/apple_icon_57@1x.png">
<link rel="apple-touch-icon"      sizes="60x60"   href="./static/icons/pwa/apple/apple_icon_60@1x.png">
<link rel="apple-touch-icon"      sizes="72x72"   href="./static/icons/pwa/apple/apple_icon_72@1x.png">
<link rel="apple-touch-icon"      sizes="76x76"   href="./static/icons/pwa/apple/apple_icon_76@1x.png">
<link rel="apple-touch-icon"      sizes="114x114" href="./static/icons/pwa/apple/apple_icon_57@2x.png">
<link rel="apple-touch-icon"      sizes="120x120" href="./static/icons/pwa/apple/apple_icon_60@2x.png">
<link rel="apple-touch-icon"      sizes="144x144" href="./static/icons/pwa/apple/apple_icon_72@2x.png">
<link rel="apple-touch-icon"      sizes="152x152" href="./static/icons/pwa/apple/apple_icon_76@2x.png">
<link rel="apple-touch-icon"      sizes="167x167" href="./static/icons/pwa/apple/apple_icon_83.5@2x.png">
<link rel="apple-touch-icon"      sizes="180x180" href="./static/icons/pwa/apple/apple_icon_60@3x.png">
<!-- 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\/android_icon_36@1x.png"
    },{
        "density": "1.0",
        "sizes"  : "48x48",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_48@1x.png"
    },{
        "density": "1.33",
        "sizes"  : "64x64",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_64@1x.png"
    },{
        "density": "1.5",
        "sizes"  : "72x72",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_36@2x.png"
    },{
        "density": "2.0",
        "sizes"  : "96x96",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_48@2x.png"
    },{
        "density": "2.66",
        "sizes"  : "128x128",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_64@2x.png"
    },{
        "density": "3.0",
        "sizes"  : "144x144",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_36@4x.png"
    },{
        "density": "4.0",
        "sizes"  : "192x192",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_48@4x.png"
    },{
        "density": "5.33",
        "sizes"  : "256x256",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/android_icon_64@4x.png"
    }]
}

References

Retrieved from "https://cdn.chorke.org/weke/index.php?title=Progressive_Web_App&oldid=4283"