feat: preload and cancel images with a service worker #16893
Conversation
midzelis
changed the title
|
Deploying preview environment to https://pr-16893.preview.internal.immich.cloud/ |
web/src/service-worker/index.ts
Outdated
|
|
||
| sw.addEventListener('fetch', (event) => { | ||
| // ignore POST requests etc | ||
| if (event.request.method !== 'GET') return; |
There was a problem hiding this comment.
| if (event.request.method !== 'GET') return; | |
| if (event.request.method !== 'GET') { | |
| return; | |
| } |
There was a problem hiding this comment.
That's caught by a linting rule as well. Generally all failing actions should be addressed.
jrasm91
changed the title
|
Can you reduce the scope of this PR to only include preloading and canceling images? |
midzelis
force-pushed
the
service_worker2
branch
from
75cc6d6 to
1902680
Compare
|
Hi Min, I just ran some tests on this. It works very well overall! There have been two occasions when I triggered some large buckets that were not rendering at all. Even if I scroll past it and scroll back to retrigger the render pipeline, it still shows nothing. |
I think what you saw a few days ago might have been related to some regressions from the asset-grid/asset-store performance PR. I just merged main. If you don't mind, could you retry with the latest merge, and see if you can still reproduce? I haven't been able to repro. |
Description
This helps slow connections the most. When scrolling, if a thumbnail that is slow to load goes offscreen, it is removed from the DOM, but the![]()
keeps the connection open. With the 6 connection per-domain limit, this can increase latency of subsequent requests, slowing down the load of on-screen images.
Similar thing happens when hitting next/previous on photo viewer. If you hit next before img loads, it will keep loading - if on a slow connection, and the image is large, this can easily take up al 6 requests.
This PR uses a service worker that will cancel any network requests created by![]()
tags (or any other request) - as the thumbs or photos go out of view. Additionally, it supports preload of next/previous assets in the photo viewer. Lastly, it includes the sveltekit service-worker example, which preloads the entire svelte app in the background when the service worker is activated.
This requires a secure context (http://localhost or a https://example.com). If its not present, you don't lose any function, just don't get these benefits it provides.
Checklist:
src/services/uses repositories implementations for database calls, filesystem operations, etc.src/repositories/is pretty basic/simple and does not have any immich specific logic (that belongs insrc/services/)