How to develop a fully featured information content page based on Wkwebview

Objective

For information-based apps, a good reading experience is essential, so how to develop a fully functional information article page is the focus of this article.
I believe this article will be many in the development of similar features of the Tao friends have a great help, if a big guy passing also welcome pointing twos.

Not much nonsense to say (Chui) ~

Analyze data

For the rich text form of picture and picture, the best and most common data format is HTML, coupled with CSS and JS, you can freely display hundreds of different styles.
Of course, other than HTML is not excluded from the use of other rules of the data format to represent.
But here we still choose to use the data format of HTML, after all, the mainstream.

Show

We often have several ways to achieve rich text display

• UIWebView
  For this control we are not unfamiliar, based on the Uikit framework, the use of simple, but anything has shortcomings, no solution of the memory problem has been a headache, and because the interface restrictions can do a lot of things, he is more suitable for some ordinary web browsing operations.

• Wkwebview
  IOS8 after the powerful Web control, based on the WebKit framework, there are rich APIs, higher performance, smaller memory smaller memory smaller memory and so on, of course, the disadvantage is also essential, such as cookie problem white screen problem style anomalies, etc., but these problems over time of course difficult not to fall great Monkeys, in fact, I personally think that iOS9 after the WebKit is the real WebKit (IOS8 is false), after overcoming the many wonderful bugs I still decided to use Wkwebview as the HTML display control, here not much to talk about later.

• Coretext
  Powerful core text framework, almost all of the text in iOS is done through it. Such a powerful framework to achieve a picture-and-text mix of course, but the focus is how to parse the HTML style to let Coretext know how to do! This is the representative I think Dtcoretext, it can parse most of the HTML style is drawn through the coretext of course, such as some pictures and video elements such as Uiimageview can be displayed by native controls, Gray often 666, but! This forced conversion for a lot of complex HTML is certainly not enough, the support for HTML is certainly not as webview, but simple or to deal with freely, here is not much to say, I will take time to write a demo based on it to show the article.

Function

So we've determined the format and presentation of the data, and now we're talking about features.
What features should an article page contain?

• Font size adjustment
  Because everyone's reading habits of different font size adjustment This function is also essential, dynamic change font size.

• Offline reading
  The purpose of this function is that the user can continue to read the articles that have been collected or loaded, in the case of poor or no network, and the focus is on the persistent caching of the article data.

• Day night Mode (black and white theme style)
  I personally feel that the day and night reading mode is the most basic two, the better is the ability to dynamically change the font style and background color or background map to meet the different user experience, of course, this is also divided products, reading products Of course is to have because of the long-time immersion reading for this experience needs is very delicate, but for the capital News products are not necessary because users of such products tend to be comfortable and fast reading.
  The focus is on dynamically changing the color of text size and background as well as graceful and natural transitions.

• Image View
  Of course this is necessary, the user is interested in the image can be magnified, etc., and can be saved to the album and so on.

• Picture status
  This has to be said, each picture of the display from scratch are divided into different states such as: initial load-loading-loading complete-load failure-click Load and so on, for each state processing I believe many people will ignore, take load failure, I have seen too many apps of the article picture loading lost Failed to show a split or question-mark diagram, really disgusting, if you want to see this figure can only exit this page to see if you can come out, this experience is gray often bad, in the development you may not care after all, a picture load failure probability is not high probably from the beginning of development to the end of the release has not met once, but I would like to say that the details determine success or failure, there are good tips for those who have poor network users are undoubtedly the most intimate.

• Flow optimization
  This is very important, users are often concerned about their own traffic problems (because of traffic = = money), for the processing of thumbnails is essential, reasonable control can save a lot of unnecessary traffic consumption, for the province traffic mode (only WiFi network loading pictures) control is indeed some users just need, this for a few megabytes of GIFs are especially important, and no user likes apps that spend a few 10 minutes on 100MB of traffic, and if such apps haven't been uninstalled, users may have been useless. The focus of the implementation is how to differentiate how the loaded type effectively leverages the images that have already been loaded.

• All-in-a-screen fit
  This is not necessary, or if the support of course is the best, the actual need or to look at the product itself, because for some products, horizontal screen is not a good choice.

Development ideas

Now that we've analyzed the features and the presentation we're going to use, it's time to sort out the ideas for development.

First of all, we need to understand the characteristics of the controls used and the issues to be aware of, based on the characteristics of the control to find the best implementation method, combined with the above-mentioned function I would like to describe my development ideas:

The data format of the article content is HTML, using Wkwebview to load HTML presentation content.

Generally speaking, the interface data of the server does not give us a complete HTML string, but only the content part of the HTML string, basically this format:

<p> girlfriend and her sister are twins, always can't tell!</p>! [] (http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/6eee549a554b1d66409) <p> cat: Like a monkey to keep a chant, in this toss me why? </p>! [] (http://img.xxxxxxxxxxxxx.com/crawl/1707_3/19/a3b81ed6cff11fa4658.gif) <p> I know it's just a jolly dog! </p>! [] (Http://img.xxxxxxxxxxxxx.com/crawl/1707_3/19/99c786d4b149effb163.gif) <p> by this gun, I don't know if I will die </p>! [] (http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/8bff874e8d875c75083.gif) <p> today we're going to practice </p>! with the ball. [] (Http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/6280e10eeeca7e28181.gif) <p> actually overturned, must not be pure blood of the three </p>! [] (http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/0a594d192a861b94511.gif) <p> can blow a lifetime, then I see how you take down </p>! [] (http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/da49d9ad2345eb34986.gif) <p> Lanxiang graduation Ceremony </p>! [] (http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/86e383fac9e24d15935.gif) <p> excuse me, what's the use of this lock? </p>! [] (http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/987a7cab7cfe1e79269.gif) <p> brother What's wrong with you? >! [] (http://img.xXxxxxxxxxxxx.com/crawl/1707_9/19/5c11b1c7185d2141335.gif) <p> a second to be knocked down ... It's not acting, is it? </p>! [] (Http://img.xxxxxxxxxxxxx.com/crawl/1707_9/19/17eeea5639b2f31b856.gif) <p><span> Happy moment </span> </p><p> take a girlfriend home to see parents: "Mom, this is my girlfriend." Mom looked at her girlfriend and said, "How can you find one like this?" My girlfriend's face changed suddenly, I hurriedly smooth things over. "Mom, she is my girlfriend, talk polite point, we are really in love." "Unexpectedly, Mom pulled a girlfriend said:" The girl you so beautiful, how do you find such a, which let me tell your parents ... "</p>

The advantage of this is that we can make it easier to expand and adjust, and we will first have to deal with these strings to replace the changes as needed, and finally assemble them into a full HTML, and then hand them to the Wkwebview display, the complete HTML format is roughly the following:

In order to achieve offline reading is to be able to download the picture can be controlled, here we can put the page picture loading into the original side to do, that is, not through webview loading pictures, but through the original loading picture of the way to load the picture in the page, there are several advantages:

1. Native loading is more controllable and better able to control download progress and other processing of pictures after download is complete.
2. Picture cache utilization is better, when the picture is downloaded, the Web page can be used with the native Picture view page.
3. The size of the picture cache is more convenient for statistics, cleanup, and so on.

Although the benefits are many, but this does not apply to any Web page, because someone else's HTML notation days know what it looks like, you are very difficult to deal with, so this method is only applicable to fixed style fixed HTML syntax.

The pros and cons are over, I will now briefly explain the implementation of the Web page picture native loading of the approximate process.

First, before the HTML is loaded for WebView, all the tags that need to be loaded with the native load are filtered out and the real picture address of each tag is given, which is the value of the src property, and a custom attribute data-original is added to the label. Set the real picture address to its value, and src set the property value to the default bitmap local image address ...

After the label modification is completed, it can be handed to webview to load, so that no picture to load the page loading speed will be greatly improved, after the page loading is complete, you can start to download pictures.

Through JS to get all the tags need to download the data-original property values (real picture address), and then through the original loading image of the way to download, the download is done after the picture cached to the local (sandbox), and finally use JS to each image corresponding to the label src property to set the cost location of the picture cache address. The local cache image is displayed on the WebView page.

The general idea is this, the specific implementation will involve a lot of details, such as the Wkwebview control of the characteristics of the problem, such as thumbnail processing, picture loading control, GIF picture loading progress and so on, there is no more verbose, the demo has been completed, with a relatively perfect flowchart, we can combine this thinking The way to read the code to run demo self-experience.

How to develop a fully featured information content page based on Wkwebview