Configure Vanilla.js app to be a PWA

🔗 Dependencies

This issue is dependent on the completion of #84. Please ensure that issue is resolved before starting work on this task.

🚀 Goal

Convert our Vanilla.js app into a Progressive Web App (PWA). This will enable features like offline functionality.

🤔 Background

We're expanding our DWA starter collection to include Vanilla.js. This task focuses on adding PWA capabilities, which are crucial for creating modern, responsive, and offline-capable web applications.

This is part of our larger project to create a Vanilla.js DWA starter. See our main issue here for the full context and list of all related tasks.

🔑 Tasks and Acceptance Criteria

• Install Serwist packages for PWA: https://dev.to/stephengade/pwa-build-installable-nextjs-app-that-works-offline-3fff

  Create a manifest.json file with appropriate app information (name, icons, colors, etc.)

  Implement a service worker

  Configure the service worker for offline caching of app assets and API responses

  Add appropriate meta tags for PWA in the index.html file

  Create and add required icons for various device sizes

  Implement an "Add to Home Screen" prompt for eligible devices

  Ensure the app works offline after initial load

  Test PWA features (offline functionality, installability) across different devices and browsers

  Implement a way to notify users when a new version of the app is available
• Implement the following essential automated tests using Playwright:

  • Service Worker: Verify service worker registration on page load.
  • Offline Functionality: Test app loading and basic navigation in simulated offline mode.
  • Cross-browser: Verify PWA functionality in Chromium, Firefox, and WebKit.

  To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.