소개 오프라인 응용 프로그램»에 유이 3를 사용하는 야후 사용자 인터페이스 블로그 (YUIBlog)

소개 응용 프로그램을 오프라인 3에 유이를 사용하여

오후로 알렉산더 Kessinger 1시 53분 2010에 월 27 | 있음 개발 | 9 개의 댓글

저자에 관하여 : 알렉스 Kessinger 스택 - 과거의 노력으로 전면 야후 엔지니어의 엔드 - 작품으로 프런트 엔드, 전체가에 그가 누리고 작업. 그는 또한 웹사이트 구축, 소셜 미디어, 지출 많은 인터넷의 시간 읽기, curating, 쓰기에 대해. 당신은 그의 웹사이트에 그것을 모두 찾을 수 있습니다 alexkessinger.net . 당신은 트위터 수있는 그를 찾아도 @ voidfiles .

하지만, 그 HTML5는 증기를 만들고 있는데 말할 수있는 시간이 전달됩니다 : HTML5가 여기있다. 모바일은 이미 거대한, 웹킷은 빠르게 성장하고있는 향후 몇 년 동안 그들의 전화 및 / 또는 노트북에서 HTML5 가능 브라우저가 필요합니다 사람들의 숫자는 만들어집니다있는 HTML5 기능은 표준 "정상적인 새로운".

HTML5에서 가장 멋진 기능 중 하나는 응용 프로그램 캐시 연결, 네트워크가 브라우저를 말해 웹사이트에게 능력을 제공하여 파일 캐시를 사용하지 않는 브라우저는 캐시된 파일을 때. 당신은 사용자가 오프라인 그가있는 동안 당신의 애플 리케이션 중 적어도 부분에 액세스할 수 있도록 응용 프로그램 캐시를 사용할 수 있습니다. 전화 또는 태블릿 (혹은 심지어 노트북 같은 구식 장치) 같은 장치의 경우, 이것은 사용자가 비행기 동안에 응용 프로그램을 사용할 수있다는 의미 수 있습니다. 한편, 차라리 목표 - C를 학습 이상의 웹 기술을 사용하여 응용 프로그램을 구축 계속해서 받으세요.

게다가 응용 프로그램 캐시 , 오프라인 경험을 유용하게 개발자를 만드는 도구가 웹주고 아르 또한 HTML5의 다른 API는 없습니다. 이 영구적인 스토리지 API는 대부분의 최신 브라우저에서 사용할 수 있습니다. 하나는 전화 데이터 저장소입니다 간단한 키 / 값 localStorage . 두 번째는 SQL 데이터베이스 . 사용자가 오프라인 상태에서 둘 다 이용할 수 있습니다.

마음에서 이러한 개념으로, 나는 우리가 유이를 사랑하는 모든시 빌드를 애플 리케이션에 어떻게 우리가 활용할 수 응용 프로그램 캐시 및 영구 저장 볼 발판으로 그것을 사용하여 응용 프로그램을 "해야 할 일 목록"상록수를 탐험하는거야 유이 세 갤러리 등 3.

마크업

마크업은 항상 건축 아무 웹에 관련된 때 시작하는 아주 좋은 장소입니다. 우리 HTML5 페이지의 기본 쉘 :

  <! DOCTYPE HTML을>
 <의 HTML을
 를 <head>
     <제목 유이 오늘의 <이 / 타이틀>을
     <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no title" charset="utf-8">
 </ 머리>
 <body의 class="yui-skin-sam">
     <script의 src="yui-min.js">의 </ 스크립트>
     <script의 src="base.js">의 </ 스크립트>
 </ 몸>
 </ html로>

우리는 오프라인 가능한 응용 프로그램을 구축하고 있지만 닫는 body 태그 바로 앞에 우수 사례지만 머리에 CSS를 넣어, 그리고 자바 스크립트를 따르십시오. 페이지를 오프라인으로 사용할 될하더라도, 초기 페이지로드가 응답해야합니다. (우리가 여기 놀랍도록 단순한 HTML5의 doctype를 사용합니다.)

응용 프로그램의 일부 자리 표시자 마크업을 필요로합니다 :

  <! DOCTYPE HTML을>
 <html>
 를 <head>
    <제목 유이 오늘의 <이 / 타이틀>을
    <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no title" charset="utf-8">
 </ 머리>
 <body의 class="yui-skin-sam">
     <div의 id="doc3">
         <div의 class="hd">
             <h1> 오늘의 애플 리케이션 </ h1>
             알렉스 Kessinger에 의해은 <a class="callout" href="http://alexkessinger.net" target="_blank"> 지금 </>
             <div의 class="item_entry">
                 class="entry_form">을 <form
                     <input type="text" name="todo_item_input" class="todo_item_input">
                     <p class="toRight">은 <a class="addItem" href="#add"> 추가 </> </ 피의>
                 </ 폼>
             </ 사업부의>
         </ 사업부의>
         <div의 class="bd">
             <div의 class="yui-main">
                 <div의 class="yui-b">
                     <div의 class="todo_items">
                         <h2>의 할 일 항목 </ h2>
                         <ul>
                             할일 항목을 가져오는 <li의 class="no_items"> 리>를 ...</
                         </ UL 인증>
                     </ 사업부의>
                 </ 사업부의>
             </ 사업부의>
         </ 사업부의>
         <div의 id="debug">의 </ 사업부의>
         <- 초기화 프로세스 //-->
         <script의 src="yui-min.js">의 </ 스크립트>
         <script의 src="base.js">의 </ 스크립트>
     </ 사업부의>
 </ 몸>
 </ html로>

이것은 사용자가 그들이 먼저 응용 프로그램을 로드할 때 그들을위한 몇 가지 데이터를 얻기 계획 알려드립니다. 그것은 또한 우리의 무대와 함께 작업을 시작하기 위해 자바 스크립트의 DOM 구조를 설정합니다.

프로 그레시브 향상에 대해주의

응용 프로그램과 진보 향상의 원칙으로 지어진 수 없다는 것을 아직도 오프라인에서 사용할 만든 이유가있다. 이 탐험에서 나는 주문 오프라인 지원에 필요한 기법으로 많은 것을 가능한 한 초점에 체육 관련되어있을 것입 추가 복잡도를 생략 해요. 일부는 그런 접근 방식을 비판 수도, 그리고 나도 그 주장에 공감 해요.

모바일 장치를 처리하기위한 추가 속성

iPhoneOS과 안드로이드 브라우저는하지만, 특별한주의없이 대부분의 웹 페이지를 처리할 수있는 모바일 장치와 거래할 때 그것은 콘텐츠가 작은 화면에 맞게 압착 도착 방법을 조사하고 가치가 있어요. Quirksmode가되지 않은 하나 지만, 이 볼만한 가치가 시간을 아르의 뷰포트에 대한 기사를 심층.

간단히, 메타 태그라는 뷰포트있다. 그것은 다음과 같이 보입니다 :

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

뷰포트의 태그의 목표는 모바일 브라우저에서는 작은 스크린에 정말 큰 웹 페이지를 표시할 수 알아내는 데 도움이하는 것입니다. 대부분의 디바이스는 300 - 500px 화면에 700 - 콘텐츠 1100px 쥐어 짜내려고하기 때문에 모바일 장치의 도움이 필요 해요. 또한, 우리는 100 % 우리의 너비를 설정하면, 브라우저는 웹페이지가되어야 얼마나 큰에서 최상의 추측을 취하고 다음 해당 장치의 크기를 안쪽에 맞게 큰 스케일에서 그것을.

우리가이 문제에 대한 뷰포트의을 설정할 수 있도록합니다.

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

이것은 장치의 화면의 너비로 우리의 페이지의 너비를 설정하는 장치를 알려줍니다. 우리가 확인되면 우리의 페이지는 다음의 페이지는 대부분의 모바일 장치에서 화면을 채울 것입니다 유동적입니다. 이것은 또한 전화기가 랜드 스케이프 모드가있는 경우 페이지가 여분의 공간을 채우기 위해 확장된다는 것을 의미합니다.

우리뿐 아니라 뷰포트 할 수있는 다른 것들이 있습니다. 당신은 모바일 브라우저와 함께 일했다있다면, 당신은 그들이 당신을 확대할 수 있도록 알아. 당신은 사용자가 확대하고 싶어하지 않을 수 있습니다 전체 화면을 채우기 위해 웹사이트를 구축하는 시간으로 데려가는 경우. 우리는 다음과 같은 뭔가 우리의 뷰포트 설정하면 사용자가 확대하려면, 수 또는 축소되지 않습니다. 아이폰과 같은 장치에서 이것은 더 네이티브 느낄 수 있습니다. 하지만 당신은 이것을 할 경우, 응용 프로그램의 콘텐츠는 사용자에게 적 (예를 들어, 작은 텍스트) 확대하려는 이유를 제공하는지 확인하고, 그렇지 않으면, 이것은 절망적 가용성 제약 것입니다.

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

뷰포트은 W3C의 표준이 아니지만 일반적인 대회입니다. 그것은.의 시스템 운영 및 Android 아이폰 현재 지원하여 웹킷 브라우저에있는 Fennec 것입니다 아마도 이것도 지원이 협약을하고, 모질라 모바일 브라우저.

CSS는

유체 및 동적 수 이상의 적,의 CSS를 사용하는 능력이 중요합니다. 휴대폰, 태블릿의 광범위한, 그리고 다른 작은 화면을보고, 응용 프로그램의 개발자는 우리의 애플 리케이션은 장치의 과다에 사용 될 것을 인식해야 할 때. 우리는 대부분의 응용 프로그램에 대한 우리 픽셀 모든 장치에 완벽하지 않아도 될, 그냥 모든 작업을 할 웨이브 수있는 마법의 지팡이가 없습니다 비록. 그냥 모범 사례를 다음과 같은 대부분의 장치를 지원하는 방식으로 대부분의 우리를 취할 수 있습니다.

%로 바닥에 우리의 응용 프로그램의 너비를 설정으로 시작하는 좋은 출발이다. EMS 배달는 웹페이지 렌더링을 기준으로 계산되기 때문에 그들을 사용하여 글꼴 크기를 설정할 수있어도 도움이됩니다. 도움이 다른 것은 물론 비율에 열 너비를베이스 있는지 확인하는 것입니다. 심지어 열 배수구는 그들의에 설정할 수 있습니다.

좋은 장소. 프레임 워크 CSS가됩니다 많은 작업을 할 수없이 시작하는 유이 그리드 CSS가이 좋아하는 우리의 하나입니다 자연, 그리고 차단하는 데 도움이 폭 - 대신 고정 비율의 측면에서 우리가 생각하는 우리의 페이지입니다.

그래서 이곳이 유이이 CSS의 그리드를 건물 내 응용 프로그램에 대한 CSS를 시작.

 . todo_items {패딩 - 가기 : 1em;}. todo_items UL 인증 {패딩 : 0; 마진 : 0;} todo_items UL 인증 리 {마진 : 0.125 그들 0 0.5 그들 0; 패딩 :. 0.125 그들 0 0 0; 국경 가기 : 1px 고체 # CCC 인증, 목록 스타일 : 없음; 디스플레이 : 블록; 워드 랩 : 브레이크 단어, 텍스트 줄 바꿈 :. 억제할;} toRight {텍스트 정렬 :. 바로;} yui3 단추 {콘솔 텍스트 정렬 : 왼쪽; 왼쪽 마진 : 10px;} h1 {본문 글꼴 크기 : 200 %;} h2 {본문 글꼴 크기 : 150 %;}

자바 스크립트

- 응용 프로그램을 할 우리의 오프라인에 다음은 자바 스크립트입니다. 먼저 다운로드 yui_min.js를 귀하의 문서 루트에 이상이 우리가 마크업과 같은 추가하는 그것을. 그런 다음에 넣고 base.js 파일 :

  유이 (). 사용 ( '노드'기능 (Y) 개의 {
     Y.one ( ". todo_items h2") setContent ( "나는 표도창입니다").;
 });

노드 게다가 오전 포함하는 것 역시 유이는 3 재설정 CSS를 , 그리고 유이이 CSS를 그리드합니다. 난에서 모듈을 포함거야 유이 세 갤러리 , 라이언 그로 브의 우수한 스토리지 라이트 API를 사용 - 방법에 하나는 쉬운 것이다 랩 모두 저장 가능한 데이터 지방.

  유이 (). 사용 ( 'cssreset', 'yui2 - 격자', '갤러리 - 스토리지 - 라이트', '노드'기능 (Y) 개의 {

   / / -리스트 응용 프로그램 코드를 할일

 });

참고 : 저는 모바일 디바이스에서 프로젝트의 종류를이 그것은 쉽게 디버깅을하고 싶은데요 사용해야합니까? 기술의 일부에있어도, 안가는 코드를 목록 - 할 수있는가에에 잠수. 수 있습니다 : github 거기에 발견의 모든 당신 yui3 - 할 일 . 관내 base.js 당신이 응용 프로그램 전체를의거야 찾으십시오. 당신이 수있는 응용 프로그램을 참조시 실행 http://html5.alexkessinger.net/yui/ytodo/ . 여기, 내가 스텝 오프라인 기능이 간단한 응용 프로그램을 향상시키기 위해 필요에 초점을거야.

캐시 매니 페스트

웹 응용 프로그램을 오프라인 복용 첫 번째 단계가됩니다 응용 프로그램 캐시 . 응용 프로그램 캐시가 무엇을 다운로드하고 오프라인 상태를 유지하려는 파일 브라우저를 알 수 있습니다. 이 예제에서, 나는 내 JavaScript와 CSS를 내 오프라인뿐만 아니라 응용 프로그램에 대한 기본 HTML 페이지 유지하려면 알아요. 마음에 들고 내 캐시 매니 페스트는 다음과 같이됩니다 :

  캐시 매니 페스트

 index.html 페이지
 base.css
 yui_min.js
 base.js

몇 가지 캐시 매니 페스트에 대한 참고.

그것은 라인을해야 시작 CACHE MANIFEST .
당신은 / 캐시 매니 페스트 텍스트의 Content - Type 헤더와 함께 제공해야합니다

아파치 경우에 당신은 당신이 미리보기를 추가할 다음 수 있습니다 .htaccess 입력 콘텐츠 할 수있는 권리.

  AddType 텍스트 / 캐시 명단. 명단

으로 그 장소가있는 파일, .manifest 접미사와 함께 제공될 예정입니다 text/cache-manifest Content - Type 헤더.

다음으로 우리가 우리의 HTML 태그에 속성을 추가하려면 캐시 매니 페스트의 브라우저를 알려주해야합니다 :

  <html manifest="todo.manifest">

당신은 아마이 웹페이지는 오프라인 액세스를 요청하는되었다는 알림이 표시됩니다 오프라인 애플 리케이션을 지원하는 브라우저에서 해당 페이지로 이동하는 경우 자.

오프라인 / 온라인

장소에 매니 페스트가 우리 브라우저를 무엇 자원 캐시로 말하고, 우리는 오프라인 모드 대 온라인 모드에서 일어나는 생각해 준비가되었습니다. 이 "부팅 시퀀스,"지금있다 가장 먼저 우리는 이미 (그리고 그 동안 리소스를 오프라인에서 사용하기 위해 캐시)가 전체 온라인 순서를 받고. 이 온라인 순서는 야후 캐나다에서 파일을로드하기 위해 사용하는 파일이 콤보 - 우리는 겨우 몇 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/ . 전 정책을 원산지 엄격한 단일가 오프라인 캐시 미국 저 사양 서버 때문에 W3C의 제가 게시에 대한 모든 유통의 유이 3. 캐시된 모든 리소스가 매니 페스트가 있어야합니다 올에서 같은 도메인이. 결과적으로, 난 못해 그들 모두가 나의 서버에서 캐싱을 사용할 수 있어야합니다 - 내 파일을 제공하기 위해 야후는 Google이나 기타 캐나다에 의존합니다.

다음 부분, combine:0 이 아닌하지 않아도 내가 파일 콤보 때문에 자동으로, 로더를 유이 알려주 콤보 처리기를 서버에 직접 설치한 내.

마지막으로, 제가 언급하려는 groups 설정. 단체팀 장소에서 같은 온 상태이므로 파일의 그룹을 정의할 전체 당신이 수있는 새로운 3.1.1 기능 유이. 당신도 그들이 소스에서 combo'd로 구성할 수 있습니다. 내가 yui3 - 갤러리 GitHub에 저장소 가지고있는 로컬 복사본에서로드하려면 여기를 유이 세 갤러리를 설정할 수 있습니다.

우리가 온라인 상태일 때, 우리는 야후 캐나다에서 부트 스트랩 수 있지만이 경우 파일의 로컬 복사본이 필요합니다 오프라인. 이것이 쉽습니다. 당신도 당신의 디렉토리에 큰 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;
 지퍼 유이 - yui3 - 갤러리 - 갤러리 - 2010년 5월 19일 - 19 - 08 - 0 - g2a49f06.zip;
 뮤직 비디오에 유이 - yui3 - 갤러리 - 2a49f06 yui3 - 갤러리;
 wget http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip;
 뮤직 비디오에 유이 - 2입방인치 - 유이 - 2in3.3 - 0 - gdf09025 2입방인치를;

아니면 자식이 컴퓨터에 설치되어있는 경우 직접 github에서 자식 저장소를 복제할 수 있습니다 :

  CD docroot;
 빌어먹을 자식 클론 : / / github.com/yui/yui3.git yui3;
 빌어먹을 자식 클론 : / / github.com/yui/yui3-gallery.git yui3 - 갤러리;
 빌어먹을 자식 클론 : / / github.com/yui/2in3.git의 2입방인치;

테스트 목적. 제가 설정합니다 가끔 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이나 안드로이드 장치 (또는 HTML5 가능 브라우저가) 이제, 귀하의 웹페이지를 방문할 수 있습니다 그것은로드 마무리하자, 그리고 장애인 장치의 인터넷 접속으로 페이지를 다시로드합니다.

아이폰 특정 케이크

아이폰은 WebApp 개발자에게 다른 모든 애플 리케이션처럼 홈 화면의 일부 공간을 당신의 애플 리케이션을 줄 수있는 능력을 가르치시. 당신도 당신은 "네이티브"응용 프로그램과 함께했을로 광택 아이콘 및 시작 화면을 가질 수 있습니다. 첫째, 당신이 따를 필요 사양은 화면의 아이콘 및 시작. 그리고 나서 다음을 추가할 수 있습니다 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 WebApp이며 당신이 상단에있는 상태 표시줄의 색상을 스승님은 그 흰 될 모바일 사파리 말해. 이것은 또한 브라우저 창 주위에있는 모든 탐색 크롬을 제거합니다. 두 번째이 태그를 당신의 아이콘 및 시작 화면에 사용하고자하는 파일을 가리 킵니다.

다음은 뭐죠

HTML5 사양은 여전히 움직이는 표적이다. 신규 개발에 대한 안과 밖으로 보관합니다. 그것은 현대적인 브라우저에서 환상적인 새로운 기능이 있습니다 지금도했다. 당신은이 튜토리얼에서 볼 수 있듯이, 그것은 그것의 잠재적인 유용성을 극적으로 증가, 웹 응용 프로그램을 오프라인 떼지 못한다 아니에요. 그리고, 당신은 오프라인으로 갈 때, 당신은 유이 세 갤러리와 유이이 위젯 가정에서 익숙한하는 모든 권력과 함께, 당신과 함께 유이 세 걸릴 주저하지 마십시오.

공유하고 확장할 수 : 즐겨찾기에 추가 del.icio.us으로 | 그것 Digg에! | reddit!

9 개의 댓글 »

이 게시물에 덧글에 대한 RSS 피드. 트랙백 URI를

내 요점은 여기에 데모하는 것을 알지만, 우리는 아직도 실제 생활에서 사용할 수있는 코드를 볼 필요가 있습니다. 브라우저에서 그 그나마 지원 navigator.online 버그가있을 수 있습니다
이 방법을 테스트
var에 온라인으로 = (navigator.online)? 사실 : 거짓;
그래서 항상 속성이 존재하지 않기 때문에 응용 프로그램은 적어도 온라인으로 해결할 수 반면 이건 오프라인 그게 IE를 고려하게됩니다
에 의해 댓글 jpvincent 2010 - 5 월 28 일 #
에 들렀어요 독서? 사실 : 거짓.
hj에 의해 코멘트 - 2010 5월 28일 #
둘 다 Firefox 용 3.6.3과 크롬 6dev는 재산 navigator.online하지만 navigator.onLine이 없습니다. 대형 실은
에 의해 코멘트 Matjaž의 Lipuš - 2010 년 5 월 28에 #
내가 HTML5를 포옹 싶어하지만, 그것은 너무 일찍 HTML5의 마차에 뛰어 아닌가요?
위키백과에 따라 그것은 말합니다 :
위키 피 디아에서 인용 :
"... HTML5 스펙은 2022 년 이상 ...에서 W3C의 권고하고, 사양은 2012 중에 W3C의 후보 추천 단계에 도달 예상하고있다."
레반에 의해 코멘트 - 2010 5월 28일 #
navigator.onLine가되었습니다 @ jpvincent 4.0 이후 IE를.
@ Matjaž Lipuš 당신이 해결되었습니다. 이것은 실제로 어디 에나 사건뿐 아니라 아이폰. 우리는 문서의 오류를 해결한, 나는 또한 내 코드에 그것을 해결했습니다.
@ 레반 HTML5는 움직이는 표적이지만, 브라우저는 이미 그것의 일부를 구현했습니다. 가능성 또한 휴대폰 및 기타 모바일 장치 그냥 HTML5의 기능을 가지고 밖으로 시작합니다. 미래에, 그것은 표준 그룹에서 새 아닌 숫자 버전 시퀀스로 이동있는 것처럼 보인다. 그래서 본질적으로 우리는 못해 같은 무언가를보고 "HTML7"은 사양가 천천히 진화 계속되며, 개발자가 대신하려는 개별 기능에 대한 결정을 내릴 수있다는 것입니다 그들은 모든 것을 지원하기 위해가는 여부를 결정했습니다.
Kessinger 알렉산더 댓글 작성 - 2010 년 5월 28일 #
웹사이트에게 및 캐시에 파일 브라우저를 말할 캐시된 파일을 사용할 수있는 기능을 제공 응용 프로그램 캐시입니다 소개 오프라인 응용 프로그램 HTML5에서 가장 멋진 기능 중 하나에 유이 3을 사용하는 [...] 때 브라우저 어쩌려 구 네트워크 연결이 t. 당신은 사용자가 오프라인 그가있는 동안 당신의 애플 리케이션 중 적어도 부분에 액세스할 수 있도록 응용 프로그램 캐시를 사용할 수 있습니다. (태그 : HTML을 자바 스크립트 2,010) Scritto은 30/05/10 다 giorgio_v을 일리노이. [...]
에 의해 Pingback 2010년 5월 30일 링크 - ReFactor.it - 2010년 5월 30일 #
오타 : "... 당신은 상태 표시줄의 색상을 핏기없는 것을 ..."
"핏기없는"의 / B는 "원한다"
코박스에 의해 코멘트 - 2010 5 월 30 일 #
[...] 또는 데이터베이스 스토리지가 구성 요소를 저장할 수 있습니다. 알렉스 Kessinger의 최근 유이 블로그 게시물, 오프라인 응용 프로그램에 유이 3을 사용하는 개론,이 [...]을 고려하여 유이 세 개발자를위한 관심 있을겁니다
에 의해 Pingback 블로그 (YUIBlog) 인터페이스 모바일 브라우저 캐시 제한 : 안드로이드, 개조, 그리고 웹 OS»야후 사용자 - 2010년 6월 28일 #
동일 기원의 측면에서 내 관측 :
내 시험마다 다른 이름으로하고 사양 [1]의 읽기, 동일 기원 제약은 당신이 HTTPS를 통해 매니 페스트 (또는 다른 보안 프로토콜)에 액세스하는 경우 명시적으로 캐시 참조 항목에 적용됩니다.
위의 예에서 그러니, 그것이 캐나다에서 유이 코드를 잡아 잘했을 것 같아. 그것은 여전히 오프라인에서 사용하기 위해 캐시받을 것입니다. 당신이 다르게 보게되면 제가 알고 싶네.
[1] HTML 5의, 구문 분석 오프라인 캐시 명단 (28 참조 포인트 : 처리중 토큰)
Desai Satyen 댓글 작성 - 2010년 10월 12일 #

코멘트 남기기

에서 제공하는 워드 프레스 에 야후! 웹 호스팅 .

야후 사용자 인터페이스 블로그 (YUIBlog)

소개 응용 프로그램을 오프라인 3에 유이를 사용하여

마크업

프로 그레시브 향상에 대해주의

모바일 장치를 처리하기위한 추가 속성

CSS는

자바 스크립트

캐시 매니 페스트

오프라인 / 온라인

아이폰 특정 케이크

다음은 뭐죠

9 개의 댓글 »

코멘트 남기기

트위터에 유이 도서관

Crockford의 JavaScript 비디오 시리즈

번역

신디케이트

최근 게시물

유이 도서관

아카이브 :

댓글 정책

가입 야후!

메타 :

야후 사용자 인터페이스 블로그 (YUIBlog)

소개 응용 프로그램을 오프라인 3에 유이를 사용하여

마크업

프로 그레시브 향상에 대해주의

모바일 장치를 처리하기위한 추가 속성

CSS는

자바 스크립트

캐시 매니 페스트

오프라인 / 온라인

아이폰 특정 케이크

다음은 뭐죠

9 개의 댓글 »

코멘트 남기기

트위터에 유이 도서관

Crockford의 JavaScript 비디오 시리즈

번역

신디케이트

최근 게시물

유이 도서관

아카이브 :

Blogroll

댓글 정책

가입 야후!

메타 :