feat: Offline First Experience with Caching and Sync Status Indicator

[tarunkumar2005]

Title and Issue number

Title :Offline First Experience with Caching and Sync Status Indicator

Issue No. : #1592

Close #1592

Code Stack : Html css and js

Description

Offline First Experience with Caching and Sync Status Indicator

In today’s digital environment, users often encounter connectivity issues, which can disrupt their interaction with a website or application. Implementing an "Offline First" approach could greatly improve user experience, especially for those accessing the platform in areas with intermittent internet access.

The idea is to integrate offline support in the app, ensuring users can still browse core content and access cached data even when they temporarily lose connectivity. By using service workers to cache essential assets and certain frequently accessed data, we can ensure that the application remains accessible and performs smoothly offline. Additionally, we’ll implement a Sync Status Indicator to keep users informed about their connectivity state. This status component can display whether they’re online, offline, or in a syncing state, helping them better understand the app's behavior.

For example, consider a platform similar to YouTube. Offline capabilities would allow users to load recent data or static content even if their connection is unstable, making for a seamless experience. The sync status indicator adds transparency, showing users when their content is being updated or when the app is operating with cached data.

This enhancement would add significant reliability to the application, benefiting a wide range of users, and setting the project apart from others that don’t offer offline functionality.

Video/Screenshots (mandatory)

https://github.com/user-attachments/assets/6884b62b-20d1-4d3e-863c-24a34397b48e

Type of PR

• [ ] Bug fix
• [X] Feature enhancement
• [ ] Documentation update
• [ ] Other (specify): ___

Checklist:

• [X] I have performed a self-review of my code.
• [X] I have commented my code, particularly in hard-to-understand areas.
• [X] I have tested the changes thoroughly before submitting this pull request.
• [x] I have provided relevant issue numbers, screenshots, and videos after making the changes.
• [X] I have gone through the contributing.md file before contributing
• [X] I have Starred the Repository.

Additional context:

@apu52 Please check this PR and merge this and assign this to me and put relevant labels such as gssoc 2024 ext, hacktoberfest and level. I think this should be a level 3 PR because this feature is completly new and very much needed for a professional website as people might think that the site is not working when their own internet connection is not working so i have implemented that.

If you have any doubts and issues regarding this you can put them here.

Are you contributing under any Open-source programme?

• [X] I am contributing under GSSOC'24 Extended
• [X] I am contributing under Hacktoberfest'24

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify[bot]]

✅ Deploy Preview for taupe-cendol-f7e2bb ready!

Name	Link
🔨 Latest commit	361dd5a3bfb1aab4d56d975a729d36258df96f2e
🔍 Latest deploy log	https://app.netlify.com/sites/taupe-cendol-f7e2bb/deploys/672457b6a7fc730008047753
😎 Deploy Preview	https://deploy-preview-1612--taupe-cendol-f7e2bb.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tarunkumar2005]

And it is working in all the pages so + point for that, no need to define it for all the pages.

[github-actions[bot]]

🎉🎉 Thank you for your contribution! Your PR #1612 has been merged! 🎉🎉