Progressive Web Apps (PWA) how to use in jquery

Posted by on

PWA:-

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.
PWA
PWA Install
PWA
PWA Install
PwA
After Installation as like App

Use in jquery

use in Head tag:-
-------------------------------------------------------------------------
<link rel="manifest" href="/manifest.json" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="application-name" content="CampusPro" />
<meta name="apple-mobile-web-app-title" content="CampusPro" />
<meta name="theme-color" content="yellow" />
<meta name="msapplication-navbutton-color" content="yellow" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="msapplication-starturl" content="/login.aspx" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><link rel="icon" sizes="128x128" href="images/icons/icon-128x128.png" />
<link rel="apple-touch-icon" sizes="128x128" href="/images/icons/icon-128x128.png" />
<link rel="icon" sizes="192x192" href="images/icons/icon-192x192.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/images/icons/icon-192x192.png" />
<link rel="icon" sizes="384x384" href="/images/icons/icon-384x384.png" />
<link rel="apple-touch-icon" sizes="384x384" href="/images/icons/icon-384x384.png" />
<link rel="icon" sizes="512x512" href="/images/icons/icon-512x512.png" />
<link rel="apple-touch-icon" sizes="512x512" href="/images/icons/icon-512x512.png" />

 ------------------------------------------------
Make A menifest file menifest.js
------------------------------------------------

{
 "name": "Twitter",
  "short_name": "Twitter",
  "lang": "en-US",
  "start_url": "/home.html",
  "display": "standalone",
  "theme_color": "yellow",
  "background_color": "yellow",
  "icons": [
    {
      "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-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}
------------------------------------------------------
index.html
------------------------------------------------------


<div id="installContainer" class="hidden"> 





        <button id="butInstall" type="button">



Install </button>



</div>



    <div class="glitchButton" style="position: fixed; top: 20px; right: 20px;">



    </div>

Comments

Post a Comment