PastryKit

这里最近的一个主题是主题iPhone OS网络应用程序- 用于iPhone和iPod Touch的应用程序,仅使用HTML,CSS和JavaScript构建具体而言,与原生Cocoa Touch应用相比,iPhone网络应用程序可以提供的体验有多好,以及它们开发的容易程度。

iPhone网络应用程序缺少原生iPhone应用程序的一个领域是滚动例如,一个长列表,例如联系人中的完整地址簿,或iPod应用程序中的所有歌曲滚动这些列表时,您可以一扔列表,放开后列表将高速滚动这种效果有点像用非常小的摩擦来旋转车轮使用iPhone网络应用程序,您可以创建一个看起来几乎,甚至可能完全像本机iPhone列表视图的列表但iPhone上的所有网页浏览几乎没有动力你不能扔他们iPhone网页浏览感觉他们有很多滚动摩擦。

这种摩擦可能对iPhone小屏幕上呈现的常规网页有意义,其中“常规”我的意思是“没有专门针对iPhone上的显示进行优化”但它只是感觉很慢 - 卡在iPhone优化的应用程序上。

如果您从未注意到它,请立即尝试,将您的通讯录应用列表与iPhone网络应用程序之类的内容进行比较开演时间(在Showtime中,点击“监视列表”,然后点击“+”按钮以获得一个很好的长列表来滚动。)另一个很好的滚动比较:本机iPhone Twitter客户端喜欢特威特Birdfeed与iPhone网络应用程序Twitter客户喜欢Hahlo和新的移动Twitter差异很大,远远超过化妆品如贾斯汀威廉姆斯最近写道

I believe that with the current crop of Web technologies available in MobileSafari, apps like Hahlo, PocketTweets and Showtime could thrive as an alternative to their native counterparts if Apple allowed developers toadjust the scrolling/drag coefficient of Mobile WebKitIf you compare the scrolling speed of your Twitter timeline in Hahlo and Tweetie, the results are drastically differentTweetie feels like it effortlessly scrolls based on how much momentum you exert in the scroll action, while Hahlo is being constrained by a fifty pound weight on its back.

滚动并不是唯一的UI /体验问题,其中Web应用程序似乎无法与本机iPhone应用程序提供的功能相匹配另一个是MobileSafari不允许CSS固定位置元素,这意味着你不能使工具栏保持在屏幕的最顶部或底部,而不是在滚动内容时滚动它。

而这只是谈论用户体验方面的事情另一方面是发展方面上个月我写

When you write a Cocoa Touch app for the iPhone, you’re not starting from scratchYou’re starting with the Cocoa Touch framework正如FarukAteş精明地指出的那样his response to Koch, to discount the framework is to discount everything that sets the iPhone apart as a development platformNot only are native iPhone apps faster and more capable than their web-app equivalents, but they’re easier to write.

一些读者反对这一观点,或多或少地争论说,无论Cocoa Touch框架有多好,本机iPhone应用程序比Web应用程序更难开发,因为必须学习应用程序框架(Cocoa)一种新的编程语言,Objective-C但这并不是一个公平的比较这就像说如果你不知道如何骑自行车那么跑步比骑自行车更容易。

让我们澄清一下让我们指出我们正在谈论创建具有出色设计和用户体验的iPhone应用程序让我们承认,要做出任何伟大的事情 - 任何事物,软件或其他方面 - 需要人才,经验,熟悉和专业知识以及必要的工具如果您已经是专家级Web开发人员,但从未编写过Cocoa软件,那么是的,在您尝试开发本机iPhone Cocoa Touch应用程序之前,您面前有大量耗时的Step Zero但是,同样地,有很长一段时间的Cocoa Mac(以及少数甚至更长时间的NeXT)开发人员不知道如何从HTML,CSS和JavaScript创建现代AJAX-y Web应用程序 - 并且他们认为JavaScript的是一种奇怪的编程语言。

我所说的是,才华横溢的Cocoa Touch开发人员在实施相同的iPhone应用程序方面比有才华的Web应用程序开发人员更容易Cocoa Touch框架使所有类型的东西都自由或简单像视图之间平滑快速动画的东西按钮,列表和工具栏等内容与其他标准iPhone按钮,列表和工具栏一样。

确实存在一些针对iPhone Web应用程序开发人员的开源框架,因此无需从头开始实现模仿Cocoa Touch UI元素的东西。的iUI在2007年7月原版iPhone首次推出几周后由Joe Hewitt创办,就是其中之一。jQTouch由David Kaneda和基于jQuery的,是另一个(Showtime是使用jQTouch构建的。)

但是这些框架并没有解决滚动速度/摩擦或固定位置元素的问题。

最终有一家公司开发了一个令人惊叹的iPhone网络应用框架:

  • 完全隐藏地址栏,即使不是从保存到家的应用程序图标运行,而是在MobileSafari本身的页面内运行。

  • 允许固定位置工具栏在滚动时从不从顶部移动。

  • :设置自己的滚动摩擦系数,允许你扔掉长列表。

这个网络框架背后的公司是Apple该框架显然名为PastryKit。

世界上最好的iPhone Web应用程序

If you have an iPhone or iPod Touch handy, stop reading this and go here:

http://help.apple.com/iphone/3/mobile/

这不是一个秘密网站事实上,它可能已经存在于您的iPhone书签中 - 当您选择“iPhone用户指南”书签时,您可以将其重定向到其中,该书签被包含为MobileSafari的默认书签之一我不知道Apple什么时候推出了这个PastryKit驱动版本的网站,但它已经在我们的鼻子下呆了一段时间,很少有人注意到。1

If you don’t have an iPhone or iPod Touch handy, or if you do and you’re back after trying it out and want to poke at it with Safari’s Web Inspector, you can also load it in Mac or Windows Safari by setting the user agent string to MobileSafari 3.x in Safari’s开发菜单(Without the MobileSafari user agent string, you’ll get redirected to a different iPhone help page; using a MobileSafari 2.x user agent string, you’ll see last year’s version of the User Guide, which is far less impressive technically.) Shrink your Safari window down to roughly iPhone dimensions before loading the site, because the UI will be laid out to fill the dimensions of the viewport when it loads.

JavaScript源代码已经被最小化/优化,但它本身并没有被混淆,因此很容易看到该框架被称为PastryKit,即使是像我这样的dilettante JavaScript黑客也可以跟随并看到一些正在发生的事情PastryKit完成上述所有三项工作 - 隐藏MobileSafari地址栏,提供固定位置工具栏,并提供滚动动力 - 禁用常规滚动并设置自己的视图层次结构并实现自己的滚动。

从WebKit的角度来看,这个iPhone用户指南中的所有内容都在视图中,与视口的大小完全相同,因此无需滚动PastryKit处理用户视为可滚动内容的所有内容这就是iPhone提供的低摩擦滚动比MobileWebKit本身提供的方式 - PastryKit自己滚动数学在运行应用程序时,它更加引人注目桌面Safari具有用户代理技巧,因为您永远不会看到Mac滚动条,并且无法使用鼠标滚轮滚动内容与滚动相关的所有内容都在应用程序本身中以JavaScript实现。

将用户指南应用程序安装到主屏幕并从那里启动后,很少有人建议它不是本机iPhone应用程序顶部没有MobileSafari地址栏,底部没有MobileSafari工具栏滚动很快并且有动力它甚至完全脱机工作,因为用户指南的内容使用HTML5本地存储在数据库中。

这不完美在我的iPhone 3GS上滚动很顺畅,但在我的旧款iPhone 3G和原装iPhone上有点笨拙(Still better than the scrolling in any other web app I’ve ever seen, though — just not native-app-smooth.) Taps and gestures sometimes don’t register — this is most noticeable for me when I try to scroll as fast as I can with a quick finger swipe我怀疑,超快手势有时会滑过JavaScript事件过滤器。

The rubber-band “bounce” scrolling — where if the view is already at the top but you pull down in an attempt to scroll up and you see whitespace and it all just bounces back into place when you let go — breaks if you pull down all the way off the bottom of the displayWhat happens there is the view gets “stuck” in the position where it’s displaying the stretched-out whitespace at the top of the view; you can unstick it by just tapping somewhere in the content area.

And, lastly, it doesn’t work at all with the iPhone’s system-standard gesture where you can tap the status bar at the top of the screen (the bar that displays the carrier name, signal strength, time, and battery life) to scroll to the top在MobileSafari中,如果您在运行此应用程序时点击状态栏,整个MobileSafari视图会滚动到顶部,这会显示浏览器地址栏从主屏幕运行用户指南应用程序时,点击状态栏根本无效I presume the problem here is that there is no JavaScript event in mobile WebKit for status bar taps — the event goes to the iPhone app, and the web app running in WebKit inside the iPhone app can’t see it or register a handler to act upon it从用户的角度来看,从主屏幕启动的iPhone网络应用程序只是另一个应用程序但从技术上讲,它就像一个元应用程序 - 它是一个在本机iPhone应用程序中运行的JavaScript应用程序,它只提供一个全屏WebKit视图并加载Web应用程序。

但总的来说,这个用户指南应用程序和PastryKit框架相当惊人然而,64,000美元的问题是,PastryKit是否是苹果打算(或Apple希望的团队希望)公开发售的东西为这个iPhone用户指南构建一个丰富的框架似乎需要付出很多努力,所以我希望答案是肯定的。Perhaps something integrated with the next major release of Dashcode? And, perhaps with integrated UI layout tools, along the lines of Interface Builder?

这是希望我们没有听过最后一个PastryKit,并且Apple继续致力于使移动WebKit成为App Store的开放替代品。

PastryKit / iPhone用户指南演示

为了后人和那些无法访问iPhone或Safari的人,我已经做了两个截屏显示了iPhone用户指南Web应用程序的运行情况


  1. 10月22日有一个关于Stack Overflow的问题询问PastryKit和jQTouch开发人员David Kaneda提到了它少数 on Twitter, but those are the only references to it I’ve been able to find. ↩︎