DEV Community

Cover image for Progressive Web Apps (PWAs)
Suhas Palani
Suhas Palani

Posted on

Progressive Web Apps (PWAs)

#pwa #web #javascript #webdev

Building Progressive Web Apps (PWAs)

In this post, we will explore Progressive Web Apps (PWAs), a modern approach to building web applications that offer a native app-like experience. I'll cover the basics of PWAs, their advantages, and the steps to create a PWA from scratch.

1. Introduction to Progressive Web Apps (PWAs)

What is a Progressive Web App (PWA)?

A Progressive Web App is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. PWAs are intended to work on any platform that uses a standards-compliant browser.

Key Features of PWAs:

  • Responsive: Works on any device and screen size.
  • Offline Capability: Functions offline or with poor network conditions using service workers.
  • App-Like Experience: Provides an app-like user experience with features like home screen installation.
  • Secure: Served over HTTPS to prevent snooping and ensure content integrity.
  • Re-engageable: Enables push notifications to keep users engaged.

2. Advantages of PWAs

Why Build a PWA?

  • Improved Performance: Faster loading times and smoother interactions.
  • Enhanced User Engagement: Push notifications and home screen access.
  • Lower Development Costs: Single codebase for both web and mobile experiences.
  • SEO Benefits: PWAs are discoverable by search engines.

3. Setting Up a PWA

Prerequisites:

  • Basic knowledge of HTML, CSS, and JavaScript.
  • Node.js and npm/yarn installed.

Creating a Simple PWA:

  1. Project Setup:

    mkdir my-pwa cd my-pwa npm init -y npm install express

  2. Project Structure:

    my-pwa/ ├── public/ │ ├── index.html │ ├── styles.css │ └── app.js ├── server.js ├── package.json └── manifest.json

4. Creating the Manifest File

manifest.json:

The manifest file provides metadata about the PWA and is required for installing the app on the home screen.

// manifest.json { "name": "My PWA", "short_name": "PWA", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#007bff", "icons": [ { "src": "icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }
Enter fullscreen mode Exit fullscreen mode

5. Creating the HTML, CSS, and JavaScript Files

index.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My PWA</title> <link rel="stylesheet" href="/styles.css"> <link rel="manifest" href="/manifest.json"> </head> <body> <h1>Welcome to My Progressive Web App!</h1> <script src="/app.js"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

styles.css:

/* styles.css */ body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; color: #333; }
Enter fullscreen mode Exit fullscreen mode

app.js:

// app.js if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js') .then(registration => { console.log('ServiceWorker registered: ', registration); }) .catch(error => { console.log('ServiceWorker registration failed: ', error); }); }); }
Enter fullscreen mode Exit fullscreen mode

6. Setting Up the Service Worker

A service worker is a script that the browser runs in the background, separate from the web page. It intercepts network requests and can cache resources to improve performance and offline capabilities.

service-worker.js:

// service-worker.js const CACHE_NAME = 'my-pwa-cache-v1'; const urlsToCache = [ '/', '/styles.css', '/app.js', '/manifest.json', '/icon-192x192.png', '/icon-512x512.png' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => { return cache.addAll(urlsToCache); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { return response || fetch(event.request); }) ); });
Enter fullscreen mode Exit fullscreen mode

7. Setting Up the Server

server.js:

const express = require('express'); const path = require('path'); const app = express(); const PORT = process.env.PORT || 3000; app.use(express.static(path.join(__dirname, 'public'))); app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); });
Enter fullscreen mode Exit fullscreen mode

Running the Server:

node server.js
Enter fullscreen mode Exit fullscreen mode

8. Testing Your PWA

  1. Open the App:

    • Navigate to http://localhost:3000 in your browser.

  2. Service Worker Registration:

    • Open the Developer Tools (F12 or right-click and select "Inspect").
    • Go to the "Application" tab.
    • Under "Service Workers", you should see your service worker registered.

  3. Add to Home Screen:

    • On a mobile device, open your PWA in the browser.
    • You should see a prompt to "Add to Home Screen".

9. Best Practices for PWAs

Best Practices:

  • Use HTTPS: PWAs require secure contexts.
  • Optimize Images: Use responsive images and lazy loading.
  • Minimize Network Requests: Cache resources effectively.
  • Ensure Offline Functionality: Provide meaningful offline experiences.

10. Conclusion

Summarize the key points covered:

  • Introduction to PWAs and their benefits.
  • Setting up a simple PWA with manifest, service worker, and caching.
  • Best practices for building robust PWAs.

11. Additional Resources

  • PWA Documentation
  • Tutorials and guides on advanced PWA topics.
  • Community forums and support.

Top comments (0)