Progressive Web Apps (PWA) Tutorial

<h2>Introduction</h2>
<p>Progressive Web Apps (PWAs) are web applications that provide a native app-like experience. They work offline, load fast, and can be installed on devices.</p>

<h3>1. Setting Up a PWA</h3>
<p>Start with a basic web app. Then add manifest and service worker.</p>

<h4>Manifest File</h4>
<pre><code>// public/manifest.json

{ "name": "My PWA App", "short_name": "PWAApp", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#0d6efd", "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ] }</code></pre>

<h4>Service Worker</h4>
<pre><code>// public/sw.js

self.addEventListener('install', (event) => { console.log('Service Worker installing...'); });

self.addEventListener('fetch', (event) => { event.respondWith(fetch(event.request)); });</code></pre>

<h3>2. Registering the Service Worker</h3>
<pre><code>// index.js

if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered: ', reg)) .catch(err => console.log('SW registration failed: ', err)); }); }</code></pre>

<h3>3. Adding Offline Support</h3>
<p>Cache essential assets to allow offline access:</p>
<pre><code>self.addEventListener('install', (event) =&gt; {

event.waitUntil( caches.open('v1').then(cache => { return cache.addAll([ '/', '/index.html', '/styles.css', '/script.js' ]); }) ); });

self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); });</code></pre>

<h3>4. Making the App Installable</h3>
<ul>
  <li>Ensure manifest file is linked in HTML:</li>
  <pre><code>&lt;link rel="manifest" href="/manifest.json"&gt;</code></pre>
  <li>Use HTTPS hosting</li>
  <li>Add app icons and theme color</li>
</ul>

<h3>5. Testing PWA</h3>
<ul>
  <li>Use Chrome DevTools &gt; Application tab</li>
  <li>Check if service worker is active</li>
  <li>Simulate offline mode and test app behavior</li>
</ul>

<h3>Conclusion</h3>
<p>By following this tutorial, you can turn any web application into a fast, offline-capable, installable Progressive Web App.</p>