Single-entry and multi-entry addresses
The entrance of the APP is determined to be unique and can only be entered through the main page of the app level by level, which determines that there are no abnormal ways to enter the APP, thus greatly reducing the complexity of the APP product. Such setting is very good for process interface. For example, from process interface A > B > C, we cannot directly access to page B by bypassing page A of the app. In product interaction, there will be no process PAGE B of a user’s app accessed by another user. Even if you get it, it will be a shared page customized by the app.
But H5 is multi-entry, h5 whole site all H5 page address is user perception, can copy address access. Therefore, for any H5 page, we must consider how to deal with the user’s direct access to a page in addition to the normal path access.
Whether there is host advantage
Hosts are the unique capabilities of individual apps that are critical to the experience of a product, as listed below:
| Ability to | instructions |
|---|---|
| Network equipment | It can distinguish network conditions, provide different product solutions for different networks, and provide solutions for network exceptions |
| Equipment information | The operating system type, version, and location of the user |
| Basic equipment capability | Taking pictures, GPS, recording |
| File manipulation ability | Management of some files in mobile phones, some local management of application files |
| Data is stored | Complete application data storage solution |
| Stable black box environment | Compared to the complex variety of mobile browsers, the host access environment is more deterministic and can be debugged |
Obviously, the product experience will be affected as follows:
| Compare the item | app | h5 |
|---|---|---|
| Static resource | Built-in in the APP, or cached to the local, no loading | Loading depends on the cache policy of the browser. The first loading cannot be optimized |
| The network load | The performance is better | Rely on existing tools for network request performance |
| The UI rendering | Closer to the underlying language of the mobile phone system, fast rendering and good experience, especially in the obvious drop-down box and long list, the experience is obviously good | Depends on the browser kernel |
| Environment determine | The packaging environment of app and the use environment after packaging are determined. There is no need to distinguish according to the situation of APP, but only need to pay attention to system version | You need to analyze the impact of the host browser version and the kernel on the UI, of course, the system version also has an impact, specific for different browsers need to affect its packaged JS and CSS files |
| Data is stored | It can store the required user operation and interaction data, minimizing the data storage for applications | Need to use web storage, and need to use some store management tools, there is no good technical solution in the complex user data storage forever. |
About page Refresh
| Compare the item | app | h5 |
|---|---|---|
| Whether to refresh the current page directly to enter | Generally, no refresh operation is allowed | User action allows a refresh on the browser menu |
| The refresh time | From the previous process status page or access the link page; Code refreshes caused by page interactions | Refresh with your browser following the link; From the previous process status page or access the link page; A refresh caused by page interaction |
| Whether to perform authentication and service judgment during refreshing | No, because normally it’s in the app environment, closed access environment | Each page needs to be authenticated as necessary and analyzed based on the state of the business whether the user should actually visit this page or another page |
So the classic experience in an app is a certain entry — list — details entry to the list page, data refresh, list to details, details refresh; But the details are returned to the list, and the data and interaction state remain; The list returns to the main page with its status preserved. I will describe how to keep them later. A drop-down refresh or a double-click refresh at the top of a list page is typically provided in order to keep the data updated in sync.
In order for H5 to return a page with a history state, it must use the following methods: 1. Using the browser’s history is possible but not convenient, and some user interactions are not recorded in the browser’s history. 2. Use the global Store to store page data and interaction status. Simple ones can be used, but complex ones are difficult. 3. Make use of visual effects, similar to the page stack in the APP, manage the page level, change the display content of the new page into full-screen display of modal box, and cancel the modal box display when you return. Simple level 1-2 links can be considered. 4 Component cache effect. For example, vue components support keep-alive
Page back and forward
App back and forward, in the head of the APP each jump is to the specified APP page.
However, H5 rarely strictly designs the interaction process according to the idea of APP. Generally, back and forward are the forward and backward of history records directly defined, which will form a lot of history pages on the page, and it is very easy to cause an endless loop of page access. (Directly using new page rendering every time will also lead to a bad experience, especially in the current SPA, we jump to the page is directly push the new page in the page stack).
In the return and progress of page return, we need a closed loop of product experience rather than split H5, and we also need the starting page, home page, result page, etc.
authentication
App centralized authentication, generally, the use of app is a strong requirement for login, especially the use of core business pages. Unless the product is designed for a separate visitor model of the app experience. The advantage of this is that, as long as there is a login, then any page in the app is secure, you can ignore this authentication problem, and directly use the user data logged in the app, because it must be logged in. (Another advantage is that the user name and password that the app has logged in can be saved in the app for a long time and automatic login can be performed directly)
H5 is not the case, usually a lot of h5 page belongs to the sensitive, at least from the point of view of product design, like this may not be a sensitive pages, this determines the us in the development of h5 rarely consider the authentication page do you want to do, whether to a user to access, if you can’t access? But there’s no problem with that in the app, because if your status doesn’t match, you won’t get to the page at all. So if H5 wants to do authentication, what will it do? First of all, if it is a short cache, we can use session sessionStorage and store tools to store some information, and then consider whether authentication is needed in the access entrance of H5. If not, we can directly access it and judge the business state if the business requires it. If necessary, do login authorization and then redirect. I made a detailed authentication logic analysis for the PART of H5.
Advantages of app page stack
The page experience optimization page stack of app takes up a large part. Different pages can be continuously stacked into the view layer as required. The upper level pages can choose not to be destroyed, and when they are not needed, they can be removed from the view layer. For some quick and commonly used pages, in order to improve the experience, you can directly put them into the page, and directly call the required data when necessary.
The H5 doesn’t have the silver bullet to store multiple page displays simultaneously, but there are a few directions we can tweak. 1 SPA can realize no page skipping and no repeated loading of resources. 2 Asynchronously load components, asynchronously load the required content, and present the page with 3 normal modal box components. When necessary, direct modal box + page components pop up, which can realize the page effect similar to APP instead of opening a new page. For example, in a music app, the song playing details page is the high-frequency page used.
Single access and multiple access at the same access address
The app can only access a specific page in one environment, and this page cannot be opened in the app at the same time.
In the browser, I may open the same H5 connection page in both TAB pages. In the case of different opening time or different business status, the correctness of its display needs to be verified. And through the refresh, the content displayed by the two tabs should be synchronized.
Aggregation of access points
App has TAB switching panel, with personal center, banner and other complex and changeable function entry.
H5 is usually a single process related page or just a single page, for an application type of H5 generally few people design access integration page, and this is actually just a need.
Therefore, we can see traces of h5 micro homepage in some recent super apps, where main function entry is configured, such as the service number of Alipay; Wechat public account can set the main menu of the application to support the main functions; The display form of wechat mini program opening interface is the embedded APP.
Therefore, it is an inevitable trend to think of H5 as app. When we design H5 with more than two independent access requirements, we should consider the home page address of h5 access entrance and launch APP or products similar to small programs as product matrix.
About me
- I am a front-end Coder and love to share my experience and experience in life and technology.
- I am a travel lover, like to take pictures of the scenery and people in the journey.
- I am a writing maniac, almost every day to produce new articles, writing non-stop.
Personal site
- GitHub：http://github.com/robinson90
- Codepen: https://codepen.io/robinson90
- personal blog: http://damobing.com
- yuque docs: https://www.yuque.com/robinson
- juejin blog: https://juejin.cn/user/377887729918589
Personal wechat account and public account
Wechat: CSnikey, or scan code plus me
Subscribe to damo_Kongjian or scan the QR code below
