Concept explanation:

  1. Encode === ‘encode’
  2. Decode === ‘decode’

In a word: encode is required for special characters (i.e. URL-reserved characters) and characters that are not ASCII encoding sets

Let’s take a look at some actual scenarios:

1. Get a URL sent to the page from the server and open it in the App (e.g. Push message)

URL: https://baidu.com/s?wd= with help

  1. First of all, we need to make it clear that baidu.com/s?wd= is an invalid URL (because urls cannot contain encoding sets other than ASCII, they need to be encoded if they do).
  2. However, some students may wonder why I often see Chinese characters in the URL in the address bar of the browser (as shown in the picture below) :

  1. Because when the browser displays, the browser decode Chinese
  2. Browser is a commercial product after all, need to consider the actual user experience, otherwise the address bar is a string of encode after the character, the user cost is very high

  1. So what is the standard website?

    • If we select and copy the contents of the red box in the following image and go to the editor, we will find that it is actually:
    https://www.baidu.com/s?wd=%E6%BB%A1%E5%B8%AE
/ / that is
https:/ / www.baidu.com/s?wd=encodeURIComponent (' full help)
Copy the code

    That is, the non-ASCII coded character set needs to be encoded. Otherwise, the Webview cannot open the corresponding page if the Native route does not have a backstop

    • For opening pages through Webview, it is also necessary to encode Chinese in URL Query, for example:
    /** * list -> details page * Need to encode Chinese */
function toDetailPage() {
  const url = `https://taobao.com/detail?id=123`; // The jump is ok
  // Here "hahaha" needs encode to ensure that it is properly opened in App
  const url = `https://taobao.com/detail?id=The ${encodeURIComponent('Hahaha')}`; 
  JSBridge.schemaJump('taobao://view/webview? url=' + encodeURIComponent(url));
}
Copy the code

    • There is no backpocket in the iOS Router layer, which requires URL producers to encode Chinese in URL according to the specification, and try not to backpocket themselves. Android is taking a backseat just in case.

    • Conclusion: When Chinese is used as URL parameter, please follow the specification and actively encode Chinese in URL

    • Additional scenario: Sometimes the front end student is not necessarily the URL producer, for example:

      • There is an input box in the background of Push message, which allows business students to fill in the corresponding page of Push message. Business students do not know what encode is and when it is needed.
      • Business students may simply fill in:Baidu.com/s?wd= ha ha. When such URL is sent to the App, it will be found that it cannot be opened on the iOS terminal.
      • The main purpose of writing this article is to make our r & D students aware of the development function: this URL is input by business students, there will be all kinds of possibilities, there will be Chinese, special characters and so on, should be the input URL parameters for parsing and encode, to ensure that the FINAL URL delivered to the end is in line with the specification
      • As for whether it is the back-end or the front-end to do this layer of encode, it can be specific, specific negotiation, the purpose is to have this awareness and to avoid all kinds of problems that may be caused by this in advance.

  2. In the URI RFC 3986 specification, there is a description of when URL parameters need encode, we briefly comb it:

    1. Encode is not required for unreserved characters
    2. Reserved characters need to be escaped in different contexts. That is, whether reserved characters need to be escaped varies from URI structure to URI structure, but it is ok to escape them regardless of their significance. If you do not know whether to escape them, you can escape them all
    • Non-reserved characters: that is, these characters have no special meaning in the URL.
    • Reserved characters: Reserved characters in urls have special meanings. For example, # is used to locate anchors in urls and & is used to split query parameters

    Here’s an example:

    1.Retrieve "AMH"http://baidu.com/s?wd=amh // This URL parameter is encode free

2.If I want to search: what does "&" mean// The following URL is invalid.
http://baidu.com/s?wd=& 

// Encode '&';
http:/ / baidu.com/s?wd=%2d, namely http://baidu.com/s?wd=encodeURIComponent (' & ')

3.Maybe you are still a little confused here, why & need to be encode, take another example:http://baidu.com/s?wd=&iswhatExplanation: Because "&" is a reserved character in the URL, if you do not encode wd, the meaning of the URL would be ambiguous: you want to search: {wd: '&iswhat'} or: {wd: ' '.iswhat: ' '}???? If you want to search &iswhat, the following url is correct:http:/ / baidu.com/s?wd=%26iswhat / / :
http://baidu.com/s?wd=encodeURIComponent('&iswhat')

Copy the code
    1. If it is neither a reserved word nor a non-reserved word, it must be encoded
    • Characters need to be converted to utF-8 byte sequences, and then each byte is converted to: % + byte hexadecimal representation
    • Refer to encode of Chinese characters above

    Conclusion: Encode is needed for the Reserved Character(Reserved keyword) + non-ASCII encoded Character set in the figure above

Another example: the off-site H5 page needs to evoke a page in the App (probably Native/H5).

  • Jump straight App page: taobao: / / rn. Transaction/user profile? id=123

  • Jump straight App page, the page URL query parameters, as the page button to jump address: taobao: / / rn. Transaction/user profile? id=123&next-page=encode(baidu.com?id=123)

  • Taobao ://middle-page? Taobao ://middle-page? page=encode(rn.transaction/user-profile? id=123&next-page=encode(baidu.com?id=123))

See the following case:

toDetail(id){*1.To jump from article List to Article Details page, you need articleId:1234In the past, there was a button at the bottom of the details page to jump to taobao://user/order-detail? id=88888)Taobao: * app-url=taobao://user/order-detail? OrderId =88888 &articleID =1234 orderId=88888 &articleID =1234Taobao://user/order-detail? OrderId =88888 to encode, the related content as a whole, namely:* detail? app-url=taobao%3A%2F%2Fuser%2Forder-detail%3ForderId%3D88888&articleId=1234* /toDetail(id) {
  const url = `https://taobao.com/detail?articleId=1234&app-url=taobao://user/order-detail?orderId=88888`;
  const url = `https://taobao.com/detail?app-url=taobao://user/order-detail?orderId=88888&articleId=1234`;
  JSBridge.schemaJump('taobao://view/webview? url=' + encodeURIComponent(url));
}
Copy the code

The resources

  1. Tech.amh-group.com/#/posts/det…
  2. www.zhihu.com/question/21…
  3. PS: Thanks to Deng Xiaoyan (iOS) for answering your questions