在脫機應用程序使用YUI 3

2010年5月27日，1:53 PM由亞歷山大Kessinger | 開發 | 9評論

作者簡介：亞歷克斯Kessinger作為前端工程師在雅虎過去的前端工作，他喜歡整個堆棧上工作。 他還花了很多時間閱讀，策劃，以及對互聯網的寫作，社交媒體，網站建設。 在他的網站你可以找到它的所有alexkessinger.net 。 您還可以找到他在twitter上@ voidfiles 。

我可以說，HTML5的建設蒸汽，但當時是通過：HTML5是在這裡。 移動已經是巨大的，WebKit是迅速增長，數量的人都會有他們的電話和/或筆記本電腦上的HTML5的瀏覽器，在未來幾年將創建一個“新常態”在HTML5的能力標準。

在HTML5真棒功能之一是應用程序緩存 ，使網站告訴瀏覽器高速緩存文件，並使用緩存的文件瀏覽器不具備網絡連接時的能力。 您可以使用應用程序緩存，以確保用戶將能夠訪問至少你的應用程序的一部分，而他是。 在手機或片劑（或者甚至是老式的設備，如筆記本電腦）等設備的情況下，這可能意味著您的用戶能夠在飛機上使用您的應用程序。 同時，你要繼續與網絡技術構建您的應用程序，而不是學習的Objective-C。

除了​​應用程序緩存中 ，也有其他的API，在HTML5中，使Web開發人員的工具來創建有用的離線經驗。 有兩個持久化存儲API可以用在大多數新的瀏覽器。 其中之一是一個簡單的鍵/值數據存儲，稱為localStorage 。 第二個是一個SQL數據庫 。 既可以利用，而用戶是離線的。

有了這些概念，我要去探索常青樹“To Do列表”應用程序，使用它作為一個跳板，來看看我們如何能夠利用一切我們愛銳後建立一個應用程序，應用程序緩存和持久性存儲3，包括銳3畫廊。

標記

標記始終是一個偉大的地方開始建立網站有關的任何時。 我們的HTML5頁面的基本殼： 

  <！的DOCTYPE html>
 <HTML
 <HEAD>
     <TITLE>銳待辦事項</ 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>

雖然我們正在建立一個脫機準備申請，按照剛剛閉幕前body標籤的最佳做法，但將在頭CSS和JavaScript。 即使您的網頁將是脫機可用，初始頁面加載應該響應。 （請注意，我們使用這裡赫然簡單的HTML5的doctype）。

應用程序需要一些佔位符標記： 

 <！DOCTYPE HTML> <HTML> <HEAD> <TITLE>銳待辦事項</ TITLE> <鏈接=“樣式”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> </表格> </ DIV> </ DIV> <div class="bd"> <div class="yui-main"> <div class="yui-b"> <div class="todo_items"> <H2>待辦事項</ H2> <UL> <li class="no_items">取回ToDo項目... </ 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結構。

關於漸進增強的一個注記

有沒有應用程序不能建立與逐步提高的原則，仍然為脫機使用的原因。 在這種探索中，我省略了額外的複雜性，為了盡可能把重點放在支持脫機所需的技術，將參與體育。 也許有人會批評這種做法，我很同情這樣的說法。

處理移動設備的附加屬性

沒有任何特別注意的iPhoneOS和Android瀏覽器可以處理大多數的網頁，但與移動設備的處理時，它是值得探討的內容是如何被擠壓，以適應較小的屏幕上。 quirksmode已不是一個而是兩個視口深入的文章，是值得你花時間。

簡單地說，有一個meta標籤，稱為視口。 它看起來像這樣： 

  <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標準，而且是一種常見的慣例。 它目前支持的WebKit瀏覽器的iPhone和Android操作系統， 小狐 ，Mozilla的移動瀏覽器，也可能會支持本公約。

的CSS

以往任何時候都更然後使用CSS的能力​​，是液體和動態是重要的。 當尋找在手機，平板電腦和其他小屏幕的範圍廣泛，應用開發商需要意識到，我們的應用程序將要使用過多的設備上。 即使是沒有魔杖，我們可以揮動，使一切工作，對於大多數應用，我們可能並不需要每個設備上完美的像素。 只是以下最佳做法可以把我們的方式來支持大多數設備。

開始我們的應用程序的寬度設置在％的基礎，是一個偉大的開端。 使用EM的設置字體大小也是有幫助的，因為EMS計算的基礎上呈現的網頁。 另一件事，有助於確保你基於百分比列的寬度以及。 即使列排水溝可以在EM的設置。

一個偉大的地方開始，而不必做了很多工作，是一個CSS框架。 銳2網格CSS自然是我們的最愛之一，它有助於我們認為我們的頁面的比例，而不是靜態寬度塊。

所以建立2 YUI的CSS的網格，這裡是我的應用程序的CSS。 

  。todo_items {
    填充：1EM;
 }

 。todo_items UL {
    填充：0;
    保證金：0;
 }
 UL李todo_items的{
    保證金：.125 EM EM 0 0 .5;
    填充：.125 EM 0 0 0;
    邊界的頂部：1px固體＃CCC;
    列表樣式：無;
    顯示：塊;
    字總結：斷字;
    文字換行：壓制;
 }

 。toRight {
     文本對齊：權利;
 }

控制台。yui3 {
     文本對齊：左;
     保證金左：10px;
 }

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

JAVASCRIPT

接下來是我們的離線應用程序做的JavaScript。 首先下載yui_min.js，您的文檔根目錄，並把它添加標記，就像我們在上面有。 然後把你的base.js文件： 

  YUI的（）。使用（'節點'，功能（Y）{
     y.one（“todo_items H2”）。使用setContent（“我飛”）。;
 }）;

除了 ​​節點外，我還打算包括YUI 3的CSS復位和YUI的CSS網格。 我要包括從模塊銳3廊 ，瑞安Grove的優秀存儲精簡版 ，將包裝在一個簡單的，使用的API，所有可能的本地數據存儲方法。 

 使用銳（）（“cssreset”，“yui2網格”，“畫廊存儲精簡版'，'節點'，函數（y）{

   / /-DO LIST應用程序代碼

 }）;

注：我不打算潛入到待辦事項代碼，也把一些我使用的技術，使其更容易調試這種移動設備上的項目。 你可以找到所有github上： yui3-TODO 。 裡面base.js你會發現整個應用程序。 你還可以看到應用程序和運行http://html5.alexkessinger.net/yui/ytodo/ 。 在這裡，我要集中必要的步驟，以加強這個簡單的應用程序脫機功能。

緩存清單

以一個Web應用程序脫機的第一步是應用程序緩存 。 應用程序緩存可以告訴你的瀏覽器，你想要什麼樣的文件下載並保持離線。 在這個例子中，我知道我想繼續我的JavaScript和我的CSS脫機，以及主要的HTML頁面應用程序。 考慮到這一點，我的緩存清單將看起來像這樣： 

 緩存的MANIFEST

 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）？ 真：假的;

現在，我們只需要選擇配置對象的基礎上，離線或在線。 

  VAR YUI_ONLINE_CONF = {}，
     YUI_OFFLINE_CONF = {
        基地：“yui3/build /”
        結合：0
        組：{
            畫廊：{
                基地：“yui3-gallery/build /'
                模式：{“畫廊”：{}}
             }，
             yui2：{
                基地：：'2 in3/dist/2.8.0/build /，
                模式：{
                     “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;

銳（CURRENT_CONF）。使用（cssreset'，'yui2網格“，”畫廊存儲精簡版“，”節點“功能（Y）{
     ...
 }）;

YUI_OFFLINE_CONF配置可能需要一些解釋。 首先，我改變 ​​基地+ yui3/build/我的文檔根。 我已經發布了3 YUI的全分佈到我的服務器作為一個結果，我不能因為W3C規範指出，脫機緩存有著嚴格的單一起源的政策。 所有緩存的資源必須來自同一域清單。雅虎或谷歌或其他任何CDN服務我的文件 - 它們都必須是從我的服務器緩存的依賴。

在下一部分中， combine:0 ，告訴YUI裝載機不會自動組合的文件，因為我沒有自己的服務器上安裝一個組合的處理程序 。

最後，我想提一提groups的配置。 組是在YUI的3.1.1的新功能，允許你定義整個群體的文件，從同一個地方。 你還可以配置，他們從源頭combo'd的。 我成立了YUI 3畫廊畫廊yui3庫GitHub上有一個本地副本，我這裡載入。

當我們網上，我們可以從雅虎的CDN的引導，但我們需要脫機文件的本地副本。 這是很容易做到。 您可以下載該文件需要在一個大的zip文件到您的目錄： 

  CD的docroot;
 wget的http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip;
解壓yui_3.1.0.zip;
壓銳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;
 YUI-2立方英寸MV-YUI-2in3.3-0-gdf090252立方英寸;

或者你可以從github克隆直接Git是您的計算機上安裝的git庫： 

  CD的docroot;
混帳克隆的git :/ / github.com/yui/yui3.git yui3;
 git的克隆混帳:/ / github.com/yui/yui3-gallery.git的yui3畫廊;
混帳克隆的git :/ / github.com/yui/2in3.git2立方英寸;

出於測試的目的。 我有時會設置ONLINE = false和檢查我的網站是如何加載。 如果你這樣做，然後在一個正常的瀏覽器訪問您的應用程序，你可以看到每個文件需要單獨列入。 要正確填寫我們的緩存清單，你需要採取被拉在每個文件的說明，使用類似Firebug的東西。 然後你會在你的緩存清單列出每個文件逐個。 它看起來會像這樣。 

 緩存的MANIFEST
 ＃註釋
 index.html的
 base.css
 base.js
 YUI-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

在這一點上，我們可以去所有的方式脫機。 如果你有一個iPhone操作系統或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"

前兩個標籤告訴您的網頁是一個灣，頂部狀態欄的顏色是白色的HTML5 Web應用程序和移動Safari。 這也將刪除所有瀏覽器窗口周圍的導航鉻。 第二兩個標記指向你想使用你的圖標，啟動畫面文件。

下一步是什麼

HTML5規範仍然是一個移動的目標。 隨時留意新的發展。 這就是說，即使在​​今天，在現代瀏覽器中有奇妙的新功能。 正如你可以看到從本教程中，不難採取一個web應用程序脫機，大大提高了它的潛在用途。 而且，當您離線時，不要毫不猶豫地採取3 YUI的你，以及你習慣於從YUI 3畫廊和銳2部件家庭的所有電源。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

9評論

  1. 我知道，這裡的關鍵是演示，但我們仍然需要看到，可在現實生活中使用的代碼。 瀏覽器不支持navigator.online有可能是一個錯誤

    你測試這種方式
    VAR在線=（navigator.online）？ 真：假的;

    這樣一個IE瀏覽器總是會認為這是脫機，因為屬性不存在，而應用程序可以正常工作，至少在線

    評論jpvincent - 5月28日，2010 ＃

  2. 停止讀取，在？ 真：假的。

    HJ - 5月28日，2010 ＃

  3. 法郎3.6.3和鉻6dev的都沒有財產navigator.online但navigator.onLine。 大L.

    MatjažLIPUS - 5月28日，2010 ＃

  4. 我很想擁抱HTML5的，但是，是不是有點太早HTML5的馬車上跳？

    根據維基百科上說：
    引用維基百科：

    “...... HTML5規範，預計在2012年達到規範W3C候選推薦標準階段，在2022年或稍後的W3C建議......”

    萊文- 5月28日，2010 ＃

  5. @ jpvincent的navigator.onLine以來一直在IE 4.0。

    @MatjažLIPUS你是正確的。 這實際上不只是iPhone的情況比比皆是。 我們有固定的文章中的錯誤，我也固定在我的代碼。

    @萊文HTML5是一個移動的目標，但瀏覽器已經實現部分。 此外，手機和其他移動設備可能剛開始有HTML5的能力。 另外，在未來，它似乎彷彿標準組正在向一個新的非數字版本序列。 因此，在本質上，我們不會的東西請參閱像“HTML7”的規範，將繼續以發展緩慢，開發商將有使有關個人特徵的決定，而不是試圖決定他們是否要支持整個事情。

    亞歷山大Kessinger - 5月28日，2010 ＃

  6. [...]在脫機應用程序中使用YUI的3 HTML5的真棒功能之一是應用程序緩存，使網站的能力，告訴瀏覽器高速緩存文件，並使用緩存的文件時，瀏覽器不'沒有網絡連接。 您可以使用應用程序緩存，以確保用戶將能夠訪問至少你的應用程序的一部分，而他是。 （標籤：HTML的JavaScript 2010）金正日30/05/10大giorgio_v Scritto。 [...]

    pingback的鏈接2010-05-30 - ReFactor.it - 5月30日，2010 ＃

  7. 錯字：“......你宛在狀態欄的顏色......”

    “皖”S / B“希望”

    科瓦奇- 5月30日，2010 ＃

  8. [......]或數據庫存儲來存儲您的組件。 Kessinger亞歷克斯最近的銳博客後，在脫機應用程序中使用YUI的3，您可能會感興趣銳3開發商考慮這個[...]

    pingback的移動瀏覽器緩存限制：機器人，IOS，和webOS»雅虎用戶界面博客（YUIBlog）的 - 6月28日，2010 ＃

  9. 我在同一起源方面的意見：

    根據我的測試，並規範[1]閱讀，同一產地的約束只適用於明確緩存參考條目，如果你訪問通過HTTPS（或一些其他的安全協議）的清單。

    因此，在上面的例子中，它似乎像它本來的罰款，以拉YUI的代碼從CDN。 脫機使用，它仍然應該得到緩存。 我知道如果你看到，否則感興趣。

    [1] HTML 5解析脫機緩存艙單 （見28點：解析令牌）

    評論Satyen德賽- 10月12日，2010 ＃

很抱歉，評論已被封閉，在這個時候。

主辦雅虎

©2006-2012雅虎公司所有權利保留。 隱私政策 - 服務條款

支持WordPress的關於雅虎 虛擬主機 。