The current app solutions are roughly divided into the following types
1. Native ios and android app (requires programmers at both ends, high complexity, high learning cost, high scalability, no)
2. Various js hybrid apps generated through native series derivatives, such as react native, phone gap, cordova, etc. (programmers who need hybrid development experience have higher complexity, higher learning costs, higher scalability)
3. Through the principle of ios and android native webview to make an app that embeds ordinary h5 webpages in the shell (requires web front-end webpage developers to have low complexity and low learning cost, requires programmers at both ends to do shells or high scalability of third-party platforms)
4. Lightweight webapp (no need to write shell, front-end web development programmer compatibility is currently very low)
The fields and uses of these apps can already be selected and differentiated through today's project structure and direction
For example, according to the app execution efficiency 1-4 is from high to low
But today's hardware level has not seen too many differences in the use stage of these four apps. For example, an app with relatively light content and not very heavy front-end functions can be implemented in these four ways.
Therefore, for project companies, they often choose the most cost-effective way to develop,
Currently choose 2,3 companies mainly
Today we will focus on 4, because this is relatively a future trend,
Due to the increasing functions and flexibility of h5, the achievable functions are getting closer and closer to local apps
Then in the future development, if the step of webapp shell is omitted, it will be a leap for mobile development.
At present, there is such a function in the safari browser of the ios system to save the webpage to the desktop, which seems to be a favorite, but it is actually a function of generating a webapp micro-end
This is the effect after saving to the desktop,
But after this webapp is saved and opened after development, it looks like this
After a simple process, clicking on the icon will not open the safari browser and will not have its own address bar and toolbar.
It exists and runs as a single app
That is to say, his use is no different from an installed app
So let's briefly talk about how to develop ios desktop webapp
First, let's take a look at the commonly used tags
<!-- Hide the browser's toolbar and address bar-->
<metaname="apple-mobile-web-app-capable"content="yes">
<!-- Set the background color of the top mobile phone status bar -->
<metaname="apple-mobile-web-app-status-bar-style"content="black">
<!-- Set home screen app icon-->
<linkrel="apple-touch-icon-precomposed"href="img/icon.png"/>
<!-- set splash screen -->
<linkrel="apple-touch-startup-image"href="img/bg1.png"/>
<!-- Set vertical screen splash screen-->
<linkrel="apple-touch-startup-image"media="screen and (orientation: portrait)"href="img/bg1.png"/><!--竖-->
<!-- Set landscape splash screen -->
<linkrel="apple-touch-startup-image"media="screen and (orientation: landscape)"href="img/bg1.png"/><!--横-->
With these tags, the generated webapp can be opened to present the effect of an app with an opening screen.But using these elements alone is not enough
Because if we use hyperlinks in our web pages
Then the new page opened will automatically call the browser to open
In order to prevent the browser from popping up, we also need to use js to force the page to jump in the webapp
/ / Solve the problem that the ios webapp sub link jumps back to the browser
if(('standalone' in window.navigator)&&window.navigator.standalone){
var noddy,remotes=false;
document.addEventListener('click',function(event){
noddy=event.target;
while(noddy.nodeName!=='A'&&noddy.nodeName!=='HTML') noddy=noddy.parentNode;
if('href' in noddy&&noddy.href.indexOf('http')!==-1&&(noddy.href.indexOf(document.location.host)!==-1||remotes)){
event.preventDefault();
document.location.href=noddy.href;
}
},false);
}
After joining, we can test the effect
the effect is so
end:
That is to say, today's mobile terminal development is not realized by several technologies that we are familiar with in the past.
When you use an app, you can't feel what technology it uses to achieve it.
New technologies emerge in an endless stream, and old technologies are facing elimination or change
Although this kind of webapp is not used by many people, the compatibility is not good. This time he mentioned it just personally.
Desktop webapps may also become a trend in the future
Just like the evolution of PC-end games to page games and page games to generate micro-end
Just like WeChat Alipay has launched mini programs one after another
Mobile apps are also quietly producing a kind of excess, and the future should develop to the era of free-to-install apps
So let's introduce the concept of no-install app