fix(android): etag caching (#7)

* trying to log network traffic with proxyman

* intercepting traffic

* make a head request first, and work with signature correctly

* cleanup + doc

Author: Hanno J. Gödecke

.gitignore

@@ -49,3 +49,5 @@ coverage
 
 # TypeScript incremental compilation cache
 *.tsbuildinfo
+
+ReactNativeFastImageExampleServer/catswap-cdn.sh

ReactNativeFastImageExample/android/app/src/debug/AndroidManifest.xml

@@ -7,6 +7,7 @@
     <application
         android:usesCleartextTraffic="true"
         tools:targetApi="28"
+        android:networkSecurityConfig="@xml/network_security_config"
         tools:ignore="GoogleAppIndexingWarning">
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>

ReactNativeFastImageExample/android/app/src/main/res/xml/network_security_config.xml

@@ -0,0 +1,24 @@
+<network-security-config>
+    <debug-overrides>
+        <trust-anchors>
+            <!-- Trust user added CAs while debuggable only -->
+            <certificates src="user" />
+            <certificates src="system" />
+        </trust-anchors>
+    </debug-overrides>
+
+    <base-config cleartextTrafficPermitted="true">
+        <trust-anchors>
+            <certificates src="system" />
+        </trust-anchors>
+    </base-config>
+
+    <domain-config>
+        <!-- Make sure your URL Server here -->
+        <domain includeSubdomains="true">s3.nl-ams.scw.cloud</domain>
+        <trust-anchors>
+            <certificates src="user"/>
+            <certificates src="system"/>
+        </trust-anchors>
+    </domain-config>
+</network-security-config>

android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java

@@ -19,7 +19,6 @@
 import com.bumptech.glide.signature.ObjectKey;
 import com.dylanvann.fastimage.custom.EtagCallback;
 import com.dylanvann.fastimage.custom.EtagRequester;
-import com.dylanvann.fastimage.custom.PersistEtagCallbackWrapper;
 import com.dylanvann.fastimage.custom.persistence.ObjectBox;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
@@ -86,7 +85,6 @@ public void setSrc(FastImageViewWithUrl view, @Nullable ReadableMap source) {
             return;
         }
 
-        //final GlideUrl glideUrl = FastImageViewConverter.getGlideUrl(view.getContext(), source);
         final FastImageSource imageSource = FastImageViewConverter.getImageSource(view.getContext(), source);
         if (imageSource.getUri().toString().length() == 0) {
             ThemedReactContext context = (ThemedReactContext) view.getContext();
@@ -117,11 +115,7 @@ private void load(final FastImageViewWithUrl view, @NonNull final ReadableMap so
         final FastImageSource imageSource = FastImageViewConverter.getImageSource(view.getContext(), source);
         final GlideUrl glideUrl = imageSource.getGlideUrl();
 
-        // Cancel existing request.
         view.glideUrl = glideUrl;
-//        if (requestManager != null) {
-//            requestManager.clear(view);
-//        }
 
         final String key = glideUrl.toStringUrl();
         FastImageOkHttpProgressGlideModule.expect(key, this);
@@ -138,6 +132,7 @@ private void load(final FastImageViewWithUrl view, @NonNull final ReadableMap so
         final int viewId = view.getId();
         eventEmitter.receiveEvent(viewId, REACT_ON_LOAD_START_EVENT, new WritableNativeMap());
 
+        final RequestOptions options = FastImageViewConverter.getOptions(context, imageSource, source);
         if (requestManager != null) {
             final String url = imageSource.getGlideUrl().toStringUrl();
             if (!url.startsWith("http")) {
@@ -149,118 +144,102 @@ private void load(final FastImageViewWithUrl view, @NonNull final ReadableMap so
                         //    - android.resource://
                         //    - data:image/png;base64
                         .load(imageSource.getSourceForLoad())
-                        .apply(FastImageViewConverter.getOptions(context, imageSource, source))
+                        .apply(options)
                         .listener(new FastImageRequestListener(key))
                         .into(view);
                 return;
             }
 
-            final RequestOptions options = FastImageViewConverter.getOptions(context, imageSource, source);
-
-            // getEtag handles persistence of etag
-            getEtag(url, new EtagCallback() {
-                @Override
-                public void onError(String error) {
-                    loadImage(view, url, null, options, key);
-                }
-
-                @Override
-                public void onEtag(@Nullable final String etag) {
-                    loadImage(view, url, etag, options, key);
-                }
-            });
+            loadImage(view, url, options, key);
         }
     }
 
     /**
-     * Refreshes an image. Won't do anything if etag hasn't changed.
-     * When there was a new image the new image will be shown + the image
-     * and etag cache will be updated.
-     * @param url
-     */
-    private void refresh(final FastImageViewWithUrl view, final String url) {
-        EtagRequester.requestEtag(url, new PersistEtagCallbackWrapper(url, new EtagCallback() {
-                    @Override
-                    public void onError(final String error) {
-                        loadImage(view, url, null, null, null);
-                    }
-
-                    @Override
-                    public void onEtag(final String etag) {
-                        loadImage(view, url, etag, null, null);
-                    }
-                })
-        );
+     * This will make a head request to the URL to get the ETAG.
+     * The request is then forwarded to glide, which uses the
+     * ETAG as signature, see {@link #loadImageWithSignature}.
+     **/
+    private void loadImage(final FastImageViewWithUrl view, final String url, @Nullable final RequestOptions options, final @Nullable String key) {
+        String prevEtag = ObjectBox.getEtagByUrl(url);
+
+        // We need to make a head request to the URL with the ETAG attached.
+        // - When we get a new etag Glide will send out another request
+        // - If the signature (etag) doesn't change, Glide won't bother sending out a request
+        EtagRequester.requestEtag(url, prevEtag, new EtagCallback() {
+            @Override
+            public void onEtag(String etag) {
+                // Note: here at this point the etag in the ObjectBox has been updated
+                // to the new etag. That's why we pass down the the previous.
+                loadImageWithSignature(view, url, etag, prevEtag, options, key);
+            }
+
+            @Override
+            public void onError(String error) {
+                loadImageWithSignature(view, url, prevEtag, prevEtag, options, key);
+            }
+        });
     }
 
     /**
-     *
-     * @param view
-     * @param url
-     * @param etag Optional
-     * @param options Optional
-     * @param key Optional, when set it will emit events
+     * This loads the actual image either from server or from cache
+     * depending on whether a cache entry for the given signature
+     * exists yet.
+     * If a prev signature is passed it will show the image for the
+     * url + prevSignature as long as the new image from the url (with
+     * the new signature) is being loaded.
      */
-    private void loadImage(final FastImageViewWithUrl view, final String url, @Nullable final String etag, @Nullable final RequestOptions options, final @Nullable String key) {
-        getActivityFromContext(view.getContext()).runOnUiThread(new Runnable() {
-            @Override
-            public void run() {
-                if (requestManager == null) {
-                    Log.e(FastImageViewManager.class.getSimpleName(), "Can't refresh as requestManager was null!");
-                    return;
-                }
+    private void loadImageWithSignature(
+            final FastImageViewWithUrl view,
+            final String url,
+            @Nullable String signature,
+            @Nullable String prevSignature,
+            @Nullable final RequestOptions options,
+            @Nullable final String key)
+    {
+        getActivityFromContext(view.getContext()).runOnUiThread(() -> {
+            if (requestManager == null) {
+                Log.e(FastImageViewManager.class.getSimpleName(), "Can't refresh as requestManager was null!");
+                return;
+            }
+
+            // cancel any previous requests
+            requestManager.clear(view);
 
+            // Request the new image
+            RequestBuilder<Drawable> imageRequest = requestManager
+                    .load(url);
 
+            // When we have a previous signature we want to show the previous
+            // image, until the new one is loaded. This is done with a
+            // thumbnail request. Without this there would be a "white flickering"
+            // until the (new) image is loaded.
+            if (prevSignature != null) {
+                // Create a "thumbnail" which is literally the cached image while we load the new image
                 RequestBuilder<Drawable> thumbnailRequest = requestManager
                         .load(url);
-
-                // add etag as signature when its set
-                String prevEtag = ObjectBox.getEtagByUrl(url);
-                if (prevEtag != null) {
-                    thumbnailRequest = thumbnailRequest.signature(new ObjectKey(prevEtag));
-                }
-
-                RequestBuilder<Drawable> imageRequest = requestManager
-                        .load(url)
+                thumbnailRequest = thumbnailRequest.signature(new ObjectKey(prevSignature));
+                imageRequest = imageRequest
                         .thumbnail(thumbnailRequest)
                         .skipMemoryCache(true);
+            }
 
-                if (etag != null) {
-                    imageRequest = imageRequest.signature(new ObjectKey(etag));
-                } else if (prevEtag != null) {
-                    // in case we received no etag (e.g. loading error due to no network)
-                    // we still want to consider getting cache with the prev etag.
-                    imageRequest = imageRequest.signature(new ObjectKey(prevEtag));
-                }
-
-                if (options != null) {
-                    imageRequest = imageRequest.apply(options);
-                }
-
-                if (key != null) {
-                    imageRequest = imageRequest.listener(new FastImageRequestListener(key));
-                }
-
-                // finally, load the image
-                imageRequest.into(view);
+            if (signature != null) {
+                imageRequest = imageRequest.signature(new ObjectKey(signature));
             }
+            if (options != null) {
+                imageRequest = imageRequest.apply(options);
+            }
+            if (key != null) {
+                imageRequest = imageRequest.listener(new FastImageRequestListener(key));
+            }
+
+            // finally, load the image
+            imageRequest.into(view);
         });
     }
 
-    /**
-     * Returns the etag from cache. If there is no cached etag it will request
-     * the server to get it, save it to the cache, and return it.
-     * @param url
-     * @param callback
-     */
-    private void getEtag(String url, EtagCallback callback) {
-        String etag = ObjectBox.getEtagByUrl(url);
-
-        if (etag == null) {
-            EtagRequester.requestEtag(url, new PersistEtagCallbackWrapper(url, callback));
-        } else {
-            callback.onEtag(etag);
-        }
+    private void refresh(final FastImageViewWithUrl view, final ReadableMap source) {
+        load(view, source);
     }
 
     @ReactProp(name = "tintColor", customType = "Color")
@@ -389,8 +368,7 @@ public void receiveCommand(FastImageViewWithUrl root, int commandId, @Nullable R
         switch (commandId) {
             case FORCE_REFRESH_IMAGE: {
                 if (root.source != null) {
-                    final FastImageSource imageSource = FastImageViewConverter.getImageSource(root.getContext(), root.source);
-                    refresh(root, imageSource.getGlideUrl().toStringUrl());
+                    refresh(root, root.source);
                 }
                 return;
             }

android/src/main/java/com/dylanvann/fastimage/custom/EtagRequester.java

@@ -1,9 +1,13 @@
 package com.dylanvann.fastimage.custom;
 
+import androidx.annotation.NonNull;
+
 import com.dylanvann.fastimage.custom.persistence.ObjectBox;
 
 import java.io.IOException;
 
+import javax.annotation.Nullable;
+
 import okhttp3.Call;
 import okhttp3.Callback;
 import okhttp3.OkHttpClient;
@@ -17,12 +21,11 @@ public class EtagRequester {
      * @param url
      * @param callback
      */
-    public static void requestEtag(final String url, final EtagCallback callback) {
-        final String prevEtag = ObjectBox.getEtagByUrl(url);
-
+    public static void requestEtag(@NonNull final String url, @Nullable final String prevEtag, @NonNull final EtagCallback callback) {
         OkHttpClient client = SharedOkHttpClient.getInstance(null).getClient();
         Request.Builder request = new Request.Builder()
-                .url(url);
+                .url(url)
+                .head();
 
         if (prevEtag != null) {
             request.addHeader("If-None-Match", prevEtag);

android/src/main/java/com/dylanvann/fastimage/custom/PersistEtagCallbackWrapper.java

@@ -1,22 +1,49 @@
 package com.dylanvann.fastimage.custom;
 
 import android.content.Context;
+import android.util.Log;
+
+import com.dylanvann.fastimage.custom.persistence.ObjectBox;
 
 import java.io.File;
 
 import okhttp3.Cache;
 import okhttp3.OkHttpClient;
+import okhttp3.Request;
+import okhttp3.Response;
 
 public class SharedOkHttpClient {
     private static SharedOkHttpClient instance;
 
     private final okhttp3.OkHttpClient client;
+
     private SharedOkHttpClient(Context context) {
         this.client = new okhttp3.OkHttpClient.Builder()
                 .cache(new Cache(
                         new File(context.getCacheDir(), "http_cache"),
                         50L * 1024L * 1024L // 50 MiB
                 ))
+                // Add an interceptor that will keep our etag up2date
+                .addInterceptor(chain -> {
+                    Request request = chain.request();
+
+                    // Note: we don't add the the etag to the request
+                    //       Cache invalidation is handled on Glides signature level
+                    //       (See FastImageViewManager)
+                    Response response = chain.proceed(request);
+
+                    String url = request.url().toString();
+                    String prevEtag = ObjectBox.getEtagByUrl(url);
+
+
+                    // update etag if changes
+                    String responseEtag = response.header("etag");
+                    if (responseEtag != null && !responseEtag.equals(prevEtag)) {
+                        ObjectBox.putOrUpdateEtag(url, responseEtag);
+                    }
+
+                    return response;
+                })
                 .build();
     }