Skip to content

Share image cache between webview and RN #4708

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

Open
WesleyAC opened this issue Apr 30, 2021 · 1 comment
Open

Share image cache between webview and RN #4708

WesleyAC opened this issue Apr 30, 2021 · 1 comment

Comments

@WesleyAC
Copy link
Contributor

Right now, images that we use in both the webview and React Native (user uploads, avatars, reaction emoji) are downloaded by both, independently. Instead, we should have them share a cache.

As I wrote in #4349:

We can explicitly add a cache, which both the webview and the lightbox share. The webview side of this I don't think is too hard — there's already a rewriteImageUrls function that can be co-opted for this purpose. I haven't peeked much at the lightbox code, but I suspect it's similarly easy to fix. The big questions I see are:

  • How is the cache implemented? Should it be an actual local HTTP server (exposed only to the Zulip app), or just some shared code that knows that cached images are kept on disk in a specific place?
  • What should the cache invalidation policy be like (presumably we should follow the Cache-control headers that the server sends?)

This has the advantage that we can also use this cache for things like avatar and custom emoji images, which are similarly shared between react-native code and webview code.

For storage, this seems like another case where we might want to use sqlite, probably having a table with [URL, data, expiration time, realm].

I can think of two ways to then use that:

The janky way

  • Write some JS code to get a URL, returning data from the cache if available (this probably requires some careful thinking about how authentication/etc works)
  • Expose that code to the webview, via a OutboundEvent/InboundEvent pair to get the file contents for a given URL
  • When the webview wants to render an image, it sends the OutboundEvent, waits for the inbound event, reads the image data, and loads it into the image

The non-janky way

  • Run a local HTTP server (a la react-native-webserver or react-native-static-server) to act as a caching proxy
    • Setting this up looks very painful
  • Write some simple code to transform a URL into the proxy URL, and use that code in both the webview and RN code

I plan to continue to look into this more, I'm just filing this issue so that we have somewhere to track this.

@WesleyAC
Copy link
Contributor Author

WesleyAC commented May 8, 2021

Related: #3555 #3026 #3382 #3853

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

No branches or pull requests

1 participant