search

duguyihou / react-native-turbo-image

Performant image component for React Native
https://www.npmjs.com/package/react-native-turbo-image
MIT License
167 stars 9 forks source link

Method Prefetch in Android doesn't cache the image #300

Closed ng-ha closed 3 months ago

ng-ha commented 3 months ago

Describe the bug Method Prefetch in Android doesn't cache the image. In IOS it works as expected.

To Reproduce

  1. prefetch a image url
  2. display image with prefetched url, cachePolicy = 'urlCache'
  3. kill the app, turn off internet, open app, the image is not displayed. The error is HTTP 504: Unsatisfiable Request (only-if-cached) or Unable to resolve host ...
  4. Turn on internet, now the image is being fetched directly (not through prefetch method). Kill app, turn on internet, open app, the image is displayed now.

Video

https://github.com/user-attachments/assets/2e10f463-236d-4fac-9b35-a4caaa267e6e

Expected behavior The image should be cached by prefetch method, just like in IOS

duguyihou commented 3 months ago

@ng-ha Thanks for raising this issue. It seems that prefetch only works with memory. I will take a look later.

duguyihou commented 3 months ago

@ng-ha Actually, prefetch only works with memory on iOS side as well. it has the same behaviour as Android.

https://github.com/user-attachments/assets/1f524bdf-e659-4ca5-a3c6-8a29e2d929b9

duguyihou commented 3 months ago

@ng-ha do you mind closing it since prefetch only works with memory cache is not an issue?

duguyihou commented 3 months ago

@ng-ha

https://github.com/user-attachments/assets/74696d08-fdc8-4e53-b2ba-0ae0c8440287

ng-ha commented 3 months ago

@duguyihou it seems that prefetch works well with disk cache in Android if you prefetch 1 url (like in example). If you prefetch a lot of urls, it fails to save image to disk. I prefetched listScreenData (mapped to Source type) in example to reproduce the bug.

duguyihou commented 3 months ago

@ng-ha It is because prefetch works with disk cache only when url has max-age in the response.

https://github.com/user-attachments/assets/7fc3cec9-7761-4b9f-b5ab-7fe79c065e22

try these urls

 export const prefetchData = [
  {
    uri: 'https://github.com/duguyihou/react-native-turbo-image/assets/9347790/7955aa00-0b53-44d1-88bd-9b5e320db21e',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781817/ecb16e82-57a0-11e5-9b43-6b4f52659997.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781832/0719dd5e-57a1-11e5-9324-9764de25ed47.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781833/09021316-57a1-11e5-817b-85b57a2a8a77.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781834/0931ad74-57a1-11e5-9080-c8f6ecea19ce.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781838/0e6274f4-57a1-11e5-82fd-872e735eea73.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781839/0e63ad92-57a1-11e5-8841-bd3c5ea1bb9c.jpg',
  },
];
ng-ha commented 3 months ago

@duguyihou I used cachePolicy urlCache to reproduce the bug. Then i changed to dataCache, it still failed to save to disk cache. I supposed dataCache policy makes the cache mechanism independent of the max-age. Is it so or do i miss something?

duguyihou commented 3 months ago

@ng-ha

I did not get it. Can you show me the code?

ng-ha commented 3 months ago

The code is the same as example, i just tried cachePolicy urlCache and dataCache.

The doc says: dataCache: aggressive LRU disk cache. urlCache: HTTP disk cache, respect cache-control. So i understand that dataCache is the same as urlCache, except it doesn't respect the cache-control (max-age). If so, setting dataCache must fix the bug. I tried dataCache, it still failed to save to disk cache..

Also, i tried prefetch a lot of image urls (20, 30, 60 urls) with max-age=31536000, but it still failed to save to disk cache. I think the problem is in the length of sources that passed to prefetch function @duguyihou

duguyihou commented 3 months ago

@ng-ha

I prefetched 70 images and it saves to disk correctly.

https://github.com/user-attachments/assets/ccd1927f-281b-40c8-b9e6-4082efd6a0c8

export const prefetchData = [
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781817/ecb16e82-57a0-11e5-9b43-6b4f52659997.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781832/0719dd5e-57a1-11e5-9324-9764de25ed47.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781833/09021316-57a1-11e5-817b-85b57a2a8a77.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781834/0931ad74-57a1-11e5-9080-c8f6ecea19ce.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781838/0e6274f4-57a1-11e5-82fd-872e735eea73.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781839/0e63ad92-57a1-11e5-8841-bd3c5ea1bb9c.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781843/0f4064b2-57a1-11e5-9fb7-f258e81a4214.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781840/0e95f978-57a1-11e5-8179-36dfed72f985.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781841/0e96b5fc-57a1-11e5-82ae-699b113bb85a.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781894/839cf99c-57a1-11e5-9602-d56d99a31abc.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781896/83c5e1f4-57a1-11e5-9961-97730da2a7ad.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781897/83c622cc-57a1-11e5-98dd-3a7d54b60170.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781900/83cbc934-57a1-11e5-8152-e9ecab92db75.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781899/83cb13a4-57a1-11e5-88c4-48feb134a9f0.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781898/83c85ba0-57a1-11e5-8569-778689bff1ed.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781895/83b7f3fa-57a1-11e5-8579-e2fd6098052d.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781901/83d5d500-57a1-11e5-9894-78467657874c.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781902/83df3b72-57a1-11e5-82b0-e6eb08915402.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781903/83e400bc-57a1-11e5-881d-c0ed2c5136f6.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781964/f4553bea-57a1-11e5-9abf-f23470a5efc1.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781955/f3b2ed18-57a1-11e5-8fc7-0579e44de0b0.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781959/f3b7e624-57a1-11e5-8982-8017f53a4898.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781957/f3b52e98-57a1-11e5-9f1a-8741acddb12d.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781958/f3b5544a-57a1-11e5-880a-478507b2e189.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781956/f3b35082-57a1-11e5-9d2f-2c364e3f9b68.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781963/f3da11b8-57a1-11e5-838e-c75e6b00f33e.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781961/f3d865de-57a1-11e5-87fd-bb8f28515a16.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781960/f3d7f306-57a1-11e5-833f-f3802344619e.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781962/f3d98c20-57a1-11e5-838e-10f9d20fbc9b.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781982/2b67875a-57a2-11e5-91b2-ec4ca2a65674.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781985/2b92e576-57a2-11e5-955f-73889423b552.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781986/2b94c288-57a2-11e5-8ebd-4cc107444e70.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781987/2b94ba72-57a2-11e5-8259-8d4b5fce1f6c.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781984/2b9244ea-57a2-11e5-89b1-edc6922d1909.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781988/2b94f32a-57a2-11e5-94f6-2c68c15f711f.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781983/2b80e9ca-57a2-11e5-9a90-54884428affe.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781989/2b9d462e-57a2-11e5-8c5c-d005e79e0070.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781990/2babeeae-57a2-11e5-828d-6c050683274d.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781991/2bb13a94-57a2-11e5-8a70-1d7e519c1631.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781992/2bb2161c-57a2-11e5-8715-9b7d2df58708.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781993/2bb397a8-57a2-11e5-853d-4d4f1854d1fe.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781994/2bb61e88-57a2-11e5-8e45-bc2ed096cf97.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781995/2bbdf73e-57a2-11e5-8847-afb709e28495.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781996/2bc90a66-57a2-11e5-9154-6cc3a08a3e93.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782000/2bd232a8-57a2-11e5-8617-eaff327b927f.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781997/2bced964-57a2-11e5-9021-970f1f92608e.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781998/2bd0def8-57a2-11e5-850f-e60701db4f62.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781999/2bd2551c-57a2-11e5-82e3-54bb80f7c114.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782001/2bdb5bb2-57a2-11e5-8a18-05fe673e2315.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782002/2be52ed0-57a2-11e5-8e12-2f6e17787553.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782003/2bed36de-57a2-11e5-9d4f-7c214e828fe6.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782004/2bef8ed4-57a2-11e5-8949-26e1b80a0ebb.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782005/2bf08622-57a2-11e5-86e2-c5d71ef615e9.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782006/2bf2d968-57a2-11e5-8f44-3cd169219e78.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782007/2bf5e95a-57a2-11e5-9b7a-96f355a5334b.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782008/2c04b458-57a2-11e5-9381-feb4ae365a1d.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782011/2c0e4054-57a2-11e5-89f0-7c91bb0e01a2.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782009/2c0c4254-57a2-11e5-984d-0e44cc762219.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782010/2c0ca730-57a2-11e5-834c-79153b496d44.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782012/2c1277e6-57a2-11e5-862a-ec0c8fad727a.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782122/543bc690-57a3-11e5-83eb-156108681377.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782128/546af1f4-57a3-11e5-8ad6-78527accf642.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782127/546ae2cc-57a3-11e5-9ad5-f0c7157eda5b.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782124/5468528c-57a3-11e5-9cf9-89f763b473b4.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782126/5468cf50-57a3-11e5-9d97-c8fc94e7b9a4.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782125/54687d66-57a3-11e5-860f-c66597fd212c.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782123/545728cc-57a3-11e5-83ab-51462737c19d.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782129/54737694-57a3-11e5-9e1e-b626db67e625.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782130/5483fee2-57a3-11e5-8928-e7706c765016.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782133/54dd0c62-57a3-11e5-85ee-a02c1b9dd223.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782131/54872b30-57a3-11e5-8903-db1f81ea1abb.jpg',
  },
  {
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9782132/548a3b9a-57a3-11e5-8228-8ee523e7809e.jpg',
  },
];
ng-ha commented 3 months ago

@duguyihou Did you forget to turn off the internet in the video? I see 3G enabled..

duguyihou commented 3 months ago

@ng-ha No, I turned off the internet for the computer. Besides, I wiped the data before recording.

https://github.com/user-attachments/assets/3814fbce-3f07-4c63-9c67-0ea37cc8033e

ng-ha commented 3 months ago

@duguyihou wow! I'm using 1.12.0 currently. Maybe version 1.13.0 fixed this? I'll update and try to test again to see if the bug persists.

ng-ha commented 3 months ago

@duguyihou it works on my side too!