preface

The white screen problem is one of the biggest headaches in iOS development. WKWebView has been released with iOS8 for 4 years and has solved many of the problems of UIWebView, such as memory leaks, slow loading, incompatibility with iOS10, iOS11, etc. Apple Support iOS version of the market distribution situation, the vast majority of devices are iOS8 or higher, iOS began to use HTTPS requests, but there are some companies Support iOS7 and HTTP requests, to catch up with the pace of The Times!

The characteristics of WKWebView

  • High performance, good stability, small memory footprint
  • Support FOR JS interaction
  • Support for new HTML5 features
  • – Progress bar can be added (it doesn’t work, it’s not useful, it’s used to third parties)
  • Support for built-in gestures
  • Reportedly up to 60fps refresh rate

The characteristics of the HTTPS

  • HTTPS is a network protocol that uses SSL and HTTP to encrypt transmission and authenticate identity. It is more secure than HTTP and protects data from theft and alteration during transmission, ensuring data integrity.
  • The HTTPS protocol has a wide range of security and has little impact on hacking, denial of service attacks, server hijacking, etc.
  • You need to purchase an SSL certificate. The more powerful the certificate, the higher the cost. An SSL certificate usually requires a fixed IP address bound to the server. Adding a fixed IP address for the server increases the cost.
  • On the same network, HTTPS increases page load time by nearly 50 percent and power consumption by 10 to 20 percent. In addition, HTTPS affects the cache and increases data overhead and power consumption.
  • The HTTPS connection occupies a large number of server resources, which increases bandwidth and server investment costs under the same load.


There are still a lot of pits in use, which are common white screen problems. After some debugging, Google found that there are only a few reasons. Smooth network is the premise, please use 4G or WiFi network!! So without further ado, let’s take a look at some of the possible problems.

I. INVALID URL or containing Chinese characters (entry level error)

The source of URL displayed in APP is mainly back-end return or front-end splicing, or even front-end hardcode. The URL may be invalid or contain Chinese characters. Most browsers can open the network address with Chinese characters, but the iOS embedded web page loading framework, no matter UIWebView or WKWebView, can not open the network address with Chinese characters, the address string needs to do UTF8 transcoding first. Reference code: 

urlString = [urlString stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];Copy the code

Two. HTTP request problems

In iOS9, the system changes the original HTTP protocol to the default HTTPS protocol and uses TLS1.2 SSL to encrypt request data.
You can upgrade to support HTTPS requests or force HTTP requests. Add the NSAppTransportSecurity type Dictionary to info.plist. Add NSAllowsArbitraryLoads Type Boolean under NSAppTransportSecurity with the value set to YES.
Some third-party applications do not support HTTPS. Therefore, you need to set the HTTP request whitelist in the info.list to allow some REQUESTS to be HTTP. Reference code: 

<key>LSApplicationQueriesSchemes</key> <array> <! Wechat Scheme whitelist --> <string> Weixin </string> </array>Copy the code

In HTTPS requests, the page cannot be loaded because the certificate authentication agent is not implemented

If it is an HTTPS request, you need to implement the logic to get the server’s authentication in a proxy method in WKWebView’s WKNavigationDelegate, and then return it to the server. This problem often occurs when the client cannot obtain security authentication (no certificate, or a self-created certificate), for example https://www.apple.com/cn is the default Apple China address, However, https://www.apple.com.cn is also accessible (it will automatically redirect to https://www.apple.com/cn), but Safari security authentication does not pass, we need to create a certificate in the proxy method through server-side authentication, Then proceed to request access. For example, when you first visit Safari, a dialog box will pop up and you can click Continue to continue. This can be resolved by implementing the following proxy 

func webView(webView: WKWebView, didReceiveAuthenticationChallenge challenge: NSURLAuthenticationChallenge, completionHandler: (NSURLSessionAuthChallengeDisposition, NSURLCredential?) -> Void)
{  // Determine the authentication method used by the server
    if challenge.protectionSpace.authenticationMethod == NSURLAuthenticationMethodServerTrust {
        if challenge.previousFailureCount == 0 {
            // Create a credential if there are no errors and use the certificate
            let credential = NSURLCredential(forTrust: challenge.protectionSpace.serverTrust!)
            completionHandler(.UseCredential, credential)
        } else {
            // The authentication fails. Cancel the authentication
            completionHandler(.CancelAuthenticationChallenge.nil)}}else {
        completionHandler(.CancelAuthenticationChallenge.nil)}}Copy the code

4. IOS 8.0 – iOS 8.2 occasionally white screen issues

This is a Bug of WKWebView when it was just launched, and occasionally a white screen appears. If you want to avoid this problem, you can only judge by the version number. For systems smaller than 8.2, UIWebView is temporarily used.

5. Scroll components nested, failed to refresh the page

When WKWebView is nested in UITableView or UICollectionView, try replacing UITableView or UICollectionView with UIScrollview. May be because the page is not normal after rolling WKWebView _updateVisibleContentRects methods flush the need to render the contents of the cause.

The hardware memory is insufficient and the process crashes

In UIWebView, when the memory usage is too high, the App Process will crash; In WKWebView, when the overall memory consumption is relatively large, the WebContent Process will crash, resulting in a white screen phenomenon. Loading the following test link in WKWebView can stably reproduce the white screen: 

http://people.mozilla.org/~rnewman/fennec/mem.htmlCopy the code

At this time, wkWebView. URL will become nil, and the simple reload refresh operation has failed, which has a great impact on some long-resident H5 pages. Reference solutions:

1. WKNavigtionDelegate

Since iOS 9, WKNavigtionDelegate has added a callback function: 

- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView API_AVAILABLE(macosx(10.11), ios(9.0));Copy the code
When WKWebView’s total memory usage is too large and the page is about to go blank, the system will call the above callback function. We perform [webView reload] in this function (webView.URL value is not nil at this time) to solve the blank screen problem. The current page may be frequently refreshed on some pages with high memory consumption. Therefore, you need to perform corresponding adaptation operations on H5.

2. Check whether webview. title is empty

Not all H5 pages will call the above callback function when the H5 page is blank. For example, I recently encountered a system camera presented on a H5 page with high memory consumption, and a blank screen appeared when I returned to the original page after taking pictures (the process of taking pictures consumes a lot of memory, resulting in memory strain. The WebContent Process is suspended by the system), but the above callback function is not called. Another phenomenon is that webView.titile is empty when WKWebView is white, so you can check webView.title is empty when viewWillAppear to reload the page.

conclusion

The above are the white screen problems I have encountered and sorted out as well as the reference solutions. I hope it will be helpful to you. If you have any questions, please leave a message.

reference

1, Tencent Bugly: WKWebView those pits
2, HTTPS advantages and disadvantages, principle analysis: our website should not do HTTPS?
3. Analyze and solve the WKWebView blank screen problem in iOS

The statement

This article is the author’s original, please indicate the source of reprint.