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.

Sign up for GitHub

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

Jump to bottom

Users can now create agents (and interact with what's been cached) while offline #706

Draft
wants to merge 5 commits into
base: develop
Choose a base branch
from
Draft

Users can now create agents (and interact with what's been cached) while offline #706

wants to merge 5 commits into from
+3,534 −66

Conversation

joshwingreene
Copy link
Contributor

@joshwingreene joshwingreene commented Feb 24, 2023 •
edited
Loading

@DropsOfSerenity Okay. I have added everything that I felt was important. As we discussed, if you can fix the stuff related to the caching side of things, that would be great. I will take care of the pagination-related issues once you are done. If you have any questions, feel free to let me know via Slack.

Changes

  1. User can now use the app while offline
  2. Pages that are visited while the user is online will be inserted into the dynamic cache (found in the Cache Storage, which can be found in Chrome's Developer Tools). When the user goes offline and tries to access that page, they will be able to access it. If a page wasn't cached, the offline.html page will be shown instead.
  3. The agents that the user sees on on the AgentListView will be stored into indexed db (via the idb package).
  4. The user will be able to go to the UpdateAgentView while offline if the associated agent has been stored into indexed db.
  5. If the user creates a new agent while offline, that request will be stored by workbox's background-sync plugin and sent to the server once the user's internet connection is restored. Instead of inserting the associated agent while the user is still offline, it made more sense to just show an endless info notification that serves as a visual queue of all the new agents that the user created while offline.
  6. Installed various workbox packages in order to set up the offline caching functionality
  7. Changed the "start_url" in the manifest.json file from "." to "./index.html"
  8. Added a sw.ts file. This is the file that instructs the service worker on how to handle different requests. It will be used to generate the sw.js file when the app is built.
  9. Registered the generated service worker via App.tsx
  10. Added a utility.ts file that handles all of the operations related to manipulating the Indexed DB
  11. Added endless error and info notifications
  12. Moved the getRandomNumber method out of the NetworkDetector component so that it could be used elsewhere
  13. Added a getConnectionStatus method to the NetworkDetector component's file
  14. Added a workbox-config.js file

Purpose

An admin should be able to create Agents even without a connection.

Approach

I made use of Workbox and its various plugins to add the associated offline functionality to the app.

The Issue

Previously, the only files and data that were initially cached in the cache called 'dynamic' were the following:

  • the static bundle.js file
  • /event-token
  • /notification/?read__isnull=true

Now, the static bundle is no where to be found and it looks like all of the files in the bundle are being cached separately. Here's a screenshot:

too many items in the dynamic cache

Here's a couple of other issues:

  1. The offline.html file is no longer being used when the user visits pages that haven't yet been cached yet. At the moment, it gives the standard "This site can't be reached" page.

  2. Opening an agent while online no longer works

  3. The AgentListView won't be populated with agents while offline when there are agents in the indexed db.

Things that aren't broken

  1. The precache cache is consistent with what I remember. The app is precaching all of the files in the public directory except for the service worker files.

precached-files

Learning

This is the video that gave me a jump start in integrating the newest version of Workbox into our boilerplate:

Workbox TypeScript - Unpacking the Workbox

These resources were very helpful as well:

workbox-background-sync

Managing fallback responses

Demo

offline.pr.-.demo.-.with.issues.mov

Testing Steps

  1. Pull in the changes to your local copy of this branch and run it alongside the dj_starter_demo repo.
  2. Run the app as usual. The service worker build step has been added to both the start and build scripts.
  3. Start the app and observe Chrome's Developer Tools. Look at the following areas on the left: Service Workers, Indexed DB, and Cache Storage.
  4. In the "Service Workers" tab, enable the "Update on reload" option. This will cause the newly built service worker to be used by the app when the app is refreshed (ex. hitting on the refresh button in the browser). Before refreshing, you should delete whatever is inside of the Cache Storage tab. You should delete the dynamic and workbox-recache-v2 items. You should also delete the agents that have been stored in indexed db. In the IndexedDB tab, there will be an agents-store and an agents item inside of it. Right click on the agents item and click "Clear". When you refresh, you should see that the service worker has been received at the time that you refreshed the app. Watch the demo to get a better idea of the workflow that I'm using.

service worker area

@joshwingreene
Resolves some merge conflicts
ed76321 
Rebase. This commit combines the following commits:

feat(various): The service worker is now being set up properly.

feat(various): Now caching json files as well so that the manifest.json file will be cached; Temporarily commenting out the initial LOADING... div

feat(various): Now caching reponses from the backend and frontend (the bundle.js file)

refactor(index): Re-added the preload div to the index file; Also, updated the generated service worker.

feat(various): Installed idb; Now storing the fetched agents into
indexed db so that any edits to them can be saved if the user goes
offline

feat(utility.js and sw.js): The types in the indexed db are now strongly
typed.

feat(various): Now reading the stored agents and displaying them in the
DataTable when the user is offline

fix(AgentListView): Now checking if indexedDB can be found before
reading data from Indexed DB

feat(various): Trying to implement BackgroundSync via Workbox. However,
the failed POST request while the user is offline is not being replayed
when the user's connection is restored.

feat(various): Background sync is now functioning (after restarting my computer); Now able to open the UpdateAgentView when the user is offline

feat(sw): Now handling edit agent requests when the user is offline

feat(various): Now showing an offline fallback page for pages that
haven't been cached; Changed the tsconfig target to ESNext for service
worker purposes; Adding some additionally typing to the db utility file

feat(various): Added the minifest css and js files for bootstrap into
the public folder so it could be applied to the fallback page; Removed
the handler that deals with edit agent requests

feat(UpdateAgentView): Stopped the unable to load agent message from
appearing when the user is offline but the selected agent was found in
indexed db; Also, removed console logs and made AgentDetailForm code
easier to understand.

feat(various): Re-added the showEndlessErrorMessage notification; It is
shown when the user goes offline.

refactor(various): Refactored utlity.ts in order to resolve the eslint
warnings; Working on getting background-sync to work again and getting
the endless error message to always show

feat(sw): Agents from the DataTable will now be stored into indexed db
if the page is being shown to the user (no longer limited to 1 page)

feat(various): Background sync is working again when creating new
agents; Made it so that a endless notification appears when an agent is created
while offline instead of adding the agent to the indexed db
@joshwingreene
feat(yarn): Updated the yarn.lock file
ebccd52
@joshwingreene
feat(various): Placed the service worker step into both the start and
a5fe452 
build scripts; Added the code that I was using to try to figure out to
resolve the current caching issue (separate files are being cached
instead of a single bundle)
@joshwingreene
refactor(sw): Reverted the core registerRoute back to */* only
ee7d8c7
@joshwingreene joshwingreene marked this pull request as ready for review March 1, 2023 20:00
@joshwingreene
Copy link
Contributor Author

An admin should be able to create and update Farms even without a connection.

fluturecode
fluturecode requested changes Mar 16, 2023
View reviewed changes
Copy link
Contributor

@fluturecode fluturecode left a comment •
edited
Loading

Choose a reason for hiding this comment

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

This looks good, however I noticed a few packages were added back that we are no longer using.
@testing-library/react
idb
moment
msw
react-moment

@coreyshuman coreyshuman removed the request for review from DropsOfSerenity April 3, 2023 23:37
@coreyshuman coreyshuman marked this pull request as draft April 4, 2023 18:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fluturecode fluturecode fluturecode requested changes

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@joshwingreene @fluturecode