在脱机应用程序中使用YUI的3介绍»雅虎的用户界面博客（YUIBlog）

在脱机应用程序使用YUI 3

2010年5月27日，1:53 PM由亚历山大Kessinger | 开发| 9评论

作者简介：亚历克斯Kessinger前端过去工作作为前端工程师在雅虎，他喜欢整个堆栈上工作。 他还花了很多时间阅读，策展，和对互联网的书面，社交媒体，网站建设 。 在他的网站你可以找到它的所有 alexkessinger.net 。 您还可以找到他在twitter上@ voidfiles 。

我可以说，HTML5是建设蒸汽，但当时是通过：HTML5是在这里。移动已经是巨大的，WebKit是迅速增长，而且人数将有他们的电话和/或笔记本电脑上的HTML5功能的浏览器在未来几年将创建一个“新常态”在HTML5的能力标准。

在HTML5真棒特点之一是应用程序缓存，使网站告诉浏览器文件缓存，并使用高速缓存的文件时，浏览器没有网络连接的能力。您可以使用应用程序缓存，以确保用户将能够访问至少你的应用程序的一部分，而他是的。如电话或片（甚至老式的设备，如笔记本电脑）设备的情况下，这可能意味着您的用户能够使用你的应用程序，而在飞机上。同时，你要继续构建您的应用程序与Web技术，而不是学习Objective - C的。

除了应用程序缓存，也有其他API在HTML5，让Web开发人员的工具来创建有用的离线经验。有两个持久化存储API在大多数新的浏览器。其中之一是一个简单的键/值数据存储，称为 localStorage 。第二个是一个SQL数据库。当用户离线，都可以利用。

有了这些概念，我要去探索常青树“To Do列表”应用程序，使用它作为跳板，看看我们如何能够充分利用后，一切都建立一个应用程序，应用程序缓存和持久存储我们YUI的爱3，包括了YUI 3画廊。

标记

标记始终是一个伟大的地方开始建设的任何相关网页时。我们的HTML5页面的基本外壳：

  <！DOCTYPE HTML>
 <HTML
 <HEAD>
     <TITLE> YUI的待办事项</ TITLE>
     <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no title" charset="utf-8">
 </ HEAD>
 <body class="yui-skin-sam">
     <script src="yui-min.js"> </ SCRIPT>
     <script src="base.js"> </ SCRIPT>
 </ BODY>
 </ HTML>

虽然我们正在构建脱机准备的应用程序，遵循最佳实践，但将在头的CSS，以及刚刚闭幕前body标签的JavaScript。即使您的网页可脱机使用，初始页面加载应响应。（请注意，我们使用赫然简单的HTML5的DOCTYPE）。

该应用程序需要一定的占位符标记：

 <！DOCTYPE HTML> <HTML> <HEAD> <TITLE> YUI的待办事项</ TITLE> <链接了rel =“样式表”HREF =“base.css”类型=“文/ CSS”媒体=“屏”标题=“没有标题的“charset =”UTF - 8“> </ HEAD> <BODY class="yui-skin-sam"> <div id="doc3"> <div class="hd"> <H1>待办事项应用程序</ H1 > <a class="callout" href="http://alexkessinger.net"的亚历克斯Kessinger </ A> <div class="item_entry"> <form class="entry_form"> <输入类型=“文本”名称=“todo_item_input”类=“todo_item_input”> <p class="toRight"> <a class="addItem" href="#add">添加</ A> </ P> </ FORM > </ DIV> </ DIV> <div class="bd"> <div class="yui-main"> <div class="yui-b"> <div class="todo_items"> <H2>待办事项</ H2> <UL> <li class="no_items">获取待办事项...</ LI> </ UL> </ DIV> </ DIV> </ DIV> </ DIV> <DIV ID =“调试“> </ DIV> <！ - 初始化过程//--> <script src="yui-min.js"> </ SCRIPT> <script src="base.js"> </ SCRIPT> </ DIV> </ BODY> </ HTML>

这将让用户知道，我们对他们的一些数据规划时，他们首先加载的应用程序。它还设置了我们的舞台，开始与我们的JavaScript DOM结构。

关于逐步增强的注意事项

有没有理由，应用程序可以不建立与逐步提高的原则，仍然为脱机使用。在这种探索中，我省略了额外的复杂性，为了尽可能把重点放在支持脱机所需的技术，将在PE参与。有些人可能会批评这种做法，我很赞同这样的说法。

处理移动设备的附加属性

的iPhoneOS和Android的浏览器可以处理大多数网页没有任何特殊的关注，但与移动设备的处理时，它的价值调查的内容是如何得到挤压，以适应较小的屏幕上。 Quirksmode已不是一个，而是两个视口有深度的文章，是值得你花时间。

简单地说，有一种元标记，称为视口。它看起来像这样：

  <meta name="viewport" value="">

视口标签的目的是帮助移动浏览器找出如何在小屏幕上显示一个真正的大网页。移动设备需要帮助，因为大多数的装置尝试挤上300 - 500px屏幕内容700 - 1100px。此外，当我们设定在100％的宽度，浏览器需要在网页应该有多大的最好的猜测，然后从大的尺度内设备的大小以适应它。

为了帮助我们可以设置视这个。

  <meta name="viewport" value="width=device-width">

这将告诉我们的页面的宽度设置设备的屏幕宽度的设备。如果我们要确保我们的页面是流动的，那么我们的网页，将填补上大多数移动设备的屏幕。这也意味着，如果手机有一个横向模式页面将扩大，以填补额外的空间。

有其他的事情我们可以做的视口以及。如果您在使用移动浏览器的工作，你知道他们让您放大。如果你正在服用的时间建立一个网站，以填满整个屏幕，你可能不希望用户能够放大。如果我们把我们的视口像下面这样，用户将无法进行放大，或缩小。在一个像iPhone这样的的设备，这可能会使感觉更自然。但如果你这样做，确保您的应用程序的内容，使用户没有理由要放大（例如，小文本），否则，这将是一个令人沮丧的可用性约束。

  <meta name="viewport" value="width=device-width,user-scalable=no">

视口不是一个W3C标准，而且是一种常见的公约。这是目前支持iPhone和Android操作系统的WebKit浏览器。Any扩展，Mozilla的移动浏览器，也可能会支持本公约。

的CSS

超过以往任何时候都使用的CSS液和动态的能力是很重要的。当寻找在手机，平板电脑和其他小屏幕的范围广泛，应用开发商需要意识到，我们的应用程序将要使用过多的设备上。即使有没有魔术棒，我们可以波使一切都只是工作，对于大多数应用，我们可能并不需要对每一个设备完善的像素。只需以下最佳做法可以采取我们的方式来支持大多数设备。

开始我们的应用程序的宽度设置在其基地％，是一个很好的开始。使用EM的设置字体大小，也是有益的，因为EMS计算的基础上呈现的网页。另一件事，有助于确保您基于百分比列的宽度以及。即使列水槽可以设置在EM的。

一个伟大的地方开始，而不必做了很多工作，是一个CSS框架。 YUI的2网格CSS的自然是我们的最爱之一，它有助于我们认为在我们的页面的比率，而不是静态宽的块。

因此，建设小康锐2 CSS网格这里是我的应用程序开始的CSS。

  。todo_items {
    顶：1EM;
 }

 。todo_items UL {
    填充：0;
    保证金：0;
 }
 UL李todo_items {
    保证金：0.125 EM EM 0 0 .5;
    填充：0.125 EM 0 0 0;
    边界的顶部：1px的固体＃CCC;
    列表样式：无;
    显示：块;
    自动换行：打破字;
    文本换行：抑制;
 }

 。toRight {
     文本对齐：权利;
 }

 。yui3控制台{
     文本对齐：左;
     保证金左：10px;
 }

身体H1 {FONT - SIZE：200％;}
身体H2 {FONT - SIZE：150％;}

浏览器

接下来是我们的离线做应用的JavaScript。首先yui_min.js下载到您的文档根，并把它添加标记，就像我们上面。然后把你的这个base.js文件：

  YUI（）。使用（“节点”，函数（y）{
     Y.one（“todo_items H2。”）使用setContent（“我飞”）;
 }）;

除了节点，我也将包括YUI 3的CSS复位和YUI的CSS网格。我要包括从模块YUI 3画廊，瑞安Grove的优秀存储精简版，将包装所有可能的本地数据存储方法，在一个易于使用的API 。

  YUI（）。使用（“cssreset”，“yui2电网”，“画廊存储LITE”，“节点”，函数（Y）{

   / /任务列表应用程序代码

 }）;

注：我不打算深入的to - do列表的代码，也没有到我使用的技术，使其更容易调试这种移动设备上的项目一些。您可以在GitHub上找到了这一切： yui3 TODO 。内base.js ，你会发现应用程序的整体。您还可以看到应用程序和运行http://html5.alexkessinger.net/yui/ytodo/ 。在这里，我要集中必要的步骤，以增强此简单的应用程序脱机功能。

缓存清单

第一步到一个Web应用程序脱机应用程序缓存。应用程序缓存可以告诉你的浏览器，你想离线下载，并保持了哪些文件。在这个例子中，我知道我想保持我的JavaScript和我的CSS离线，以及主要的HTML页面的应用程序。考虑到这一点，我的缓存清单将看起来像这样：

 缓存清单

的index.html
 base.css
 yui_min.js
 base.js

有些事情需要注意的缓存清单。

它必须开始与行CACHE MANIFEST 。
你必须为它的Content - Type头文字/缓存清单

如果你在Apache，你可以添加下面的代码片段.htaccess ，以获得正确的的内容类型。

  AddType文本/高速缓存清单，清单

到位，任何一个文件.manifest后缀将送达与text/cache-manifest清单Content - Type头。

下一步，我们需要告知浏览器的缓存清单，为此，我们添加一个属性，我们的HTML标记：

  <html manifest="todo.manifest">

现在，如果你走在您的网页浏览器，支持离线应用程序，你可能会看到一个通知，说明，本网页请求脱机访问。

离线/在线

随着到位告诉我们的浏览器有什么资源来缓存的清单，我们已经准备好去思考在联机模式与脱机模式下发生的事情。现在有两个“引导顺序，”第一个完整的在线序列的，我们已经（在资源脱机使用的缓存）。这网上的序列使用雅虎的CDN负载文件，这些文件组合处理，所以我们只有几个HTTP请求。

但是，我们也建设一个脱机的启动过程。我们需要能够探测到的事实，在浏览器脱机，然后初始化锐适当借鉴缓存资源。

  VAR在线=（navigator.onLine）？ 真：假;

现在，我们只需要选择配置对象的基础上，离线或在线。

  YUI_ONLINE_CONF = {}，
     YUI_OFFLINE_CONF = {
        基地：“yui3/build /”，
        组合：0
        组：{
            画廊：{
                基地：“yui3-gallery/build /'，
                模式：{“画廊”：{}}
             }，
             yui2：{
                基地：/ in3/dist/2.8.0/build '2'，
                模式：{
                     “yui2”：{
                         configFn：功能（我）{
                             （/皮肤|重置|字体|电网|基地/ .test（me.name））{
                                 me.type ='CSS';
                                 me.path = me.path.replace（/ \ / JS，“CSS”）;
                                 me.path = me.path.replace（/ \ / yui2皮肤/'/ assets/skins/sam/yui2-skin'）;
                             }
                         }
                     }
                 }
             }
         }
      }，
     在线=（navigator.online）？ 真：假;
      CURRENT_CONF =（网上）？  YUI_ONLINE_CONF：YUI_OFFLINE_CONF;

 YUI（CURRENT_CONF）。使用（“cssreset”，“yui2电网”，“画廊存储LITE”，“节点”，函数（Y）{
     ... ...
 }）;

YUI_OFFLINE_CONF配置可能需要一些解释。首先，我改变我的文档根+基地yui3/build/ 。我已经发布锐3分配给我的服务器，因为W3C规范指出，脱机缓存有一个严格的单一起源政策。所有缓存的资源必须来自同一个域作为舱单。因此，我不能依靠雅虎或谷歌或任何其他的CDN服务我的文件 - 所有这些，必须从我的服务器缓存。

接下来的部分， combine:0 ，告诉YUI装载机不会自动组合文件，因为我没有自己的服务器上安装一个组合处理。

最后，我想提的groups配置。组是在YUI 3.1.1的新功能，允许你定义整个群体的文件，从同一个地方。您还可以将它们配置为从源头combo'd。我成立了YUI 3画廊负载从我GitHub上yui3画廊仓库的一个本地副本。

当我们在网上，我们可以从雅虎的CDN的引导，但离线，我们需要的文件的本地副本。这是很容易做到的。你可以下载文件，需要在一个较大的zip文件到您的目录：

  CD的docroot;
 wget的http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip;
解压yui_3.1.0.zip;
 MV YUI yui3;
 wget的http://download.github.com/yui-yui3-gallery-gallery-2010.05.19-19-08-0-g2a49f06.zip;
解压缩YUI - yui3画廊画廊2010.05.19 - 19 - 08 - 0 - g2a49f06.zip;
 YUI MV - yui3画廊2a49f06 yui3画廊;
 wget的http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip;
 MV YUI2立方英寸- YUI - 2in3.3 - 0 - gdf090252立方英寸;

或者你可以从GitHub克隆Git仓库直接如果计算机上安装Git是：

  CD的docroot;
 GIT克隆的git：/ / github.com/yui/yui3.git yui3;
 GIT克隆的git：/ / github.com/yui/yui3-gallery.git yui3画廊;
 GIT克隆的git：/ / github.com/yui/2in3.git2立方英寸;

用于测试目的。我有时会设置ONLINE = false “假”，并检查我的网站负载如何。如果你这样做，然后在一个正常的浏览器访问您的应用程序，你可以看到每个文件需要单独列入。要正确填写我们的缓存清单，你需要采取拉在每个文件的说明，使用类似Firebug的东西。然后在您的快取清单，你会列出每一个文件。它会是这个样子。

 缓存清单
 ＃注释
的index.html
 base.css
 base.js
蕊，min.js
 yui3/build/loader/loader-min.js
 yui3/build/widget/assets/skins/sam/widget.css
 yui3/build/console/assets/skins/sam/console.css
 yui3/build/oop/oop-min.js
 yui3/build/event-custom/event-custom-min.js
 yui3/build/intl/intl-min.js
 yui3/build/console/lang/console.js
 yui3/build/attribute/attribute-min.js
 yui3/build/event/event-base-min.js
 yui3/build/pluginhost/pluginhost-min.js
 yui3/build/dom/dom-min.js
 yui3/build/node/node-min.js
 yui3/build/event/event-delegate-min.js
 yui3/build/event/event-focus-min.js
 yui3/build/base/base-min.js
 yui3/build/classnamemanager/classnamemanager-min.js
 yui3/build/widget/widget-min.js
 yui3/build/substitute/substitute-min.js
 yui3/build/console/console-min.js
 yui3/build/cssreset/reset-min.css
 2in3/dist/2.8.0/build/yui2-grids/yui2-grids-min.css
 yui3-gallery/build/gallery-storage-lite/gallery-storage-lite-min.js
 yui3/build/json/json-min.js
 startup.png
 icon.png

在这一点上，我们可以走一路脱机。如果您的iPhoneOS或Android设备（或任何HTML5的浏览器），您现在可以访问您的网页，让完成加载，然后重新禁用设备的互联网接入页面。

iPhone的具体超值服务

而iPhone，使Web应用程序开发能力，给你的应用程序，就像所有其他的应用程序的主屏幕上的一些空间。你甚至可以有光泽的图标，启动画面，你有一个“本土”应用程序。首先，您需要按照规范的图标和启动画面。然后你就可以添加以下meta标签：

  <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="white" />
 <link rel="apple-touch-icon" href="icon.png"/>
 <link rel="apple-touch-startup-image" href="startup.png"

前两个标签告诉移动Safari，您的网页是一个HTML5 Web应用程序和广域网的顶端是白色的状态栏的颜色。这也将删除所有的导航铬浏览器窗口周围。第二个标签是指向您要使用的文件图标和启动屏幕。

下一步是什么

HTML5规范仍然是一个移动的目标。随时留意新的发展。这就是说，即使在今天，在现代浏览器中有精彩绝伦的新功能。正如你可以看到从本教程中，它并不难，采取Web应用程序脱机，大大提高了它的潜在用途。而且，当您脱机时，不犹豫，带着你你习惯于从YUI 3画廊和YUI的2部件家庭的所有电源，锐3。

分享和扩展：书签del.icio.us | Digg它！ | 书签交易！

9评论

我知道，这里的要点是演示，但我们仍然需要看到，可在现实生活中使用的代码。有可能是一个在浏览器上的错误，不支持navigator.online
您测试这种方式
VAR在线=（navigator.online）？真：假;
这样一个IE总是考虑它的脱机因为属性不存在，而应用程序可以在线工作至少
jpvincent - 5月28日，2010 ＃
停止读吗？真：假的。
评论HJ - 5月28日，2010 ＃
FF 3.6.3和铬6dev没有财产navigator.online但navigator.onLine。与大L.
Matjaž LIPUS - 5月28日，2010 ＃
我很想拥抱HTML5的，但是，是不是有点太早跳HTML5的旅行车吗？
根据维基百科上说：
引用维基百科：
“... ... HTML5规范，预计该规范在2012年达到W3C的候选推荐标准阶段，和W3C在2022年或更高版本的建议... ...”
莱文-评论5月28日，2010 ＃
@ jpvincent的navigator.onLine已经在IE浏览器自4.0。
@ Matjaž LIPUS你是正确的。实际上，这不只是iPhone的案例比比皆是。我们有固定的错误，在文章中，我也有固定在我的代码。
@莱文HTML5是一个移动的目标，但浏览器有部分已经实施。，手机和其他移动设备很可能只是开始，HTML5的能力。此外，在未来，它仿佛标准组移动到一个新的非数字版本序列。因此，在本质上，我们不会看到的东西，如“HTML7”规范将继续发展缓慢，开发人员将不得不作出决定，对个别功能，而不是试图决定他们是否要支持整个事情。
评论由亚历山大Kessinger - 5月28日，2010 ＃
[...]介绍，在在HTML5真棒功能之一离线应用中使用YUI的3应用程序缓存，使网站的能力，告诉浏览器文件到缓存使用缓存的文件，当浏览器不T有一个网络连接。您可以使用应用程序缓存，以确保用户将能够访问至少你的应用程序的一部分，而他是的。（标签：HTML中的JavaScript 2010）Scritto IL 30/05/10 DA giorgio_v。 [...]
Pingback 2010-05-30链接- ReFactor.it - 5月30日，2010 ＃
错字：“... ...，你湾的状态栏的颜色... ...”
“万”S / B“希望”
科瓦奇-评论5月30日，2010 ＃
[...]或数据库存储来存储您的组件。亚历克斯Kessinger最近YUI的博客文章，介绍在脱机应用程序中使用YUI的3，您可能会感兴趣锐3开发商考虑这个[...]
Pingback 移动浏览器缓存限制的Android，IOS，和webOS » Yahoo!用户界面博客（YUIBlog） - 2010年6月28日，＃
我的意见相同来源方面：
[1]，按我的测试中，和读取的规范约束只适用于显式高速缓存的参考条目，如果你访问通过HTTPS（或一些其他的安全协议）的清单相同的起源。
所以在上面的例子，好像它本来罚款拉YUI的代码从CDN。脱机使用，它仍然应该得到缓存。如果你看到，否则，我会在明知感兴趣。
[1] ，解析的HTML 5脱机缓存舱单（见28点：解析令牌）
评论Satyen德赛- 10月12日，2010 ＃

抱歉，评论形式此时关闭。

支持WordPress的关于雅虎虚拟主机。

Yahoo!用户界面博客（YUIBlog）

在脱机应用程序使用YUI 3

标记

关于逐步增强的注意事项

处理移动设备的附加属性

的CSS

浏览器

缓存清单

离线/在线

iPhone的具体超值服务

下一步是什么

9评论

YUI库在Twitter

克罗克福德对JavaScript的视频系列

翻译

辛迪加

最近的帖子

YUI库

档案：

评论政策

成为一个Yahoo!

元：

Yahoo!用户界面博客（YUIBlog）

在脱机应用程序使用YUI 3

标记

关于逐步增强的注意事项

处理移动设备的附加属性

的CSS

浏览器

缓存清单

离线/在线

iPhone的具体超值服务

下一步是什么

9评论

YUI库在Twitter

克罗克福德对JavaScript的视频系列

翻译

辛迪加

最近的帖子

YUI库

档案：

网志串连

评论政策

成为一个Yahoo!

元：