DEV Community

NAVEENKUMAR
NAVEENKUMAR

Posted on

Progressive Web App (PWA)

<!DOCTYPE html>




PWA








@font-face {
font-family: 'Comic Neue', cursive;
src: url(sansation_light.woff);
}

  • { font-family: 'Comic Neue', cursive;

}
u{
color: rgb(33, 142, 146);
height: 0.1px;
}

.naveen h1{
font-size: 30px;
text-align: center;
font-weight: bold;
}
.naveen h3{
font-size: 26px;
}
.naveen p{
font-size: 17px;
}
.naveen a{
text-decoration: none;
}
.highlight{
background-color: black;
color: white;
padding-top: 5px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
border-radius: 4px;
font-size: 13px;

}
.naveen a:hover{
text-decoration: underline;
}



Convert Any Static Website To PWA

  <h3>What is PWA?</h3>
  <p>Progressive Web Apps are user experiences that have the reach of the web, and are:</p>

  <p><b>Reliable</b> - <em>Load instantly and never show the downasaur, even in uncertain network conditions.</em></p>

  <p><b>Fast</b> - <em>Respond quickly to user interactions with silky smooth animations and no janky scrolling.</em></p>

  <p><b>Engaging</b> - <em>Feel like a natural app on the device, with an immersive user experience.</em></p>

  <p>This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.</p>

<h3>1. Create a manifest.json file</h3>

<p>Manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.</p>

<p>A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.<br></p>


<div class="highlight"><pre class="highlight plaintext"><code>{
  "name": "V NAVEEN KUMAR",
  "short_name": "NAVEEN",
  "icons": [
      {
          "src": "img/logo.png",
          "sizes": "92x92",
          "type": "image/png"
      },
      {
          "src": "/img/logo.png",
          "sizes": "144x144",
          "type": "image/png"
      },
      {
          "src": "img/logo.png",
          "sizes": "152x152",
          "type": "image/png"
      }        
  ],
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#f0f2f5",
  "theme_color": "#96f2d7"
}
</code></pre></div> <br>

<p>And also connect it in your <code>index.html</code> in order to work.</p>

<p style="background-color: rgb(204, 212, 218);display: inline;"><code>&lt;link rel="manifest" href="manifest.json"&gt;</code></p>

<h3> 2. Add a Service Worker</h3>

<p>Service Worker is the background script which the browser can run while the user is not on the page. It is the element that gives the offline support and gets active when the notification is pushed.</p>

<p><b>Create a Service Worker (create a file with name SW.js),</b></p>

<p style="background-color: rgb(204, 212, 218);display: inline;"><code>/** An empty service worker! */<br>
  self.addEventListener('fetch', function(event) {<br>
  });</code></p>

  <p>And that’s it.</p>

  <h3>3. Register the Service Worker</h3>

  <p>You will have to register the code in your website’s code, for that, open up your <code>App.js</code> file and paste this Now, </p>

<p style="background-color: rgb(204, 212, 218);display: inline;"><code>navigator.serviceWorker &amp;&amp; <br>
 navigator.serviceWorker.register<br>('SW.js').then(function (registration)<br>
 {<br>
 });</code></p><br>

<p>the code will get executed on every single page load. Check if its working properly by reloading the page and then checking – chrome://serviceworker-internals/</p>

<p>Now your website will be able to prompt users to install it on their home screens and secondly, you will be able to make your site able to support push notifications and even work offline.</p>

<h3> 4. Make the Site Work Offline</h3>

<p>First step would be to open sw.js script and get hold of caches object. Once you have that, update the code and app the entire website to cache.</p>

<p>Try out how it’s working now. Uninstall the present app and load it on Chrome. Next, refresh the page and select ‘Add to Home Screen’ in the right corner menu.</p>

<p>For abiding by the rule that when Service Worker changes, the page should reload and reinstall it, all you will have to do is add a component which has the ‘version’ of the service worker. When that changes, the install movement happens again, caching the resources that would have changed.</p>

<p>Congratulations, you now know how to turn the website into Progressive Web App and if you followed the steps side-by-side, you have now even migrated your website into a Progressive Web App!</p><br>
<p style="color: red;">NOTE <span style="color: black;">: Dont Copy My Work! Learn From This, And Make One By Your Own.</span> </p> <br>
<h3><b>Technical components of a PWA?</b></h3>
<img src="pic.jpg" alt="" style="width: 100%;border: 1px solid black;"><br>



 <h3><u>Take A Look At The Demo PWA:</u></h3>
<span style="font-size: 20px;font-weight: bold;color: black;">1. </span><a href="https://naveenkumar.netlify.app/" ><span style="color: rgb(56, 56, 196);font-size: 19px;font-weight: bold;">Demo</span></a>

<br>
<h3 style="font-weight: bolder;text-align: center;"> Get More Infomation By Google</h3>

<p style="text-align: center;"><a href="https://developers.google.com/web/progressive-web-apps">https://developers.google.com/web/progressive-web-apps</a></p>

<div class="alert alert-info alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <p style="color:black;font-size:15px;"><strong>If U Want Demo Source Code - </strong>Visit My Site 👇</p>
</div>

<h2 style="text-align: center;font-weight: bold;">NAVEEN</h2>

<p style="text-align: center;">Visit Me: <a href="https://naveenkumar.netlify.app/" style="color: rgb(95, 129, 204)">https://naveen.site</a></p><br><br>



Top comments (0)