Skip to content
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

Closed
Listed in
@blackgirlbytes

Description

@blackgirlbytes
Contributor

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

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

Activity

changed the title [-]Configure Next.js app to be a PWA[/-] [+]Configure Vanilla.js app to be a PWA[/+] on Aug 29, 2024
Ankitv003

Ankitv003 commented on Oct 4, 2024

@Ankitv003
Contributor

.take

github-actions

github-actions commented on Oct 4, 2024

@github-actions

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

Ankitv003

Ankitv003 commented on Oct 4, 2024

@Ankitv003
Contributor

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

blackgirlbytes

blackgirlbytes commented on Oct 15, 2024

@blackgirlbytes
ContributorAuthor

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

Ankitv003 commented on Oct 15, 2024

@Ankitv003
Contributor

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

blackgirlbytes

blackgirlbytes commented on Oct 15, 2024

@blackgirlbytes
ContributorAuthor

Sounds good! Thank you @Ankitv003

Ankitv003

Ankitv003 commented on Oct 17, 2024

@Ankitv003
Contributor

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

Ankitv003

Ankitv003 commented on Oct 17, 2024

@Ankitv003
Contributor

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

blackgirlbytes

blackgirlbytes commented on Oct 17, 2024

@blackgirlbytes
ContributorAuthor

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

Ankitv003 commented on Oct 18, 2024

@Ankitv003
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

blackgirlbytes commented on Oct 18, 2024

@blackgirlbytes
ContributorAuthor

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

Ankitv003

Ankitv003 commented on Oct 23, 2024

@Ankitv003
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

Ankitv003 commented on Oct 27, 2024

@Ankitv003
Contributor

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

all tests are passing too...
Image

blackgirlbytes

blackgirlbytes commented on Oct 27, 2024

@blackgirlbytes
ContributorAuthor

Yes please open a PR @Ankitv003

Ankitv003

Ankitv003 commented on Oct 29, 2024

@Ankitv003
Contributor

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

blackgirlbytes commented on Oct 29, 2024

@blackgirlbytes
ContributorAuthor

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

Ankitv003 commented on Oct 31, 2024

@Ankitv003
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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Participants

    @blackgirlbytes@Ankitv003

    Issue actions

      Configure Vanilla.js app to be a PWA · Issue #85 · TBD54566975/tbd-examples