Ten changes in iOS 8 that web developers and designers must know

[[120719]]

I was overjoyed and cried with joy. Happy to be a father With the launch of iPhone 6 and iPhone 6 plus, iOS 8 was finally updated last week. New devices, new resolutions. This article will introduce the changes in iOS 8.

Overview

• Introduction to Safari Updates on iOS 8
• iPhone 6 and iPhone 6 Plus
• New API support
• Safari New Features and Support
• iOS 8 native optimization
• Safari Plugin
• New design
• Video Enhancement
• JS on iOS 8
• Bugs and Issues

I'm used to Apple's official aloofness. This time, Apple still didn't update any documents related to Safari or iOS, so all the data and information below are based on my own tests and the information released at WWDC.

Safari on iOS 8

• Support new HTML5 APIs : WebGL (3D canvas), IndexedDB, Navigation Timing API, Crypto API
• Hybrid Apps: Faster, Optimized WebView
• Support scroll event : finally supported!
• Video playback : Fullscreen API, Metadata API
• HTML Template Elements
• Safari plugin: Native App can read web page DOM in the form of plugin
• Image : Support Image Source Sets and dynamic PNG APNG
• CSS : Support Shapes , support decimal units
• Automatically fill in forms in the browser (supports credit card camera scanning)
• Web and local application interaction : login data sharing
• EcmaScript 6: Partial support
• SPDY: Support for Google's new network protocol
• File upload failed (this is a bug)
• Removed minimal-ui attribute
• Support for remote debugging on Yosemite

Compared to other mobile browsers, iOS 8 does not support some features:

• Media queries in dp units
• getUserMedia: Access local hardware devices and capture audio and video APIs
• WebRTC: Web Real-time Communication
• @viewport Declaration
• Datalist
• WebP images

iPhone 6 and iPhone 6 Plus

iPhone 6 and iPhone 6 Plus are Apple's devices with different sizes and resolutions after iPhone 5. The parameters of iPhone 6 are 4.7寸in size and 750×1334 physical resolution screen (the dpi value is the same as iPhone 5s), while iPhone 6 Plus is 5.5寸and 1080×1920 resolution (401 dpi) screen. Apple, which is unconventional, named these two resolutions Retina HD屏, well, there is an extra HD in Retina .

For web developers, it’s not just the size on the ruler that’s different. It’s also the default viewport (related to width=device-width setting), pixel ratio (related to the use of high-definition images), icon size, and login page image size.

Regarding the screen size of the new iPhone, I recommend an article "iPhone 6 Screens Demystified".

VIEWPORT SIZE

You who are reading this article should already know

Until last week, all iPhones and iPods used a screen width of 320px . iPhone 6 and Plus are wider than their predecessors, giving us more space, and Apple finally decided to widen the browser width. But Apple is using a special set of screen pixel values. Most 4.7~5寸Android devices have viewport width of 360px , but the iPhone 6 has a viewport width of 375px . Most 5.5寸Android devices (such as Samsung Note) have viewport width of 400 , but the iPhone 6 plus has a very weird 414px (╮(╯_╰)╭ Apple, what are you doing with this?). This means that iPhone 6 users can see about 4% less content than Android devices of the same size. Maybe this is not a big problem, but you may still want to check whether your website is adapted.

To adapt to the new iPhone, you can use the following two <meta>

<meta name= "viewport" content= "width=375" > 
 
 <meta name= "viewport" content= "width=414" >

Device pixel ratio

iPhone 6 has 2 pixel ratio as iPhone 5, but on the other hand, the real pixel ratio of iPhone 6 401 dpi should be about 2.60 . To solve this problem, Apple has come up with a new concept rendered pixels 渲染像素. If the pixel ratio is 3x , then theoretically a screen with a CSS width of 414px should have 1242px of physical pixels (in reality it is 1080px, 13% smaller).

So if you use a 3x image for a high-resolution Android device, the same image will also fit on an iPhone 6 Plus but the iPhone's browser will resize the image first before rendering it on the screen.

Icon size

The iOS-specific icon size is 180×180 on iPhone 6 plus, but still the old 120×120 on iPhone 6.

To adapt to iPhone 6 plus, you need to add this paragraph

 <link rel= "apple-touch-icon-precomposed" sizes= "180x180" href= "retinahd_icon.png" >

Startup Image

If your webapp has a startup image, you have to add two more lines of code to adapt to the new iPhone.

The image size for iPhone 6 is 750×1294, and for iPhone 6 Plus it is 1242×2148.

 <link rel= "apple-touch-startup-image" href= "launch6.png" media= "(device-width: 375px)" > 
 
 <link rel= "apple-touch-startup-image" href= "launch6plus.png" media= "(device-width: 414px)" >

UA Detection

Currently, all iPhones upgraded to iOS 8 use the same UserAgent , so we have no way to determine what device it is on the server side. Of course, we can still use techniques such as JS and Media Queries to determine it.

New API

Two of the most important APIs have finally been added to iOS: WebGL and IndexedDB . At the same time, Safari has also started to support Web Cryptography and Navigation Timing.

WebGL supports 3D simulation and is enabled by default in browsers. This is good news for game developers, as richer interactions and forms will appear on web pages.

You can test the 3D rendering effect on iOS 8 Safari with this FishGl from Microsoft.

[[120720]]

IndexedDB is a new standard launched by W3C after the use of WebSQL . With iOS supporting IndexedDB , we can use the same database API on different mobile browsers.

The Navigation Timing API is good news for web performance optimization. Through this API, we can measure more accurate loading and rendering time and optimize the user experience of web pages.

New Safari Features

Zoom

When the iPhone is in landscape mode, or the iPad is in portrait or landscape mode, if you pinch the screen with your fingers (for example, if you want to zoom in on a webpage), you will enter a标签预览模式, which is quite convenient to use, but may conflict with the gesturechange event you are using on the webpage. If you want to use a custom zoom event, you must first use event.preventDefault() to prevent the browser's default event.

Cancel MINIMAL-UI

Six months ago, Apple launched the Minimal UI mode. "Safari in iOS 7.1 added the minimal-ui attribute to the meta tag to hide the address bar and navigation bar when the web page is loaded." After the iOS 8 update, this mode was cancelled, but it still has the cool goddess style, and no one said why.

Automatic form filling and credit card scanning

Safari now supports auto-complete forms, and when Safari detects that you are filling out a credit card form, it will allow you to open the camera and scan the physical credit card directly.

At the same time, Safari also supports the autocomplete attribute, refer to the latest spec. This means that if you are on a login page, Safari can use the data in the Keychain to automatically fill in the username, account, and password. Luis Abreu wrote an article about iOS 8 security and privacy, which is recommended for you to read

RSS!

If your website provides RSS subscription, iOS 8 users can open it directly in the bookmark bar when browsing your website. It is the @ icon with a订阅button inside. Although it is a little low-key, it is still thereﾉ( ´ ▽ ` )ﾉ.

Toolbar

Now the address bar and toolbar are semi-transparent. On iOS 7, only the address bar was semi-transparent. This means that the visible area of ​​the web page is larger when it is first loaded (including the toolbar at the bottom).

Updates on iPad

After iOS 7, when you use Safari on iPhone to browse the web, the toolbar will automatically hide when you scroll (iPad will not), and iOS 8 iPad also has this detail change (both horizontal and vertical). The difference is that in landscape mode, iPad still has a small bar on it, while iPhone is full screen.

In addition, Safari will keep the original viewport size when opening the sidebar in landscape mode, only changing aspect-ratio

Bookmark icons and frequently used websites

Safari finally supports website icons attached to web pages in favorites and bookmarks. When you enter a keyword search in the address bar, the website icon will also be displayed (I just tested it on iPad but it doesn't work).

Cross-platform switching

If you use a Mac and an iPhone at the same time, when you browse a web page on your iPhone, you can continue reading it on your Mac (requires Yosemite) (this feature was specifically demonstrated at WWDC this year, and you have to wait for the official update of Yosemite).

More like native webapp

If you want users to jump directly to the Apple Store to download your app on the web page without confirmation, that is impossible. iOS 8 brings more convenience to interact between web pages and local applications.

1. Safari Plugin
2. Shared authentication (security credentials can be shared between web and local applications, eliminating the need to log in again).

New webview

The most exciting news about the iOS 8 update is that hybrid apps share a common set of APIs with Mac, which means that iOS can also have more features, Mac and iOS communication and interaction, as well as:

1. Support interaction between JavaScript and local applications via postMessage
2. New classes configure the Web View similar to the power we have on Android's Web View.
3. More powerful Nitro engine, 4x faster js execution speed than the previous generation.

The new webview (WKWebkit) is part of the new framework (WebKit.framework) and is not fully compatible with the old UIWebView . However, the old webview is still retained, so the old webapp will still use the old webview.

The current GM version (the public version is the same) still has a bug that prevents local files from being uploaded. For some hybrid applications (such as Cordova PhoneGap), this is good news.

This means that iOS 8 currently has four web engines, which of course also means that compatibility and bugs are different. 1. Safari

2. Web.app (using full-screen desktop application)

3. UIWebView (old)

4. WKWebView (New)

You can test the performance of your webapp here at HTML5Test.com.

This change is very important for shell applications and webview applications, such as web applications in Chrome and Facebook native applications on iOS (Battery Doctor and Cheetah Mobile also use webview extensively). According to a report, 11.5% of iOS traffic comes from webview -based applications.

Safari Plugin

Safari on iOS 8 is the first system-installed browser that supports plug-ins and extensions (Firefox OS may also be one). Starting from iOS 8, local applications can be extended to interact with Safari, mainly through two ways: sharing (Share extension) and actions (Actions). Action can interact with DOM, which means that local applications can directly modify DOM elements.

All plug-ins require users to actively select to trigger (need to click different buttons in the share to trigger), and there is currently no plug-in that can run automatically.

The share menu of the old version of Safari has also been replaced by a JavaScript-based plug-in. For example,添加到桌面is now a js code in Safari.

In addition to the features Apple demonstrated at WWDC, this improvement to Safari means that the browsing experience will be greatly improved. For example, you can directly log in to the account password saved in 1Password or LastPassword in Safari. If your iPhone has Touch ID fingerprint recognition, you can even log in directly with fingerprint verification.

Pocket.com has announced that it will be releasing a widget for iOS 8 soon.

Benefits for front-end developers and designers

This time Safari has added a lot of support for HTML5 and CSS3

• CSS Shapes
• CSS object-fit
• CSS Background Blend modes
• word-spacing
• CSS Compositing and Blending
• Subpixel layout supports decimal points
• Animated PNG supported APNG format images
• Parallax effects and Pull-to-refresh supported (related to Scroll events)
• SVG Fragments Identifiers (for SVG Sprites)
• Image Source Set support
• HTML Template support

Animated PNG

The APNG format is an extension of the PNG bitmap animation, but it has not been officially recognized by the PNG organization. It is somewhat similar to GIF (except that GIF is based on JPG), which means we can create 32-bit full-color semi-transparent dynamic images.

Scrolling time difference and pull-down refresh

If you have worked on a mobile project, you must know that iOS7 and earlier did not support scrooll event. iOS 8 finally supports scroll events. Now you can finally use js and css related to visual scrolling on iOS, but it is not guaranteed to be fully compatible.

This support allows us to create pull-down refresh and infinite pull-down download effects.

Decimal point unit

Safari now converts CSS units from integers to floating point numbers. This means that CSS object models such as offsetTop and ClientWidth may get decimal values, while old iOS versions will return integer values.

At the same time, this also means that you can use half-pixel units.

div {
 border-width: 0.5px;
 }

SVG fragment identifier

I haven’t played with SVG much, and I don’t understand this attribute, so let’s look at the English version first.

Fragment identifiers from SVG is a method to link to one specific fragment or portion of an SVG instead of the root element. This feature allows us to sprite SVG images in one file taking advantage of one HTTP request and caching. Similar to CSS Sprites, but with SVG images instead and with ids instead of positions.

CSS Compositing and Transformations

The new attribute mix-blend-mode allows us to combine different elements of different shapes into one image. This is a new feature of Adobe in HTML5. You can see the demo and documentation on their website.

From the example demonstration on Adobe's official website, it seems that the deformation is effective, but the synthesis is not effective (it doesn't work on my Mac Chrome either).

CSS Shapes

CSS Shapes is also a new feature of Adobe. For this feature, I recommend "CSS Shapes 101" on W3Cplus. I am still very optimistic about the promotion and application of this feature, which can bring more possibilities to our web design.

Image Source Set

Developers who are familiar with responsive images should be familiar with this. With the popularity of high-definition screens, adapting to different resolutions is an issue that needs attention. Apple iOS 8 supports Image Source Set Spec , which means that new attributes can be used in the <img> tag.

<img src= "lores.png" srcset= "hires.png 2x, superhires.png 3x" >

In the above code example, the iPhone 6 Plus has a pixel ratio of 3x , so it will load the image superhires.png , while the iPhone 5s and iPhone 6 will load hires.png , and the rest will load lores.png . Unfortunately, iOS does not yet support the <picture> element.

HTML Templates

<template> is very useful for webapp. <template> can contain a piece of css or js (which will not be parsed by the browser). In actual applications, we can use the code in <template> to create a new node .

Video Enhancement

This update has many enhancements related to video playback. iOS8 starts to support全屏播放, Meta Data Api and CSS layering (by the way, everyone knows that the HTML5 Video element can be controlled by CSS, right?)

Full screen playback of video element

Safari does not support the full-screen playback API, even in iOS 8. However, this problem can be solved by adding a js to the <video> element.

 <input type="button" value="Go Full screen" onclick='document.querySelector("video").webkitEnterFullScreen()'>

Video Metadata API

Safari begins to support <video> 's preload="metadata" , which allows the browser to trigger loadedmetadata event for easier control by developers.

CSS Layering

I can control other elements to be placed before <video> through CSS.

iOS 8 JavaScript

• Partial support for ECMAScript 6 , including Promises , Iterators , Maps , For-of , Weak Maps , etc.
• Background running : JavaScript will continue to run in the background (even if the window is switched or Safari is switched to the background, but the timer times are reduced to 1s).
• Support scroll events: no need to say more, it has been introduced above.
• Unprefixed Page Visibility AP: I don’t understand what this is (can anyone help me?)
• Remove window.doNotTrack
• Support window.currentScript

Updated on September 18:

Some developers have found that the 300ms delay for click events on iPhone 5 has been removed (only Safari), but it still exists on Safari and WebViews on other devices, and the delay is still on iPod touch, iPads and iPhone 5s.

Bugs and Problems

After talking about iOS8 and iPhone updates, let’s talk about the bugs found so far.

• No file upload support !!! All file uploads are broken, you can select or take a photo, but js can't get any data. HTML or XMLHttpRequest POST requests also don't work. But this problem does not happen when the app is launched on the desktop.

• WKWebKit : It is a big problem that the new engine cannot read local files, so for hybrid apps, you still have to use the old UIWebView .

• window.prompt may cause Safari to crash
• Attachment : Voice does not work when input and labels are input. (When inputting, label is no longer pronounced)
• In iframes of desktop apps, touch events are not detected.
• After the phone goes into sleep mode, Timers and requestAnimationFrame callbacks in the desktop app are not executed.

Translator's Note

The changes that iOS 8 brings to the web front-end are still very gratifying. With more powerful performance, more powerful browser and kernel, and more open interface, it can be foreseen that web applications for iOS will have a greater place.

The article is very long and contains a lot of technical terms. It took me a long time to translate it. If there are any errors or inappropriateness in the translation, you are welcome to correct me and provide suggestions.

renew

September 26, 2014: After the iOS 8.02 update was pushed, the bug that Safari could not upload files was solved.

This article was originally published as "iOS 8 and iPhone 6 for web developers and designers: next evolution for Safari and native webapps"

Translated by @罗罗磊磊, please indicate the source when reprinting.