Home思洋影视事业部网站建设知识库
0 Comments

超实用！WEB工程师和设计师必学的10个IOS 8新鲜改

发布于：2014-12-30  |   作者：广州网站建设  |   已聚集：人围观

工具栏

现在地址栏和工具栏就变成半透明了。在 iOS 7上只有地址栏是半透明的。这意味着初次加载的时候网页可视区域变得更大（包含了底部的工具栏）。

iPad上的更新

iOS 7以后，使用iPhone上的Safari浏览网页，滚动的时候会自动隐藏工具栏（ipad不会），iOS 8 ipad也有了这个细节上的变化（横竖都有）。不同的是，在横向模式的时候，iPad上面还有一小条，iPhone则是全屏。

除此之外，Safari在横屏模式开启侧边栏会保持原有的viewport大小，只会改变aspect-ratio

书签icon和常用网站

Safari终于支持收藏夹里和书签里的网页附带网站的icon图标。当你在地址栏输入关键字搜索的时候，同样会展示网站的icon（ipad刚刚我测试了下没有）。

跨平台切换

如果你同时使用Mac和iPhone，当你在iPhone上浏览一个网页，你可以在你的Mac上（需要Yosemite）继续阅读（今年WWDC上专门演示了这个功能，还得等到Yosemite的正式更新）。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

更像native的webapp

如果你想让用户在网页上，无经确定，就直接跳转到Apple Store下载你的应用，那是不可能的。想让网页与本地应有之间有交互，iOS 8带来更多的便捷性。

  1. Safari插件
  2. 共用认证（web和本地应用之间能共用安全凭证，无需再重新登录）。

新的webview

这次iOS 8更新，最令人激动的消息就是混合应用与 Mac 上共同了一套 API，意味着iOS 上也能有更多的功能，Mac 和 iOS的通信交互，还有：

  1. 支持JavaScript与本地应用之间通过postMessage的交互
  2. New classes configure the Web View similar to the power we have on Android’s Web View.（这段谁能翻译下）
  3. 更强大的 Nitro引擎，相比前代4x速度的js执行速度。

新的 webview(WKWebkit)是新框架(WebKit.framework)的一部分，与老的UIWebView并不是完全兼容。但是老的webviwe依旧保留，所以老的webapp还是会使用老的webview。

目前的GM版本（公开版也是一样的）依旧存在本地文件无法上传的bug，对于一些混合应用（例如Cordova PhoneGap）来说，这（多webviwe）算是个好消息。

这就意味着，目前 iOS 8，拥有4个web引擎，当然，也意味着兼容性和bug都是有差异的。

  1. Safari
  2. Web.app (使用full-screen 桌面应用)
  3. UIWebView (老)
  4. WKWebView（新）

你可以在  HTML5Test.com 这里测试下你webapp的性能。

对于那种包壳应用和webviewe应用来说，这个变化是十分重要的。比如说iOS上的Chrome和Facebook本地应用中的网页应用（我们猎豹的电池医生、手机猎豹也大量应用webview）。根据一份报告，11.5%的iOS流量是来自基于webview的应用。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

Safari 插件

iOS 8上的Safar 是第一个支持插件和拓展的系统预装浏览器（Firefox OS也许也算是一个）。从iOS 8开始，本地应用可以拓展到与 Safari 交互，主要通过两种方式：分享(Share extension)和动作(Actions)。Action 可以与DOM交互，意味着可以本地应用可以直接修改DOM元素。

所有的插件都需要用户主动选择来触发（需要点击分享中不同的按钮来触发），暂时还没有可以自动运行的插件。

旧版 Safari 的分享 菜单同样被基于 JavaScript 的插件所替代。比如说添加到桌面如今就是一段 Safari 中的 js 代码。

除了苹果在WWDC上演示的功能，Safari的这个改进意味着浏览网页会有极大的体验改善。比如说你可以在Safari直接调用1Password或者LastPassword 保存的帐号密码登录，如果你的iPhone 有 Touch ID指纹识别，你甚至可以直接指纹验证登录。

Pocket.com 已经声明即将推出针对 iOS 8的插件。

前端和设计师的福利

这次safari新增了很多html5，css3的支持

  • CSS Shapes
  • CSS object-fit
  • CSS Background Blend modes
  • word-spacing
  • CSS Compositing and Blending
  • Subpixel layout 支持小数点
  • Animated PNG supported APNG格式图片
  • Parallax effects and Pull-to-refresh supported （与Scroll事件相关）
  • SVG Fragments Identifiers (for SVG Sprites)
  • Image Source Set support
  • HTML Template support

Animated PNG

APNG格式是PNG位图动画的拓展，但未获得PNG组织官方的认可，与GIF有点类似（只不过GIF是基于JPG的），这意味着我们可以制作32位全彩半透明的动态图。

滚动时差与下拉刷新

如果你做过移动端的项目，你一定知道iOS7以及以前都不支持scrooll事件，iOS 8 终于支持滚动事件，这下大家终于可以在iOS上用到视觉滚差相关的js和css了，但是不保证完全适配。

这个支持让我们可以做出下拉刷新和无限下拉下载的效果。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

小数点单位

Safari现在CSS单位从整数转成了浮点数。这意味着CSS对象模型中诸如offsetTop和ClientWidth可能会取得小数值，之前老的iOS都会返回整数值。

与此同时，这也意味着你可以用半个像素单位了。

div {
   border-width: 0.5px;
}

CSS 合成和变形

利用mix-blend-mode这个新属性支持我们把不同形状的不同元素合成到一张图片，这是Adobe在HTML5方面新出的一个功能。在他们的网站（http://adobe.github.io）上你能看到演示的DEMO和文档。

从Adobe官网的例子演示来看，似乎变形是生效了，合成并没有生效（我Mac Chrome也没生效）。

CSS 形状

CSS 形状也是Adobe新出的一个特性。对于这个特性，推荐下W3Cplus上的《CSS Shapes 101》。个人还是很看好这个特性的推广和应用的，能给我们的网页设计带来更多的可能性。

Image Source Set

有了解响应式图片的开发者对这个应该不陌生，随着高清屏的普及，针对不同的分辨率做适配是一个需要注意的问题，苹果iOS 8 支持Image Source Set Spec，意味着可以在<img>标签中使用新的属性。

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

在上面这段代码的例子中，iPhone 6 Plus 的像素比是3x，它会加载superhires.png这张图片，而iPhone 5s,iPhone 6 则会加载hires.png这种图，其余的则加载lores.png。但是遗憾的是，iOS 暂时还不支持<picture>元素。

HTML模板

<template>对于webapp来说十分有用，<template>中可以包含一段css或者js（不会被浏览器解析），实际应用中，我们可以利用<template>中的代码创建一个新的node。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

视频增强

这次更新对视频播放相关的增强了许多，iOS8开始支持全屏播放,Meta Data Api和CSS layering(话说大家知道HTML5 Video元素是可以通过CSS来控制吧？)

<video>元素的全屏播放

Safari不支持全屏播放API，即使是iOS8也不例外。但是能通过一个特殊的方法解决这个问题，在<video>元素中增加一段js。

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

视频 Metadata API

Safari开始支持<video>的preload=”metadata”，可以让浏览器触发loadedmetadata事件方便开发者控制。

CSS 分层

我可以通过css控制其他元素放在<video>之前。

iOS 8 JavaScript相关

  • 部分支持ECMAScript 6,包括Promises, Iterators, Maps, For-of, Weak Maps等等。
  • 后台运行：JavaScript会在后台继续运行（哪怕已经切换了窗口甚至Safari切换到后台，但是计时器 times 下降到1s的频率）。
  • 支持scroll事件：不多说了，上面介绍过。
  • Unprefixed Page Visibility AP ： 我没搞懂这个是什么（哪位知道求指导）
  • 移除window.doNotTrack
  • 支持window.currentScript

9月18更新:

有开发者发现：iPhone 5上的click事件300ms延迟已经取消了（只是Safari），但是其他设备上的Safari和 WebViews 上还有，延迟依旧在 iPod touch, iPads 和iPhone 5s上。

Bug和存在的问题

说了iOS8和iPhone 的更新，再来说说目前发现的 Bug。

  • 不支持文件上传！！！所有的文件上传都失效了，你能选择或者拍张照片，但是js不能获得任何数据。HTML或者XMLHttpRequest的POST请求也不行。但是这个问题但是在桌面启动的app没发生。
  • WKWebKit：在新的引擎不能读取本地文件是个大问题，所以对于混合app来说，还得使用老的UIWebView。
  • window.prompt可能会导致Safari崩溃
  • 附件:语音在input和labels输入时，不管用。(当输入的时候，label不再发音)
  • 桌面app的iframes中,touch事件没有被监测到。
  • 手机休眠后，桌面app中的Timers和requestAnimationFrame回调没有执行。

译者言

iOS 8给web前端带来的变化还是很令人欣喜的，更强大的性能，更强大的浏览器和内核，更开放的接口，可以预见在针对iOS的web应用会有一个更大的用武之地。

文章很长，大量技术词汇，翻译了半天，若译文有错误或者不妥之处，欢迎指正和提供建议。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

标签：
飞机