Skip to content

Latest commit

 

History

History
69 lines (47 loc) · 2.5 KB

README.md

File metadata and controls

69 lines (47 loc) · 2.5 KB
Raw

PWA with Advanced Service Worker Strategies

This is a DevToys.io blog tutorial example PWA app for educational purpose only!

Visit 🔗 Here for the Original Blog!

This project demonstrates how to implement advanced service worker strategies in a Progressive Web App (PWA), including offline support, background sync, push notifications, and caching strategies.

Features

  1. Cache-First Strategy: Caches static assets and serves them from the cache first.
  2. Network-First Strategy: Tries to fetch API data from the network first, and falls back to the cache if the network is unavailable.
  3. Stale-While-Revalidate Strategy: Serves cached content while fetching the latest version from the network.
  4. Background Sync: Ensures form data is synced with the server when connectivity is restored.
  5. Push Notifications: Sends notifications to users even when the app is not open.

Project Structure

  • index.html: Main HTML file for the PWA.
  • styles.css: CSS file for styling the PWA.
  • offline.html: Offline fallback page.
  • app.js: JavaScript file for service worker registration and IndexedDB operations.
  • service-worker.js: Service worker file implementing caching strategies and background sync.
  • server.js: Node.js server to handle API requests and serve static files.

Setup

Prerequisites

  • Node.js and npm installed on your machine.

Installation

  1. Clone the repository:

    git clone <repository-url>
cd <repository-directory>

  2. Initialize the project and install dependencies:

    npm init -y
npm install express body-parser

Running the Project

  1. Start the Node.js server:

    node server.js

  2. Open your browser and navigate to http://localhost:3000.

Usage

  1. Service Worker Registration: Registers the service worker and sets up caching strategies.
  2. Form Submission: Saves form data to IndexedDB and syncs it with the server when connectivity is restored.
  3. Push Notifications: Displays push notifications sent from the server.

Debugging

  • Console Logs: Check the browser's console for logs and errors.
  • IndexedDB: Inspect the form-data database in the Application tab of the browser's developer tools.
  • Network Requests: Monitor network requests in the Network tab of the browser's developer tools.

License

This project is licensed under the MIT License.