Explanation of internal Hybrid App experience and interpretation of hybridapp experience
Keywords: Hybrid, Zepto, Fastclick, Backbone, sui, SPA, pushState, cross-origin, CORS
The internal development process of Hybrid apps is not short. Yang Haibo, Pan Jun, and Liu qinhong sum up many valuable lessons with the front-end group and App group, and gradually form our own standard strategy. Below are several experiences (pitfalls) for further explanation.
0x00, click event or tap event?As described in the article "double-click scaling created by Apple is a good solution for accessing desktop sites on mobile devices, however, the 300-millisecond click delay introduced in this article has become one of the culprit for mobile websites to make users feel stuck. "This article gives a clear explanation of the causes and countermeasures, and Zheng will not repeat them here, if you are interested, Study by yourself. So, we can see that there are three countermeasures today: but in practice, we have also learned the famous
Zepto tap point through. In this regard, yexiaochai analyzed: "1. Once touch library is introduced, events are bound globally, and meaningless tap events are triggered each time you click. 2. zepto implement functions such as doubleTap, 2B sets a setTimeout on touchend, and the whole world is full of Xiang. Because setTimeout throws the main process, the event parameter becomes invalid. In this case, even if you execute e. preventDefault () or nothing is invalid. This is the culprit that causes zepto tap to be "broken through. 』 Point transparent effect can see the http://www.cnblogs.com/lilyimage/p/3740668.html said. In short, some people suggest that if you still want to continue using Zepto, then its tap event will no longer work, then you can build a Zepto without touch module by yourself, to reduce the file size and improve the running efficiency. How does Fastclick work? Fastclick binds the event to the element you pass in. After touchstart and touchend (the current click el will be obtained manually), if it is a click event, the click Event of the dom element will be manually triggered. Therefore, the click event is triggered at the touchend, and the overall response speed is increased. Although the touch event is used here, the touch event is bound to a specific dom instead of a document, so e. preventDefault is valid. We can block bubbling or browser default events.
Finally, we use the click event of Fastclick to avoid the delayed response.
0x01, Zepto show/hide is sometimes unreliableAt the early stage of the development of the Hybrid App, we introduced the Zepto fx_methods module to control the display and hiding of elements:
| Fx_methods |
|
Animatedshow,hide,toggle, Andfade*()Methods. |
However, there are always some strange problems, such as the element cannot be properly displayed, the element positioning changes, and so on, which are very difficult to locate. Finally, the front-end students found that it was caused by Zepto show/hide. In this regard, we can find an issue in 2012:
| Fx_methods show () and hide () add unnecessary CSS properties on non-animated DOM nodes |
| When you add fx_methods to your Zepto, the show () and hide () methods are overriden with methods that also call animate. even in the case of undefined speed (normal show), animate still adds using CSS properties to the shown/hidden nodes.These unexpected CSS rules can interfere with the page CSS(In my case, it has changed the positioning of my child fixed DIVs ). |
That is, she believes that, even a simple display, the show/hide of fx_methods.js will add some additional CSS to affect the overall page style and change the transparency, set to 1.0. Samwu discussed similar issues in 2013. Therefore, we have two options:
0x02: Cross-origin problems in AndroidIn the Hyrbid App, zheng yu needs to use the Template + Data = HTML mode to locally render the desired page on the mobile client. Template (HTML5 Template file + JS + CSS + Images) can be packaged in the App installation package in advance, or from CDN (if none, it can be traced to the static file server) pull to the client and store it locally. Data pulls JSON-format Data packets from the remote end using JavaScript scripts in the template file. Therefore, there is a cross-origin problem:
- Android WebView loads the local HTML5 template file through file: // protocol. The JS of the local file sends AJAX requests to the remote end, which is restricted by the same-source policy. For example, you may see "XMLHttpRequest cannot load file ://...... Origin null is not allowed by Access-Control-Allow-Origin. "error message, that is, when your URI is file: //, the source domain name (origin) is empty.
- Borrow comments from difcareer: A Web application can only use the XMLHttpRequest object to initiate a request to the source domain name loaded to it, but cannot initiate a request to any other domain name, however, HTML5 allows AJAX to initiate requests to other domain names across domains, but cannot obtain server-side responses.
- This cross-origin issue is not found in iOS.
There are roughly four countermeasures:
- For GET requests:
- For POST requests:
We will encapsulate an interface sendpostmsg in the Native API to make JS calls (but this also causes 『
In addition to POST requests, other requests can be debugged in the PC browser. The setAllowUniversalAccessFromFileURLs method is also used.
0x03, pushState call failure is also a cross-origin ProblemWe need to use the HTML5 features history. pushState to manually insert history records and modify the address bar. This way, although the address bar has been modified, it does not trigger webpage jumps. As mentioned above, the local file JS calls history. pushState also encounters a cross-origin problem, as shown in the error: the reason is that when your URI is file: //, the source domain name (origin) is empty. We can't solve this problem because we use SUI. Therefore, you have to call webView. getSettings (). setAllowUniversalAccessFromFileURLs (true); to solve all kinds of cross-origin problems.
Reference resources:300, milliseconds click delay;, freebuf, Iris, same-origin policy details and bypass (Part1);, zhihu, pure data API service, set Access-Control-Allow-Origin: * Is there a security risk? 4, csdn, CORS (cross-origin Resource Sharing) Introduction; 5, smdcn, using HTML5 CORS features for Ajax cross-origin POST requests; 6, sof, WebView Javascript cross domain from a local HTML file;, Tongguang, WebView cross-source attack analysis; Welcome to subscribe to my subscription number "Veterans note". Please scan the QR code to follow: during the reprinting, please indicate "reposted from the onlookers-blog Garden" or provide the original link of this article. -EOF-
