Skip to content

Offline cache#2508

Draft
corrideat wants to merge 38 commits intomasterfrom
2503-offline-first-pwa-caching
Draft

Offline cache#2508
corrideat wants to merge 38 commits intomasterfrom
2503-offline-first-pwa-caching

Conversation

@corrideat
Copy link
Copy Markdown
Member

No description provided.

@corrideat corrideat self-assigned this Jan 14, 2025
@corrideat corrideat requested a review from taoeffect January 14, 2025 19:29
@corrideat corrideat linked an issue Jan 14, 2025 that may be closed by this pull request
@corrideat corrideat added Kind:Enhancement Improvements, new features, performance upgrades, etc. App:Frontend App:Backend labels Jan 14, 2025
@cypress
Copy link
Copy Markdown

cypress bot commented Jan 14, 2025

group-income    Run #4274

Run Properties:  status check passed Passed #4274  •  git commit 001ec63047 ℹ️: Merge 8a9195a93d42d8c7df424513f803a8ccbd9b3166 into a11b226e68e98b1a415ed61a31bb...
Project group-income
Branch Review 2503-offline-first-pwa-caching
Run status status check passed Passed #4274
Run duration 11m 47s
Commit git commit 001ec63047 ℹ️: Merge 8a9195a93d42d8c7df424513f803a8ccbd9b3166 into a11b226e68e98b1a415ed61a31bb...
Committer Ricardo Iván Vieitez Parra
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 10
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 114
View all changes introduced in this branch ↗︎

Comment on lines +391 to +393
if (navigator.onLine !== false) {
await sbp('chelonia/contract/sync', identityContractID)
}
Copy link
Copy Markdown
Member

@taoeffect taoeffect Jan 15, 2025

Choose a reason for hiding this comment

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

So... do we sync this once we do come back online? If so, where?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

No, we don't explicitly. It'd be handled like any other contract by that point.

Copy link
Copy Markdown
Member

@taoeffect taoeffect left a comment

Choose a reason for hiding this comment

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

Here's what I tried on Android:

  1. I created the PWA and logged in with it (via the ngrok tunnel)
  2. In the app launcher, I swiped up on the PWA app to kill it
  3. Disabled phone's internet
  4. Opened app again

Greeted with:

b

Followed by:

a

Is this something that's preventable? I.e. is it possible to still have the app load?

Comment on lines +4 to +7
const CACHE_VERSION = '1.0.0'
const CURRENT_CACHES = {
assets: `assets-cache_v${CACHE_VERSION}`
}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Should this version number be tied to some environment variable, e.g. GI_VERSION or something else?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I was thinking about that. It could, but I don't think it needs to, so long as it's updated if breaking changes to the cache are made.

Copy link
Copy Markdown
Member

@taoeffect taoeffect left a comment

Choose a reason for hiding this comment

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

Great work @corrideat! Review is ready.

One issue is that this seems to not work well still when offline. I found an app that seems to work when the PWA is force quit and restarted while offline, so it should be possible to improve the behavior:

// Files like `main.js` or `main.css` should be revalidated before use. Se we use the default headers.
// This should also be suitable for serving unversioned fonts and images.
return h.file(subpath)
.header('Cache-Control', 'public,max-age=604800,stale-while-revalidate=86400')
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hmm... why is this being added? I see that we have a special section for cached files above, so why should these be cached too when it seems like these are files that might change?

And if this is really necessary, could you add a comment here explaining why?

I want to avoid the app failing to update when files are updated...

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Because if we don't store these in the cache, the app can't possibly work offline. Adding stale-while-revalidate means that it's fine to serve stale files while they're being revalidated (normally, all cached requests need to be revalidated).

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

In any case, the comment is outdated, so I agree that this should be updated.

@corrideat corrideat force-pushed the 2503-offline-first-pwa-caching branch from 46b4488 to 3680a42 Compare January 19, 2025 15:45
if (request instanceof URL) {
console.error('@@@@XX', 120, request, response.status)
}
return fetch(event.request.clone?.() || request).then(async (response) => {
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This is what seems to have fixed the issue. Note that I'm still using the original request here instead of the 'rewritten' request.

}
}

return fetch(event.request.clone?.() || request).then(async (response) => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can you add a comment here explaining what problem this event.request.clone?.() || request is fixing? If you're not sure why it works it's fine to say that, but it still needs a comment explaining why this was added in the first place since it falls into the category of "weirdness".

Copy link
Copy Markdown
Member

@taoeffect taoeffect left a comment

Choose a reason for hiding this comment

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

It's still getting stuck on something (stuck on the same white screen...)

@taoeffect
Copy link
Copy Markdown
Member

The error iOS Safari-based PWA gives:

IMG_8754

Doesn't happen with https://github.com/GoogleChromeLabs/squoosh

@corrideat corrideat marked this pull request as draft March 9, 2025 18:19
@corrideat corrideat force-pushed the 2503-offline-first-pwa-caching branch from 67db3d3 to 7779f0b Compare March 12, 2025 18:42
@corrideat corrideat mentioned this pull request Mar 13, 2025
@corrideat corrideat mentioned this pull request Apr 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

App:Backend App:Frontend Kind:Enhancement Improvements, new features, performance upgrades, etc.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Offline-first PWA caching

2 participants