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

feat: Offline First Experience with Caching and Sync Status Indicator #1612

Merged
merged 1 commit into from
Nov 2, 2024

Conversation

tarunkumar2005
Copy link
Contributor

@tarunkumar2005 tarunkumar2005 commented Nov 1, 2024

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)

Recording.2024-11-01.095034.mp4

Type of PR

  • Bug fix
  • Feature enhancement
  • Documentation update
  • Other (specify): _______________

Checklist:

  • I have performed a self-review of my code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have tested the changes thoroughly before submitting this pull request.
  • I have provided relevant issue numbers, screenshots, and videos after making the changes.
  • I have gone through the contributing.md file before contributing
  • 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?

  • I am contributing under GSSOC'24 Extended
  • I am contributing under Hacktoberfest'24

Copy link

github-actions bot commented Nov 1, 2024

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

Copy link

netlify bot commented Nov 1, 2024

Deploy Preview for taupe-cendol-f7e2bb ready!

Name Link
🔨 Latest commit 361dd5a
🔍 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...

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

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

@apu52 apu52 changed the title Offline First Experience with Caching and Sync Status Indicator feat: Offline First Experience with Caching and Sync Status Indicator Nov 2, 2024
Copy link
Owner

@apu52 apu52 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tarunkumar2005 great work

@apu52 apu52 merged commit f9f33fe into apu52:main Nov 2, 2024
6 of 7 checks passed
Copy link

github-actions bot commented Nov 2, 2024

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

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

Successfully merging this pull request may close these issues.

Offline First Experience with Caching and Sync Status Indicator
2 participants