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.

🌟 Resources

• Vanilla.js PWA Documentation
• Additional Vanilla.js PWA Documentation
• Web App Manifest MDN Documentation
• Progressive Web Apps (PWAs) | MDN
• Playwright Testing

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉