This repository was archived by the owner on Dec 12, 2024. It is now read-only.
This repository was archived by the owner on Dec 12, 2024. It is now read-only.
Configure Vanilla.js app to be a PWA #85
Description
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-3fffCreate a manifest.json file with appropriate app information (name, icons, colors, etc.)Implement a service workerConfigure the service worker for offline caching of app assets and API responsesAdd appropriate meta tags for PWA in the index.html fileCreate and add required icons for various device sizesImplement an "Add to Home Screen" prompt for eligible devicesEnsure the app works offline after initial loadTest PWA features (offline functionality, installability) across different devices and browsersImplement a way to notify users when a new version of the app is availableImplement 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
- Comment ".take" on this issue to get assigned
- Fork the repository and create a new branch for this task
- Follow the tasks outlined above
- Submit a pull request with your changes
- 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! 🎉
Activity
[-]Configure Next.js app to be a PWA[/-][+]Configure Vanilla.js app to be a PWA[/+]Ankitv003 commentedon Oct 4, 2024
.take
github-actions commentedon Oct 4, 2024
Thanks for taking this issue! Let us know if you have any questions!
Ankitv003 commentedon Oct 4, 2024
i will try to do this , it will take some time though. I have never worked with DWA.
blackgirlbytes commentedon Oct 15, 2024
Hey how's this going @Ankitv003? Don't need to do anything DWA related in this issue. Just need to convert it to a PWA. Let me know if you still want to work on it or if we should switch it off to someone else. Thank you!
Ankitv003 commentedon Oct 15, 2024
yes, i have started it today, please give me a little more time.
blackgirlbytes commentedon Oct 15, 2024
Sounds good! Thank you @Ankitv003
Ankitv003 commentedon Oct 17, 2024
Hey @blackgirlbytes, will the dependency hinder me from completing this task?
Ankitv003 commentedon Oct 17, 2024
Also, will the icon be random , or is there any icon provided ?
blackgirlbytes commentedon Oct 17, 2024
Good questions. You can still turn it into a PWA without dark mode and light mode, so dont worry about the dependency. Also, I think the dwa starter react project and the dwa starter vue project have an icon. You can use the same icon that those projects are using @Ankitv003
One thing to remember is to make sure you add a playwright test as well. You can take a look at the dwa starter vue project for guidance on testing.
Let me know if you have more questions!
Ankitv003 commentedon Oct 18, 2024
hey @blackgirlbytes , why can't i see manifest.json files for dwa-starter-vue or dwa-starter-react , i can see the icons , but i can't seem to find any manifest.json file, is manifest.json not created for those files and only icons are there?
blackgirlbytes commentedon Oct 18, 2024
I think for vite projects, the manifest info is in the vite.config.js file @Ankitv003
Ankitv003 commentedon Oct 23, 2024
hey @blackgirlbytes i can't seem to understand when testing on playwright , i am getting different result every time without changing my code , sometimes i get 13 test cases passed out of 21, sometimes 5.
Ankitv003 commentedon Oct 27, 2024
i have completed the issue , should i add a pr? @blackgirlbytes
all tests are passing too...

blackgirlbytes commentedon Oct 27, 2024
Yes please open a PR @Ankitv003
Ankitv003 commentedon Oct 29, 2024
hi @blackgirlbytes , no rush, but can you please merge this PR, so it can be counted as one of my hacktoberfest contribution😅, or let me know if there are any changes to be made.
Thanks!😄
blackgirlbytes commentedon Oct 29, 2024
Hi @Ankitv003 I cant merge it because it says there's a few merge conflicts that need to be resolved. I was taking awhile because I was trying to solve some of them, but I'm not sure of all the changes you made. Please resolve the merge conflicts so I can get this merged. thanks soooooo much for your contribution
Ankitv003 commentedon Oct 31, 2024
hey @blackgirlbytes , today is the last day of hacktoberfest ,if it is possible please merge my PR , so it can be counted as a contribution to hacktoberfest , thank you🙏!