New features developed by HTML5 on iPhone 5 and iOS 6

Are Native, Web, or hybrid applications used to develop mobile applications? The answer is that different mobile applications require different technologies. Just select the appropriate one. In fact, most mobile applications, whether enterprise or internet mobile applications, can use HTML5-based Web Technology in 90%. Browsers on Android 4.0 and iOS 6 and above are already the fastest applications, which are faster than any local Weibo websites. They do not need to be updated or upgraded, and do not need to upload split APP markets, you do not need to be suddenly dismounted from Apple. Let's take a look at the configuration of the recently released Firefox OS development mobile phone. Most applications do not require such high configuration.

Currently, iOS6 provides the best support for HTML5 in mainstream smart terminals, leading Android and Windows phone. As the performance of iPhone 5 doubles again, and the canvas rendering performance of iOS is constantly improved, coupled with Android webGL, the local api of Win8/wp8 is open to Javascript, performance is no longer the main barrier for developing excellent mobile applications. Now we need to consider how to make full use of the advantages of html5. Next, let's take a look at the new features developed by html5.

IPhone 5:

New screen size
New Simulator
What you need to do
Problem
New Features of iOS 6:

File Upload, access with a media capture camera, and file API
Network Audio API
Smart Application banners integrated with local applications
CSS 3 filter
Cross fade-in and fade-out CSS 3
CSS Partial image support
Full Screen support
Animation timing API
Supports multi-resolution images
Passbook coupon and monthly pass delivery
Changes in storage APIs and Web applications
Changes in the Web View of the Local Web Application
Remote Web Inspector debugging
Faster JavaScript Engine and other new features
IPhone 5

The new iPhone 5, as well as the iPod Touch 5th generation, has seen a big change in Web development: screen resolution. These devices have a 4-inch screen width, WDVGA (wide angle dual VGA) 640x1136 pixels, and 326 DPI Retina Display. These devices have the same width but 176 pixels in height as iPhone 4/4S.

New Simulator

Xcode4 iOS simulator with iPhone 5 Simulator

The new Xcode 4 (Mac AppStore) includes the updated iPhone simulator. The new version of the iPhone simulates three options:

IPhone: iPhone 3GS, the first and third generation of iPod Touch
IPhone Retina 3.5 ": iPhone 4, iPhone 4S, iPod Touch Fourth Generation
IPhone Retina 4 ": iPhone 5, iPod Touch's 5th Generation
New simulators also include new map applications and passbooks that replace Google Maps.

What you need to do for the new device

Generally, if your website/application is optimized, you can scroll vertically without any problems. In the same Viewport, the icon and iPhone 4/4S technology should work properly. However, when iOS is updated, the Web View is also updated: this means that all local Web applications, such as PhoneGap/Apache Cordov applications and pseudo browsers, google Chrome is also updated on iOS. However, if your solution is highly related, there may be a problem. Let's take a look at the following example: Google map website for iPhone 4 and iPhone 5. As this is said as a constant height, do not hide the status bar and there is a blank bar at the bottom.

If you have designed a Google Map with a specific height. As you can see (the picture on the right is from iPhone 5), there is a white Bottom Bar and the URL address bar that cannot be hidden because there is not enough content.

If you are using a responsive Web design, you should not have too much trouble. Generally, RWD technology uses width rather than height as a condition.

Device Detection

At the time of writing this article, no iPhone 5 was available on the market. There is no way to detect iPhone 5 on the server side. The user agent only has the iOS 6 system iPhone, and the iPhone 4S and iPhone 5 of the iOS6 system using the same user agent.

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

Therefore, the only way the client detects a 4-inch iPhone device is to use JavaScript or media queries. Keep in mind that these devices have a height of 1136 pixels, but the CSS pixel (Independent Resolution pixel) we are talking about is about 568 pixel height, half of the pixels of these devices.

IsPhone 4inches = (window. screen. height = 568 );

With CSS media query and responsive Web design technology, we can detect iPhone 5 usage:

@ Media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2 ){

/* IPhone 5 or iPod Touch 5th generation */

}

Webapps on the home screen

The webapps problem on the home screen seems to be very serious. I have already reported this question and there is no answer from Apple in NDA.

When you add a home page of a website to the screen, web applications that support the apple-mobile-web-app-capable meta tag only work in the iPhone 3.5 "simulation mode (it does not consider the entire height ).

The black bar is displayed in the image. This is the default full-screen webapp for iPhone 5 and new iPod Touch.

If the operating system is not sure whether a wider screen is supported, it is a good idea not to extend the height of web applications. If you provide an apple-touch-startup-image of 640x1096, iPhone 5 will resize it to 640x920 on the home screen.

The solution is to forget the width = device-width or width = 320 of viewport. If no viewport is provided, webapps will work normally. Similarly, if you use other attributes instead of the width, you can do the same if you do not want the default value of 980px for viewport:

<Meta name = "viewport" content = "initial-scale = 1.0">

Even if you specify a width different from 320, you can do this:

<Meta name = "viewport" content = "width = 320.1">

If you do not change the viewport, the following script can also be used:

If (window. screen. height = 568) {// iPhone 4"

Document. querySelector ("meta [name = viewport]"). content = "width = 320.1 ";

}

If the program starts an image of 640x1096 and uses different images on different devices, you can use media queries. In a few reports, You just named the startup Image Program default-568h@2x.png, but it is incorrect. But you can name it if you want. The size attribute is ignored.

You can use media queries to provide different startup images:

<Link href = "startup-568h.png" rel = "apple-touch-startup-image" media = "(device-height: 568px)">

<Link href = "startup.png" rel = "apple-touch-startup-image" sizes = "640x920" media = "(device-height: 480px)">

If you want to provide another version for low-resolution devices, you can use the pixel ratio condition of WebKit devices. If you want to know why it is 568px instead of 1136px, remember that the ratio of the CSS pixels we use to the pixels of these devices is 2.

Another problem is that after you purchase a new device, it is unclear whether iTunes will install the shortcut icon from the backup again.

IOS 6 and HTML5 Development

IOS 6 provides free updates for every iOS 5 device, except for the first generation of iPad, so we can see that this version browses the web page very quickly, and the iPad market is split for the first time. The following results show that all iOS devices can be upgraded.

File Management Problems

The Safari browser on iOS 6 supports file upload and HTML Media Capture. A simple File Upload requires you to input a file from the camera or album. You can see it in the figure. I really like Safari to preview images, rather than a temporary file name.

<Label> Single file </label>

<Input type = "file">

We can also use the new Boolean attribute of HTML5 to request a multiple file. In this case, you can choose not to use the camera as the source.

<Label> Multiple files </label>

<Input type = "file" multiple>

We can use File Upload to access the camera and album.

Although there is no way to force the camera, we can use the accept attribute to specify only the image or video to be captured.

<Input type = file accept = "video/*">

<Input type = file accept = "image/*">

Other types of files, such as audio, Pages, or PDF files, are not supported. There is no real-time streaming media support for the getUserMedia camera.

What can you do after selecting images and videos?

Use multipart POST form to submit an upload task
Use XMLHttpRequest 2 AJAX for upload (or even progress Support)
Using the file API, the number of bytes that can be directly read by JavaScript on iOS 6 and the number of file operations on the client. HTML5ROCKS has a good API example.
Network Audio API

HTML5 game developers should like it! Network Audio API first appeared in Mobile browsers. This JavaScript API allows us to process and synthesize audio. If you have never played some low-level audio, the API may look a little weird, but it will be hard to understand after a while. Similarly, HTML5ROCKS has a good article to get started with using the audio API.

API more information and messages in http://www.html5audio.org

Smart Application banners

Websites or local applications? If we have all, now we can connect our website to our local application. With Smart Application banners, Safari displays a banner when there is an associated local application on the website. If the application is not installed, the "Install" button or the "View" button is displayed. We can also send parameters from the network to the local application. For example, open a local application location that is the same as the content you see on the website.

To define a smart app banner, we need to create a meta tag named "apple-itunes-app ". First, we need to go to iTunes Link Maker to search for our application and Application ID.

<Meta name = "apple-itunes-app" content = "Application-id = 9999999">

We can use app-argument to provide string values. If we participate in the iTunes alliance program, we can also add the same meta-tag data of subsidiaries.

<Meta name = "apple-itunes-app" content = "app-id = 9999999, app-argument = xxxxxx">

<Meta name = "apple-itunes-app" content = "app-id = 9999999, app-argument = xxxxxx, affiliate-data = partnerId = 99 & siteID = XXXX">

The banner needs to be 156 pixels (the device is 312 hi-dpi) at the top, until the user clicks the content or close button below, your website will not display all the heights for your website. It is like an html dom object, but it is not a real DOM.

With Smart Application banners, the browser will automatically invite users to install or open local applications.

Within a few seconds, the system verifies that the application is valid for the device and App Store of the current user when the Banner displays a "loaded" animation. If it is invalid, the flag is automatically hidden. For example, it is the only App for an iPad and you are browsing the iPhone or App only for the German App Store, your account is in the United States.

CSS 3 filter

CSS 3 filters are a set of image operations. We can use CSS functions, such as grayscale, blur, drop-down shadow, and brightness. These functions will be applied before the content is displayed on the screen. We can use spaces to use multiple filters.

Here you can try a good demonstration. A simple example, for example:

-Webkit-filter: blur (5px) grayscale (. 5) opacity (0.66) hue-rotate (100deg );

CSS 3 fades

IOS 6 began to support some new CSS Image Values, including the cross fade-in and fade-out functions. With this feature, we can have different degrees of transparency between two images in the same place, and it can even be a transitional or animated part.

Simple Example:

Background-image:-webkit-cross-fade (url ("logo1.png"), url ("logo2.png"), 50% );

Full Screen in Safari

In addition to the chrome-less home screen meta tag, the current iPhone and iPod Touch (instead of the iPad) support full screen Windows. This is a perfect immersive experience, such as gaming or multimedia applications. There is no way to force full screen mode. It needs to be started by the user (the last icon on the toolbar ). However, we can invite users to move to the window and press the full screen icon on the screen to activate our application. If we mix some touch event processing, we can hide the URL address bar to provide a good interface until the user leaves the full screen.

Full-screen navigation on iPhone and iPod Touch

You can always find two or three buttons that overwrite the bottom. You should know which backend button, optional forward button, and cancel full screen.

You can use the onresize event to check whether the user switches to the full screen.

Animation timing API

Game developers are lucky. The animation timing API supported by iOS 6, also known as requestAnimationFrame, is a new method for managing JavaScript-based animations. Here is a good demonstration. For more details, refer to Paul's Irish blog.

CSS image Set, which is not part of any standard group. This is a new image function that receives a set of additional conditions or images. With this new feature, we do not need to use media queries to define different images for different resolutions. The job syntax is:

-Webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)

It works just like a CSS background image. With this new syntax, we can have clearer multi-resolution image definitions, so we do not need to use media queries and background-size values.

Passbook

Passbook is a new iOS app, a virtual container, such as pass, tickets, coupons, membership cards, gift cards. As a Web developer, you may want to provide coupons, tickets, e-tickets or loyalty cards for your next flight.

Apple allows websites to provide such passes without local programs.

To provide a pass on your website, you need to use the application/vnd. apple. pkpass MIME type or send it by email

Apple provides a tool that allows you to quickly install, package, and customize signature passes on your server, which may include information about the current user.

The file to be passed is only a JSON metadata file and a pair of images. We need to package the file and sign it. Unfortunately, to sign through, we need Apple's signature, which means Web developers need an iPhone developer program account ($99/year ). If you have signed the notification, you can upload it to your website.

One of the powerful features of Pass is that once the installation is complete and the push notification service is used, some network services can be provided to users and push message reminders. The operating system will call your Web service, update information transmission.

For more information about passbook, visit .apple.com

Store API and web application updates

There is no new storage API. No support for indexed databases. However, there are also some changes that you should consider:

The application cache limit is increased to 25 MB.
The Chromeless web application (using the apple-mobile-web-app-capable meta tag) now has its own storage sandbox. This means that even if they come from the same domain, web applications on their own screens will have their own persistent local storage and SQL storage. Even if you install icons multiple times, each icon has its own sandbox. Although this is good news, it may also be a problem if you pass information from the website to the home screen widget through storage. Read George Henner's article.
There is a new undisclosed meta tag that can be used on any website (apple-mobile-web-app-capable meta tag), allowing us to define different titles for the home screen icon. As you may know, by default, the title of a Safari document is limited to 13 characters. Now we can define the alternative title used by the home screen
<Meta name = "apple-mobile-web-app-title" content = "My App Name">

I also found that the possible values accepted by apple-mobile-web-app-orientations include portrait, portrait-upside-down, landscape-right, landscape-left, and portrait-any.

Web View update

Javascript running on Web View (pseudo browser, PhoneGap/Cordova application, embedded browser) is 3.3 times slower than that on Safari (or the speed of Nitro engine running on Safari is 3.3 times faster than that of Web applications ).

We can find some other good news:

Web application debugging Remote Web Inspector
A new supressesIncrementalRendering Boolean attribute improves the partial rendering mechanism. I believe this function is very useful to reduce the feeling of loading Web pages.
A new Boolean Function of WebKitStoreWebDataForBackup info. plist. Here we can define where we want to store locally and back up Web SQL database, such as in iCloud. This problem has already occurred in iOS 5.01. Now it solves
The change in the developer protocol seems to restrict the use of only the local WebView to parse HTML and JS. This is good. Someone can confirm this from Apple. The internal WebKit engine is the only engine that can download and execute new code to ensure that the same application behavior is expected. If you do not download code from the Internet, you can use your own engine. This may open a door... for example, providing our own engine, for example, WebGL support.
Remote debugging

This is a huge change for Web developers. For the first time on iOS Safari, including the official Remote Web Inspector. Therefore, the iWebInspector or Weinre tool will become obsolete. The remote debugger can work with a simulator or a device connected via USB.

To start a remote check session, you need to use the desktop Safari 6 browser. This is bad news: You can only debug your web applications on a Mac desktop. This is a silent change, but Safari for Windows does not exist, so it stays at 5. therefore, you can enable (at least now) network debugging sessions on your iOS device only on Mac OS computers.

For security considerations, you must first enable the Web checker "Settings"> "Safari"> "advanced ". The new check means that the old JavaScript console is unavailable.

You can start the debugging session:

In the Safari window of your iOS device or Simulator
Chrome-less webapp installed on your iOS device or Simulator
Use Web View local applications, such as Apache Cordova/PhoneGap applications.
When talking about local applications, you can only check the applications installed on the device by Xcode (your own application. Therefore, there is no way to check Google browsers on iOS on the website.

If you are using Webkit Inspector to connect to Safari 5 or Chrome, you will see a completely redesigned version of Inspector's Xcode-based Native Development UI in Safari 6. Use Inspector to enable a session. You can:

View Real-Time Changes in HTML and CSS
Access your storage: cookies, local storage, session storage and SQL database
Review Profile web applications, including network requests, layout and rendering and JavaScript and event performance reports. This is a major step towards performance tools.
Search your DOM
View All errors and warnings in one place
Manage your workers (threads)
Manage JavaScript breakpoints and determine uncaptured exception breakpoints.
Access the console and execute JavaScript
Debug JavaScript code
Touch check: There is a cell icon in inspector that allows you to touch and discover DOM elements on the device.
Apple has done a good job. We have waited for this for a long time on iOS. Apache Cordova users should also like this feature.

Other minor updates

Apple claims a faster JavaScript Engine. It seems real. In the SunSpider test, I improved JavaScript performance by 5.1 on iOS 20% and iOS 6 on the same device.
Google maps is no longer available on iOS 6, and now the http://maps.google.com redirects to Google Maps's site instead of a local app. Therefore, there is a new URL mode, maps, which will open a new map application on the local machine. The syntax is maps :? Q = <query>: query can be a search term or latitude and longitude (separated by commas ). To enable route navigation, the parameter is: maps :? Saddr = <source> & daddr = <destination>.
XHR2: Now XMLHttpRequestProgressEvent is supported
The input of the autocomplete attribute follows the DOM specification.
Mutation Observers from DOM4 has been implemented. You can use the WebKitMutationObserver constructor to capture DOM changes.
Safari no longer always creates a hardware acceleration layer for elements with-webkit-transform: preserve-3d, and we should stop using it.
Use the selection API of window. Selection
<Keygen> element
Canvas update: createImageData has a parameter. Now there are two new functions ready. Use webkitGetImageDataHD and webkitPutImageDataHD to provide high-resolution images.
Update SVG processor and event Constructor
Measurements related to the new CSS viewport are as follows: VL (viewport height), VW (viewport width), and VMIN (minimum value between VW and HH)
CSS3 Exclusions and CSS Regions provide Beta 1, but they are deleted in the final version. This is a shame, although they are too new and not mature enough.
The iCloud tag. You can synchronize your tags between all devices, including Mac, iPhone, and iPad. Therefore, the same URL will pass through all devices. Be careful when using the mobile network architecture!
We are still waiting

There are some things that we still need to wait for the next version, such:

IndexedDB
File System API
Performance Timing API
WebRTC and getUserMedia
WebGL is still disabled
Game/inmersive application direction lock API
Integrates native APIs for Facebook and Twitter accounts, so we can use the creden of users in the current operating system to automatically log on, instead of forcing users to log on again.
Last thought

Safari on iOS 6 is a huge step for HTML5 development and debugging tools. It provides new APIs and better JavaScript performance. However, I must say that Apple still forgets to update the documents and communicate with the Web developers properly.