perf: replace default header for mutable requests (if-modified-since) with if-none-match #2

Author: mnightingale

src/FileSystem.tsx

@@ -25,6 +25,7 @@ import {
   delayWhen,
   concatAll,
   take,
+  tap,
 } from 'rxjs/operators'
 import uuid from 'react-native-uuid'
 import { CacheStrategy } from '.'
@@ -33,6 +34,7 @@ import { HeaderFn } from './types'
 export interface CacheFileInfo {
   path: string | null
   fileName: string
+  md5?: string
 }
 
 /**
@@ -270,6 +272,7 @@ export class FileSystem {
       FileSystem.cacheObservables[fileName].next({
         path: 'file://' + path,
         fileName,
+        md5: await RNFS.hash(path, 'md5').catch(() => undefined),
       })
     }
 
@@ -301,26 +304,54 @@ export class FileSystem {
         // Logic here prunes cache directory on "cache" writes to ensure cache doesn't get too large.
         from(cacheDirExists ? this.pruneCache() : RNFS.mkdir(this.baseFilePath)),
       ),
-      mergeMap(() => from(RNFS.stat(path)).pipe(catchError(() => of(null)))),
-      // Hit network and download file to local disk.
-      mergeMap((stat) =>
-        from(
-          RNFS.downloadFile({
+      mergeMap(() => from(RNFS.exists(path))),
+      mergeMap((alreadyExists) =>
+        // Hit network and download file to local disk.
+        defer(async () => {
+          let beginResult: RNFS.DownloadBeginCallbackResult | undefined
+
+          const downloadResult = await RNFS.downloadFile({
             fromUrl: url,
             toFile: path,
             headers,
-          }).promise,
-        ).pipe(
-          // Only need to emit or throw errors if the file has changed or this is the first download
-          filter((downloadResult) => stat === null || downloadResult.statusCode === 200),
-          map((downloadResult) => {
-            if (stat === null && downloadResult.statusCode !== 200) {
-              throw new Error('Request failed ' + downloadResult.statusCode)
+            begin: (res: RNFS.DownloadBeginCallbackResult) => {
+              beginResult = res
+            },
+          }).promise
+          return Promise.resolve({ downloadResult, beginResult })
+        }).pipe(
+          // If "304 Not Modified" response touch local file
+          tap(({ downloadResult }) => {
+            if (alreadyExists && downloadResult.statusCode === 304) {
+              // Unfortunately react-native-fs only shares headers for status >=200 && status < 300
+              RNFS.touch(path, new Date(), new Date())
             }
-
+          }),
+          // Only need to emit if the local file has changed
+          filter(({ downloadResult }) => downloadResult.statusCode === 200),
+          mergeMap(({ downloadResult, beginResult }) =>
+            defer(async () => {
+              if (beginResult !== undefined && 'ETag' in beginResult.headers) {
+                return {
+                  md5: beginResult.headers['ETag'],
+                }
+              }
+              return {
+                md5: await RNFS.hash(path, 'md5').catch(() => undefined),
+              }
+            }).pipe(
+              map((extra) => ({
+                downloadResult,
+                beginResult,
+                extra,
+              })),
+            ),
+          ),
+          map(({ extra }) => {
             return {
               path: 'file://' + path,
               fileName: pathLib.basename(path),
+              md5: extra.md5,
             }
           }),
         ),
@@ -454,27 +485,29 @@ export class FileSystem {
 
       const subject$ = new ReplaySubject<CacheFileInfo>()
 
-      const obs$ = from(RNFS.stat(this.baseFilePath + fileName)).pipe(
+      const obs$ = from(RNFS.hash(this.baseFilePath + fileName, 'md5')).pipe(
         catchError(() => of(null)),
-        switchMap((stat) => {
-          if (stat !== null) {
+        switchMap((md5) => {
+          if (md5 !== null) {
             switch (cacheStrategy) {
               case 'immutable': {
                 return of({
                   path: 'file://' + this.baseFilePath + fileName,
                   fileName,
+                  md5,
                 } as CacheFileInfo)
               }
               case 'mutable': {
                 return from([
                   of({
                     path: 'file://' + this.baseFilePath + fileName,
                     fileName,
+                    md5,
                   } as CacheFileInfo),
                   defer(async () => (headers instanceof Function ? await headers() : headers)).pipe(
                     mergeMap((headers) =>
                       this.fetchFile(url, fileName, {
-                        'if-modified-since': new Date(stat.mtime).toUTCString(),
+                        'if-none-match': md5,
                         ...headers,
                       }),
                     ),

src/index.tsx

@@ -19,7 +19,7 @@ import FileSystemFactory, { CacheFileInfo, FileSystem } from './FileSystem'
 import traverse from 'traverse'
 import validator from 'validator'
 import uuid from 'react-native-uuid'
-import { Image, ImageStyle, Platform, StyleProp } from 'react-native'
+import { Image, ImageStyle, StyleProp } from 'react-native'
 import { BehaviorSubject, Subscription } from 'rxjs'
 import { skip, takeUntil } from 'rxjs/operators'
 import URL from 'url-parse'
@@ -310,11 +310,11 @@ const imageCacheHoc = <P extends object>(
       FileSystem.unlockCacheFile(fileName, this.componentId)
     }
 
-    onSourceLoaded({ path }: CacheFileInfo) {
+    onSourceLoaded({ path, md5 }: CacheFileInfo) {
       this.setState({
         source: path
           ? {
-              uri: path + (Platform.OS === 'android' ? '?' + Date.now() : ''),
+              uri: path + (md5 !== undefined ? '?' + md5 : ''),
             }
           : undefined,
       })

tests/CacheableImage.test.tsx

@@ -160,6 +160,7 @@ describe('CacheableImage', function () {
             path:
               'file:///base/file/path/react-native-image-cache-hoc/90c1be491d18ff2a7280039e9b65749461a65403.png',
             fileName: '90c1be491d18ff2a7280039e9b65749461a65403.png',
+            md5: '#md5#',
           })
           done()
         },
@@ -301,15 +302,15 @@ describe('CacheableImage', function () {
     setImmediate(() => {
       expect(wrapper.prop('source')).toStrictEqual({
         uri:
-          'file:///base/file/path/react-native-image-cache-hoc/d3b74e9fa8248a5805e2dcf17a8577acd28c089b.png',
+          'file:///base/file/path/react-native-image-cache-hoc/d3b74e9fa8248a5805e2dcf17a8577acd28c089b.png?#md5#',
       })
 
       wrapper.setProps({ source: { uri: 'https://example.com/B.jpg' } })
 
       setImmediate(() => {
         expect(wrapper.prop('source')).toStrictEqual({
           uri:
-            'file:///base/file/path/react-native-image-cache-hoc/a940ee9ea388fcea7628d9a64dfac6a698aa0228.jpg',
+            'file:///base/file/path/react-native-image-cache-hoc/a940ee9ea388fcea7628d9a64dfac6a698aa0228.jpg?#md5#',
         })
 
         done()
@@ -325,7 +326,7 @@ describe('CacheableImage', function () {
     setImmediate(() => {
       expect(wrapper.prop('source')).toStrictEqual({
         uri:
-          'file:///base/file/path/react-native-image-cache-hoc/d3b74e9fa8248a5805e2dcf17a8577acd28c089b.png',
+          'file:///base/file/path/react-native-image-cache-hoc/d3b74e9fa8248a5805e2dcf17a8577acd28c089b.png?#md5#',
       })
 
       wrapper.setState({