From 361529630fbe7e0f743eaa71d72ba3f542553ec2 Mon Sep 17 00:00:00 2001
From: Jason Safaiyeh <safaiyeh@protonmail.com>
Date: Mon, 16 Dec 2019 08:52:54 -0800
Subject: [PATCH] feat(ios): Generate history API events on iOS (#1082)

BREAKING CHANGE: if you use onNavigationStateChange on iOS it will now trigger on # changes to the url.

* Hook the `window.history` API on iOS to generate events

The underlying WKWebView doesn't seem to generate any events in response to the `window.history` API - none of the `WKNavigationDelegate` methods fire.

Given this limitation, the only way to know when the location changes via this API is to inject Javascript into the page and have it notify the native code directly when any of these functions are called.

The `setTimeout` call gives up the current tick, allowing the location to change before firing the event.

* Remove the outdated section about hash changes

Now that this bug is fixed, the workaround is no longer required.
---
 docs/Guide.md    | 38 --------------------------------------
 ios/RNCWebView.m | 42 ++++++++++++++++++++++++++++++++++++++----
 2 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/docs/Guide.md b/docs/Guide.md
index 20e5403..a64f9c9 100644
--- a/docs/Guide.md
+++ b/docs/Guide.md
@@ -149,44 +149,6 @@ class MyWeb extends Component {
 }
 ```
 
-#### Intercepting hash URL changes
-
-While `onNavigationStateChange` will trigger on URL changes, it does not trigger when only the hash URL ("anchor") changes, e.g. from `https://example.com/users#list` to `https://example.com/users#help`.
-
-You can inject some JavaScript to wrap the history functions in order to intercept these hash URL changes.
-
-```jsx
-<WebView
-  source={{ uri: someURI }}
-  injectedJavaScript={`
-    (function() {
-      function wrap(fn) {
-        return function wrapper() {
-          var res = fn.apply(this, arguments);
-          window.ReactNativeWebView.postMessage('navigationStateChange');
-          return res;
-        }
-      }
-
-      history.pushState = wrap(history.pushState);
-      history.replaceState = wrap(history.replaceState);
-      window.addEventListener('popstate', function() {
-        window.ReactNativeWebView.postMessage('navigationStateChange');
-      });
-    })();
-
-    true;
-  `}
-  onMessage={({ nativeEvent: state }) => {
-    if (state.data === 'navigationStateChange') {
-      // Navigation state updated, can check state.canGoBack, etc.
-    }
-  }}
-/>
-```
-
-Thanks to [Janic Duplessis](https://github.com/react-native-community/react-native-webview/issues/24#issuecomment-483956651) for this workaround.
-
 ### Add support for File Upload
 
 ##### iOS
diff --git a/ios/RNCWebView.m b/ios/RNCWebView.m
index a05a982..c4f93c1 100644
--- a/ios/RNCWebView.m
+++ b/ios/RNCWebView.m
@@ -14,6 +14,7 @@
 #import "objc/runtime.h"
 
 static NSTimer *keyboardTimer;
+static NSString *const HistoryShimName = @"ReactNativeHistoryShim";
 static NSString *const MessageHandlerName = @"ReactNativeWebView";
 static NSURLCredential* clientAuthenticationCredential;
 static NSDictionary* customCertificatesForHost;
@@ -160,6 +161,31 @@ static NSDictionary* customCertificatesForHost;
     }
     wkWebViewConfig.userContentController = [WKUserContentController new];
 
+    // Shim the HTML5 history API:
+    [wkWebViewConfig.userContentController addScriptMessageHandler:self name:HistoryShimName];
+    NSString *source = [NSString stringWithFormat:
+      @"(function(history) {\n"
+      "  function notify(type) {\n"
+      "    setTimeout(function() {\n"
+      "      window.webkit.messageHandlers.%@.postMessage(type)\n"
+      "    }, 0)\n"
+      "  }\n"
+      "  function shim(f) {\n"
+      "    return function pushState() {\n"
+      "      notify('other')\n"
+      "      return f.apply(history, arguments)\n"
+      "    }\n"
+      "  }\n"
+      "  history.pushState = shim(history.pushState)\n"
+      "  history.replaceState = shim(history.replaceState)\n"
+      "  window.addEventListener('popstate', function() {\n"
+      "    notify('backforward')\n"
+      "  })\n"
+      "})(window.history)\n", HistoryShimName
+    ];
+    WKUserScript *script = [[WKUserScript alloc] initWithSource:source injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
+    [wkWebViewConfig.userContentController addUserScript:script];
+
     if (_messagingEnabled) {
       [wkWebViewConfig.userContentController addScriptMessageHandler:self name:MessageHandlerName];
 
@@ -404,10 +430,18 @@ static NSDictionary* customCertificatesForHost;
 - (void)userContentController:(WKUserContentController *)userContentController
        didReceiveScriptMessage:(WKScriptMessage *)message
 {
-  if (_onMessage != nil) {
-    NSMutableDictionary<NSString *, id> *event = [self baseEvent];
-    [event addEntriesFromDictionary: @{@"data": message.body}];
-    _onMessage(event);
+  if ([message.name isEqualToString:HistoryShimName]) {
+    if (_onLoadingFinish) {
+      NSMutableDictionary<NSString *, id> *event = [self baseEvent];
+      [event addEntriesFromDictionary: @{@"navigationType": message.body}];
+      _onLoadingFinish(event);
+    }
+  } else if ([message.name isEqualToString:MessageHandlerName]) {
+    if (_onMessage) {
+      NSMutableDictionary<NSString *, id> *event = [self baseEvent];
+      [event addEntriesFromDictionary: @{@"data": message.body}];
+      _onMessage(event);
+    }
   }
 }