Skip to content

Latest commit

 

History

History
131 lines (104 loc) · 4.38 KB

module-10.2-progressive-web-apps-pwas.md

File metadata and controls

131 lines (104 loc) · 4.38 KB
Raw

Module 10.2: Progressive Web Apps (PWAs)

Progressive Web Apps (PWAs) are a modern approach to building web applications that provide a native app-like experience while retaining the reach and accessibility of the web. They are designed to work offline, load quickly, and deliver a seamless user experience across different devices and platforms.

In this module, we'll delve into the concept of Progressive Web Apps and explore how to create them. We'll also provide examples to illustrate key principles and features of PWAs.

Key Concepts:

  1. Progressive Enhancement: PWAs are built using progressive enhancement principles, which means they work for everyone, regardless of their browser or device.

  2. Service Workers: Service workers are a fundamental part of PWAs. They are JavaScript files that run in the background and enable features like offline access, push notifications, and more.

  3. App Shell: PWAs often use an app shell architecture, which separates the core structure (HTML/CSS) from the dynamic content. This enables faster initial loading.

  4. Web Manifest: A web app manifest is a JSON file that provides metadata about the web application, such as its name, icons, and colors.

Example: Creating a Simple PWA

In this example, we'll create a basic PWA that displays a list of tasks. Users can add, remove, and complete tasks. We'll use HTML, CSS, and JavaScript to build the app and introduce PWA features.

  1. HTML and CSS:

    Create an HTML file for the app structure and a CSS file for styling. The following is a simplified structure:

    <!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <h1>Task List</h1>
  <ul id="tasks">
    <!-- Tasks will be added here -->
  </ul>
  <button id="addTask">Add Task</button>
  <script src="app.js"></script>
</body>
</html>
    /* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
/* Add more CSS for styling */

  2. JavaScript:

    Write JavaScript to manage tasks and add PWA features. This example focuses on the PWA aspects:

    // app.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

  3. Service Worker:

    Create a service worker file (service-worker.js) that caches app assets for offline use and serves them:

    // service-worker.js
const cacheName = 'task-list-v1';
const filesToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/manifest.json',
];

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((response) => {
      return response || fetch(e.request);
    })
  );
});

  4. Web Manifest:

    Create a web app manifest (manifest.json) to describe the app's metadata:

    {
  "name": "Task List",
  "short_name": "Tasks",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#0078e7",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

  5. Testing:

    Serve the app using a local server or deploy it to a hosting platform. Access the app in a supported browser. You can add the app to your home screen, and it should work offline after the initial visit.

This example illustrates a simplified PWA that caches essential assets for offline use. PWAs can offer much more, such as push notifications, background synchronization, and responsive design. Building a PWA provides a better user experience, improves performance, and increases engagement.

Remember that to fully leverage PWA features, you may need to consider more advanced topics like service