Improve Hybrid Experience: Ele.me Double Eleven PHA Framework Technical Practice

Authors: Xiaofei, Yasong, Zilun

Ele.me 618, National Day, Double 11, Double 12 and other big promotion venues will basically have bottom navigation as standard. In the previous ordinary H5 container, bottom navigation was implemented in the front end. Every time you click the tab at the bottom of the venue, it will restart one. The active page is overlaid on it, even the tabs that were opened before have to be recreated and loaded, the experience is not good, and H5 can't combine the native capabilities well for further experience and performance optimization.

After research, it is found that the PHA framework of Taobao can solve the above pain points. The TabBar at the bottom of the PHA container is rendered by Native, and the bottom bar will not be rebuilt when the tab is clicked. The webview corresponding to the tab can also be smoothly transitioned and seamlessly switched in the entire PHA container, without the need for additional Pick up the container. And the loaded tab activity page Webview will be resident in memory, and will switch directly to the foreground when it is accessed again, which is closer to the native experience.

In last year's 618, National Day, Double 11 and Double 12 promotions, combined with the business features of Ele.me, some special optimization methods have been implemented successively, bringing better performance experience and business results.

Double eleven online effect

To view the effect video, please click: Ele.me Double Eleven PHA venue practice

Comparison of old container and pha container. The left side is the old container site, and the right side is the pha container site.

Introduction to PHA

What is PHA? The full name of PHA is Progressive Hybrid App. It is a new framework to enhance the Hybrid experience. It provides some Native components at the same layer and progressive enhancement strategies to create Hybrid APP applications, so that these applications have the same user experience as Native.

• PHA uses the configuration of the Web Application Manifest and extends the configuration
• Each PHA application starts an App Worker, which is a JS script that runs on the client side independently of the current page. The business logic can be customized in the Worker, such as the data list displayed in the Tab at the bottom of the LBS request
• There can be multiple pages under the application, and the default rendering engine of each page is WebView
• In each page, PHA provides UI capabilities such as pull-down refresh, page header, etc., which can be customized in Manifest
• For application PHA, it also provides UI capabilities such as Tab container, Swiper container, and splash screen, and performance optimization capabilities such as pre-request and offline caching, which can be implemented by configuring in Manifest.

pha architecture diagram

Ele.me access plan

The main difference between local life and Taobao and other businesses is that the former strongly relies on LBS attributes, including the recall of data such as bottom Tab, commodities, and brands. Therefore, when the user opens the PHA framework, it is necessary to perform positioning and load the corresponding bottom Tab and top swipe data, and then dynamically assemble the corresponding manifest.json data to render the PHA. The overall architecture diagram is as follows:

Architecture diagram

B-side link

The Modou platform relies on the Tianma source code page service to create the venue framework, and uses the Modou data to configure the data of the bottom Tab and the top Swiper, and realize the fixed investment. The main process is as follows:

Note: "Mo Dou" is a module construction platform, and "Tianma" can provide basic construction services.

data construction

Data construction is the ability of multi-scheduled and scheduled data investment provided in Modou. After the scheduled investment is configured and released, the unique resource ID of the current configuration can be obtained, and the business can obtain configuration data through an asynchronous interface.

Venue Frame Tool

A new venue framework tool has been added. The tool provides the ability to create, publish, and edit venue frameworks. After creating and publishing a framework, you can get the frame delivery link.

C-end link

The C-side link is implemented by the client in combination with the front-end, and mainly includes the following three parts:

1. Client-side PHA framework: integrates the core capabilities of the framework such as Tabs container, Swiper container, startup screen, Appworker, and preloading

2. Source code template page: As the entry of PHA framework, it also provides PHA normal loading entry (native.xtpl) and downgrade entry (web.xtpl)

3. AppWorker service: You can have the opportunity to customize the manifest according to the business requirements before the frame is rendered, including UI customization of the head sliding container, event processing, buried points, etc.

Overall loading link diagram

Client Access Transformation

routing layer

Modify the Ele.me routing layer, add the pha entry, and add the native degradation strategy, grayscale control and other logic at the entry.

Adapter: native navigation header adaptation

Since the ui library of Taobao has been stripped, Ele.me needs to implement the navigation bar by itself: display, hide, various themes, scrolling discoloration, title setting, logo setting, event callback, downgrade jump, etc. In addition, both ends also provide Some private jsapis such as navigation headers and status bars are available for front-end calls.

The iOS side implements the corresponding method through PHANavigationBarProtocol, and the Android side uses the system Toolbar as the basis to customize Ele.me's TranslucentToolbar and embed it into the PHA container Activity in the form of Fragment.

The following figure is the native side navigation header. The title supports setting text and loading images. The navigation bar theme supports transparency and white:

Text & Image Navigation Bar

The following figure shows the status bar in light and dark styles:

light&dark status bar

Adapter: Image loading adaptation

Ele.me Since the iOS side maintains its own image library, it needs to adapt the image loading and implement the PHAImageLoaderProtocol and its image loading related methods.

panning-dependent stripping

Ele.me has strict control over the size of the package, and it is strictly audited for the newly introduced second- and third-party libraries. The Ele.me terminal was connected to pha earlier, and there were additional hand-taoing dependencies in the early version, and some functions of Ele.me were not used for the time being, or there were similar implementation schemes, so it was necessary to strip off some of the hand-taoing dependency libraries. Trim unneeded features.

There are about 20 directly dependent libraries stripped by Android, such as: live library, public resource library, ui library, compat library, startup framework library, atlas, etc. The total size is about 7.2M+, and the number of file changes involved: 100+

Note: At present, the latest official version 2.0 of Android has stripped these dependencies, great praise! When the iOS side is connected to pha, the dependency has been basically stripped, and no major transformation is required.

Front-end access transformation

Framework service

1. Source code template: As the entry point of the PHA framework, it also provides the PHA normal loading entry (native.xtpl) and downgrade entry (web.xtpl)

• Normal entry: Generate semi-finished manifest based on the data entered when creating the venue framework on the platform. The result contains the AppWorker address, configuration information when creating the framework, etc. After the client executes the AppWorker file, it starts the rendering of the PHA framework
• Downgrade entry: Provide unified downgrade processing for lower versions that do not support PHA or when PHA creation fails, and use ordinary H5 containers to open the downgradeUrl address in the delivery link to achieve downgrade to ensure business availability

2. AppWorker service: It can have the opportunity to customize the manifest according to the business requirements before the framework is rendered, mainly providing the following capabilities

• Position, request bottom bar, top swiper data
• UI customization and event handling of the header sliding container
• and PHA event, message processing
• Build the final manifest file
• Start frame rendering
• Bury it

Venue link

1. Page solution, basic util, component transformation

2. Modification of multiple modules

• Transparent header module: Previously, the transparent header was implemented by H5 combined with Native, and the business customization capability was relatively weak. In order to solve this problem, a pure H5 version of the transparent header module was implemented for the PHA container.
• Bottom Navigation Module, Search Module, Share Module: Compatible with PHA and non-PHA containers

Buried point transformation

The PHA framework provides a set of buried point APIs. The client and front end need to be adapted and transformed according to their own buried point solutions. The statistics and reporting standards are consistent with those of non-PHA venue buried points, mainly in the following two points:

1. The PV needs to be reported every time the page is switched, including the pages that have been browsed. For example, when Tab A switches to Tab B and then switches to Tab A, the PV report needs to be triggered on the last Tab A page.
2. When the bottom Tab or the top Swiper container switches between different Items, report the click on the buried point

performance optimization

The Ele.me pha container loading process is mainly divided into the following four stages, and corresponding performance optimization methods can be carried out for different stages.

• pha container stage: semi-finished manifests and workers can be prefetched or cached optimized; the complete manifest data request assembly stage can be prefetched for latitude and longitude and pre-request for interfaces;
• webview stage: webview can be pre-initialized, and the main document loading can be optimized by template;
• Business stage: For business js and css resources, resources can be offline and cached, common js resources can be built-in; business interface data can be pre-requested; preheating and pre-rendering.

Official PHA Framework Optimization Means

The pha framework itself provides manifest pre-request and caching, html templating, offline resource access, built-in Js pre-rendering and other optimization methods.

Taking the Double Eleven site on the iOS side as an example, the manifest and worker prefetching are used to optimize the container creation time of more than 200ms.

Ele.me features performance optimization

PHA webview warm up

Container creation and main document loading need to be performed when opening the pha above-the-fold page and switching tabs. There is a long white screen, and the experience is not good. Pre-rendered pages are undoubtedly the best means of performance, but on the one hand, it will cause waste of resources, and on the other hand, it will also bring a lot of memory pressure, which cannot be abused at will. play its value.

Ele.me adopts a preheating scheme for tabs outside the first screen (the maximum number of preheating pages can be configured) to eliminate the white screen time when tabs are switched. The difference between pre-warming and pre-rendering is that pre-warming does not initiate a first screen interface request after getting the main document in the off-screen stage. After the first screen page is rendered, the webviews corresponding to the remaining bottom and top items are preheated and cached. When the user clicks the corresponding tab, the webview is consumed to perform the on-screen operation, and the pha/preload submodule chain is reused. Road and made some modifications, referring to the pre-rendering logic of TSchedule. The main process is shown in the following figure:

Link comparison before and after optimization:

The preheating effect is shown in detail below (the left side is the preheating not turned on, and the right side is the preheating state):

Please click to view the effect video: Ele.me Double Eleven PHA venue practice

Business interface preload

The above-the-fold interface of the venue page takes a long time, and some even take more than 2s. In order to shorten the page loading time, a pre-request is made for the above-the-fold interface. Considering that Ele.me has previously supported the interface pre-request capability and packet size through TSchedule, it was decided not to introduce the prefetch module of pha, but to adapt data prefetch to pha with the help of Ele.me's existing capabilities. .

The orange (switch configuration publishing platform) pre-request configuration is released in advance by the client students, and the pha venue triggers the interface pre-request in advance when the first screen routing, bottom tab switching, and top pageheader switching are performed, and jsapi is also provided for the front end to call the pre-request by itself to optimize the effect. Obviously, it is already an essential optimization item for Ele.me's venue business.

(1) Asynchronous pre-request of network data before the first screen webview is loaded

(2) Asynchronous pre-request of network data in the routing phase before startup

(3) Asynchronous pre-request of network data before tab switching webview loading

(4) Asynchronous pre-request of network data before webview loading through jsbridge

Full manifest data request optimization

Many local life services are strongly dependent on positioning. For venue business, currently, only semi-finished manifest files can be returned, and jsapi on the worker is called to obtain the latitude and longitude and then initiate an interface request to obtain complete manifest-related data for assembly; The latitude and longitude information is also mostly required when the page business makes an interface request.

Longitude and latitude prefetch

Method 1: Inject the latitude and longitude information into the semi-finished manifest (for business scenarios that require pha workers to process the semi-manifest file)

In the manifest semi-finished json returned to the front end, append the latitude and longitude data cached on the home page, saving a time-consuming jsbridge call. The process comparison before and after optimization is shown in the following figure:

Additional latitude and longitude information template:

Method 2: Pass in the latitude and longitude at the entry link (for scenarios that do not require pha workers)

Most single-page businesses can obtain the complete manifest data at the beginning, without additional processing by workers, and thus cannot directly obtain the injected latitude and longitude information through method 1, so we adopted another scheme, linking the pha entry (manifest url) splicing the latitude and longitude parameters, and splicing it to the link of the H5 inner page through the ability of transparent transmission of the pha parameter. The specific process is as follows:

Complete manifest data interface pre-request

After the worker obtains the latitude and longitude, it will use the page id, resource id, and latitude and longitude to initiate an interface request to obtain the data (pages, tab, etc.) required for the complete manifest. After the data is returned, it is spliced into complete manifest data, and then jsapi is called to notify the client to update the manifest. , to load tabs and pages, this interface takes about 200ms.

Optimization is performed by pre-requesting this interface in the routing phase. Since the page id and resource id required by the interface will basically not change during the delivery of the same big promotion venue, the pre-loading configuration published in advance sets these two ids directly as fixed. value, while the latitude and longitude are dynamically obtained when the pre-request is initiated.

After the launch of this function, after the comparison of the two versions, the overall time spent on the first screen was reduced by about 150ms.

stability

downgrade

An error in any step before the rendering of the PHA framework may cause the framework to fail to initialize. In order to implement the same link to the old and new versions of Ele.me and ensure that the business is available in various abnormal scenarios, it needs to be seamlessly downgraded to the H5 container. The process as follows:

plan

Before the start of the entire Double Eleven promotion, we have entered and practiced plans for various abnormal situations that may occur in the pha venue, such as venue downgrade, preheating shutdown, interface preloading shutdown, manifest prefetching shutdown, etc. With the joint support of the team and the test team, the pha container venue ran stably during the promotion period without any major failures.

Monitoring and Reporting

On the dp2 monitoring platform, related reports such as manifest hit rate monitoring, offline resource hit rate monitoring, degradation monitoring, performance monitoring, warm-up hit rate monitoring, first screen time-consuming monitoring, webview loading time-consuming monitoring in the container, and white screen monitoring are built.

In addition, Shandao is currently building a container market, and the ios terminal has been initially connected. We look forward to the follow-up construction of the market, such as alarms and second-party business data display.

Summary and Outlook

Through the access of the pha framework and a series of optimization methods, the time required for double-end optimization of the first screen is reduced by about 650ms, eliminating the white screen time when switching tabs, improving the user experience of the Ele.me end promotion venue, and also promoting Improve business data.

According to the statistics of the operation side, the exposure click rate of the navigation tab at the bottom of the main venue of Double Eleven last year increased by more than 50% compared with the official period of the National Day promotion. Since the PHA was piloted in the official period of the 618 promotion, the click-through rate of the new bottom navigation has continued to rise.

The follow-up front-end needs to solve the problem of linking as a normalized product capability to support the use of various business scenarios. The end-side will also further explore other optimization solutions, such as: Tabbar straight-out rendering, pha container Fragmentation, quickjs introduction, etc. In addition to the venue business, Ele.me Duanchao has also launched some businesses in pha, and achieved some performance gains.

I hope that the optimization points made by Ele.me in the future can give you some inspiration and thinking, serve more suitable businesses, and further improve the user experience.

Pay attention to [Alibaba Mobile Technology] WeChat public account, 3 mobile technology practices & dry goods every week for you to think about!