Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Configure Vanilla.js app to be a PWA #85

Closed
14 tasks
Tracked by #81
blackgirlbytes opened this issue Aug 28, 2024 · 17 comments · Fixed by #409 · May be fixed by #383
Closed
14 tasks
Tracked by #81

Configure Vanilla.js app to be a PWA #85

blackgirlbytes opened this issue Aug 28, 2024 · 17 comments · Fixed by #409 · May be fixed by #383

Comments

@blackgirlbytes
Copy link
Contributor

blackgirlbytes commented Aug 28, 2024

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

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! 🎉

@taniashiba taniashiba changed the title Configure Next.js app to be a PWA Configure Vanilla.js app to be a PWA Aug 29, 2024
@Ankitv003
Copy link
Contributor

.take

Copy link

github-actions bot commented Oct 4, 2024

Thanks for taking this issue! Let us know if you have any questions!

@Ankitv003
Copy link
Contributor

i will try to do this , it will take some time though. I have never worked with DWA.

@blackgirlbytes
Copy link
Contributor Author

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
Copy link
Contributor

yes, i have started it today, please give me a little more time.

@blackgirlbytes
Copy link
Contributor Author

Sounds good! Thank you @Ankitv003

@Ankitv003
Copy link
Contributor

Hey @blackgirlbytes, will the dependency hinder me from completing this task?

@Ankitv003
Copy link
Contributor

Also, will the icon be random , or is there any icon provided ?

@blackgirlbytes
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor Author

blackgirlbytes commented Oct 18, 2024

I think for vite projects, the manifest info is in the vite.config.js file @Ankitv003

@Ankitv003
Copy link
Contributor

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
Copy link
Contributor

Ankitv003 commented Oct 27, 2024

i have completed the issue , should i add a pr? @blackgirlbytes

all tests are passing too...
Image

@blackgirlbytes
Copy link
Contributor Author

Yes please open a PR @Ankitv003

@Ankitv003
Copy link
Contributor

Ankitv003 commented 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
Copy link
Contributor Author

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

Image

@Ankitv003
Copy link
Contributor

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🙏!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants