feat(ios): improve initial webview loading appearance (#2933)

Improve background appearance of the webview during the initial load and ensure that the launch storyboard background matches the system. Co-authored-by: Ian Keith <iankeith@gmail.com> Co-authored-by: jcesarmobile <jcesarmobile@gmail.com>
ionic-team · Jul 13, 2020 · 49720a5 · 49720a5
1 parent 0d5e132
commit 49720a5
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/ios-template/App/App/Base.lproj/LaunchScreen.storyboard b/ios-template/App/App/Base.lproj/LaunchScreen.storyboard
@@ -1,11 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13196" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
-    <device id="retina4_7" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17132" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13173"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17105"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -16,6 +15,7 @@
                     <imageView key="view" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Splash" id="snD-IY-ifK">
                         <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                         <autoresizingMask key="autoresizingMask"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                     </imageView>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
@@ -25,5 +25,8 @@
     </scenes>
     <resources>
         <image name="Splash" width="1366" height="1366"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
     </resources>
 </document>
diff --git a/ios/Capacitor/Capacitor/CAPBridgeViewController.swift b/ios/Capacitor/Capacitor/CAPBridgeViewController.swift
@@ -24,6 +24,13 @@ public class CAPBridgeViewController: UIViewController, CAPBridgeDelegate, WKScr
   private var basePath: String = ""
   private let assetsFolder = "public"
 
+  private enum WebViewLoadingState {
+    case unloaded
+    case initialLoad(isOpaque: Bool)
+    case subsequentLoad
+  }
+  private var webViewLoadingState = WebViewLoadingState.unloaded
+
   private var isStatusBarVisible = true
   private var statusBarStyle: UIStatusBarStyle = .default
   private var statusBarAnimation: UIStatusBarAnimation = .slide
@@ -97,7 +104,12 @@ public class CAPBridgeViewController: UIViewController, CAPBridgeDelegate, WKScr
     if let backgroundColor = (bridge!.config.getValue("ios.backgroundColor") as? String) ?? (bridge!.config.getValue("backgroundColor") as? String) {
       webView?.backgroundColor = UIColor(fromHex: backgroundColor)
       webView?.scrollView.backgroundColor = UIColor(fromHex: backgroundColor)
+    } else if #available(iOS 13, *) {
+      // Use the system background colors if background is not set by user
+      webView?.backgroundColor = UIColor.systemBackground
+      webView?.scrollView.backgroundColor = UIColor.systemBackground
     }
+
     if let overrideUserAgent = (bridge!.config.getValue("ios.overrideUserAgent") as? String) ?? (bridge!.config.getValue("overrideUserAgent") as? String) {
       webView?.customUserAgent = overrideUserAgent
     }
@@ -173,6 +185,16 @@ public class CAPBridgeViewController: UIViewController, CAPBridgeDelegate, WKScr
   }
 
   func loadWebView() {
+    // Set the webview to be not opaque on the inital load. This prevents
+    // the webview from showing a white background, which is its default
+    // loading display, as that can appear as a screen flash. This might
+    // have already been set by something else, like a plugin, so we want
+    // to save the current value to reset it on success or failure.
+    if let webView = webView, case .unloaded = webViewLoadingState {
+      webViewLoadingState = .initialLoad(isOpaque: webView.isOpaque)
+      webView.isOpaque = false
+    }
+
     let fullStartPath = URL(fileURLWithPath: assetsFolder).appendingPathComponent(startDir).appendingPathComponent("index")
     if Bundle.main.path(forResource: fullStartPath.relativePath, ofType: "html") == nil {
       fatalLoadError()
@@ -298,10 +320,18 @@ public class CAPBridgeViewController: UIViewController, CAPBridgeDelegate, WKScr
   }
 
   public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
+    if case .initialLoad(let isOpaque) = webViewLoadingState {
+      webView.isOpaque = isOpaque
+      webViewLoadingState = .subsequentLoad
+    }
     CAPLog.print("⚡️  WebView loaded")
   }
 
   public func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
+    if case .initialLoad(let isOpaque) = webViewLoadingState {
+      webView.isOpaque = isOpaque
+      webViewLoadingState = .subsequentLoad
+    }
     CAPLog.print("⚡️  WebView failed to load")
     CAPLog.print("⚡️  Error: " + error.localizedDescription)
   }