Eine Einführung zur Anwendung YUI 3 im Offline-Anwendungen »Yahoo! User Interface Blog (YUIBlog)

Eine Einführung zur Anwendung YUI 3 im Offline-Anwendungen

27. Mai 2010 um 13.53 Uhr durch Alexander Kessinger | Im Development | 9 Kommentare

Über den Autor: Alex Kessinger arbeitet als Front-End-Ingenieur bei Yahoo! Historische arbeitet als Front-End, er genießt Stapel Arbeit auf das gesamte. Er verbringt viel Zeit mit Lesen, kuratiert und schreibt über das Internet, Social Media und der Gestaltung von Websites. Sie können Website finden Sie alle von ihm bei seinem alexkessinger.net . Du kannst auch ihn auf Twitter @ voidfiles .

Ich könnte sagen, dass HTML5 baut Dampf, aber die Zeit ist vergangen: HTML5 ist hier. Mobile ist bereits riesig, ist WebKit schnell wächst, und die Zahl der Menschen, die einen HTML5-fähigen Browser auf ihrem Handy und / oder Laptop über die nächsten Jahre haben wird eine "neue Normalität", in der HTML5-Funktionen sind der Standard.

Eines der großartigen Features in HTML5 ist die Anwendungs-Cache , die Webseiten die Möglichkeit gibt, sagen Cache des Browsers auf die Dateien und die Dateien verwenden Sie die zwischengespeicherten, wenn der Browser nicht über eine Netzwerkverbindung. Sie können den Anwendungs-Cache, um sicherzustellen, dass ein Benutzer in der Lage sein, zumindest einen Teil Ihrer Anwendung zugreifen, während er offline ist. Im Falle von Geräten wie Handys oder Tabletten (oder sogar altmodische Geräte wie Laptops), könnte dies bedeuten, dass die Benutzer in der Lage, Ihre Anwendung in einem Flugzeug verwenden. Mittlerweile bekommen Sie weiterhin den Aufbau Ihrer Anwendung mit Web-Technologien, statt Lernen Objective-C.

Neben den Anwendungs-Cache gibt es auch andere APIs in HTML5, dass Erfahrungen geben die Web-Entwickler offline nützliche Tools zu erstellen. Es gibt zwei persistenten Speicher-APIs in den meisten neueren Browsern. One ist eine einfache Schlüssel / Wert-Daten zu speichern, genannt localStorage . Die zweite ist eine SQL-Datenbank . Beide können Leveraged während der Benutzer offline ist.

Mit diesen Konzepten im Kopf, ich werde zu den immergrünen erkunden "Aufgabenliste" Anwendung, wobei sie als ein Sprungbrett zu schauen, wie wir nutzen können, die Anwendungs-Cache und die dauerhafte Speicherung in einer Anwendung, die auf alles baut, die wir lieben zu YUI 3, einschließlich der YUI 3 Galerie.

Markup

Markup ist immer ein großartiger Ort zu starten, wenn Gebäude etwas zu finden, die Sie. Die grundlegende Schale unserer HTML5 Seite:

  <! DOCTYPE HTML>
 <Html
 <head>
     <title> YUI ToDo </ 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>

Obwohl wir den Aufbau einer Offline-Anwendung bereit sind, die optimalen Verfahren, sondern setzen im Kopf CSS und JavaScript direkt vor dem schließenden body-Tag. Auch wenn Ihre Seite wird offline verfügbar sein, sollte die erste Seite geladen werden reagieren. (Beachten Sie, dass wir mit dem einfachen awesomely HTML5 doctype hier.)

Die App braucht einige Platzhalter Markup:

  <! DOCTYPE HTML>
 <html>
 <head>
    <title> YUI ToDo </ title>
    <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no title" charset="utf-8">
 </ Head>
 <body class="yui-skin-sam">
     <div id="doc3">
         <div class="hd">
             <h1> ToDo App </ h1>
             <a class="callout" href="http://alexkessinger.net" target="_blank"> von Alex Kessinger </ a>
             <div class="item_entry">
                 <form class="entry_form">
                     <input type="text" name="todo_item_input" class="todo_item_input">
                     <p class="toRight"> <a class="addItem" href="#add"> hinzufügen </ a> </ p>
                 </ Form>
             </ Div>
         </ Div>
         <div class="bd">
             <div class="yui-main">
                 <div class="yui-b">
                     <div class="todo_items">
                         <h2> Todo Artikel </ h2>
                         <ul>
                             <li class="no_items"> holen ToDo Items ...</ li>
                         </ Ul>
                     </ Div>
                 </ Div>
             </ Div>
         </ Div>
         <div id="debug"> </ div>
         <-! Initialisierung //-->
         <script src="yui-min.js"> </ script>
         <script src="base.js"> </ script>
     </ Div>
 </ Body>
 </ Html>

Dies lässt den Benutzer wissen, dass wir auf immer einige Daten für sie, wenn sie zum ersten Mal laden die App Planung. Es richtet auch unsere Bühne, ein DOM-Struktur für unsere Javascript zu arbeiten mit.

Ein Hinweis zum Progressive Enhancement

Es gibt keinen Grund, dass ein Antrag nicht mit den Grundsätzen der schrittweisen Erweiterung gebaut werden und noch zur Verfügung für Offline-Verwendung. In dieser Untersuchung, ich bin Fortfall der zusätzlichen Komplexität, die in PE einbezogen werden sollten, um so viel wie möglich über die Techniken für die Offline-Unterstützung erforderlich konzentrieren. Manch einer mag kritisieren diesen Ansatz, und ich bin sympathisch auf dieses Argument.

Zusätzliche Eigenschaften für den Umgang mit mobilen Geräten

iPhoneOS und Android-Browser können die meisten Webseiten ohne besondere Aufmerksamkeit Griff, aber im Umgang mit mobilen Geräten ist es wert zu untersuchen, wie der Inhalt gequetscht wird, um auf dem kleineren Bildschirm passen. Quirksmode hat nicht ein sondern zwei ausführliche Artikel über Ansichtsfenster, die gut sind Ihre Zeit wert.

Kurz gesagt, es ist ein Meta-Tag, genannt Ansichtsfenster. Es sieht ungefähr so aus:

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

Das Ziel des Viewports Tag ist, um mobile Browser herausfinden, wie man einen wirklich großen Webseite auf einem kleinen Bildschirm. Mobile Geräte brauchen Hilfe, weil die meisten Geräte mit 700-1100px von Inhalten auf eine 300-500px Bildschirm quetschen versuchen. Auch, wenn wir unseren Breiten auf 100% gesetzt, nimmt der Browser seine beste Vermutung auf, wie groß der Webseite werden sollte, und dann skaliert es aus, dass groß, um innerhalb der Größe des Geräts passen.

Um Hilfe konnten wir den Viewport auf diesen Satz.

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

Dies wird Ihnen sagen das Gerät auf die Breite unserer Seite an die Breite des Geräts auf den Bildschirm gesetzt. Wenn wir sicher, unsere Seite ist flüssig, dann ist unsere Seite wird der Bildschirm auf den meisten mobilen Geräten zu füllen. Dies bedeutet auch, dass, wenn das Telefon hat einen Landscape-Modus wird die Seite zu erweitern, um den zusätzlichen Platz zu füllen.

Es gibt andere Dinge, die wir auf den Viewport tun kann als gut. Wenn Sie mit mobilen Browsern gearbeitet haben, wissen Sie, sie ermöglichen es Ihnen, Zoom. Sie sind zu Zeit nehmen, um eine Website zu den ganzen Bildschirm Sie nicht möchten, kann ein Benutzer in der Lage sein zu vergrößern füllen bauen. Wenn wir unsere Viewport etwas wie das folgende eingestellt werden, wird der Benutzer nicht in der Lage zu vergrößern, oder zu verkleinern. Auf einem Gerät wie dem iPhone kann es sich so fühlen sich heimisch. Aber wenn Sie das tun, stellen Sie sicher, dass der Inhalt Ihrer Anwendung den Benutzer gibt keinen Grund, jemals zu vergrößern (z. B. kleine Textdateien), andernfalls wird dies ein frustrierendes Usability Zwang werden.

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

Der Viewport ist nicht ein W3C-Standard, ist aber ein gemeinsames Abkommen. Es ist derzeit. Unterstützt durch WebKit-Browser auf dem iPhone und Android-Betriebssysteme Fennec , dem mobilen Browser Mozilla, wird wohl auch die Unterstützung dieser Konvention.

CSS

Mehr als je zuvor, mit Hilfe von CSS in der Lage zu sein fließend und dynamisch ist wichtig. Beim Blick auf die breite Palette von Telefonen, Tabletten und anderen kleinen Bildschirmen, die Entwickler von Anwendungen bewusst sein, dass unsere Anwendungen werden uns auf eine Vielzahl von Geräten eingesetzt werden müssen. Auch wenn es keinen Zauberstab können wir winken alles nur Arbeit machen, für die meisten Anwendungen können wir nicht sein müssen Pixel perfekt auf jedes Gerät. Einfach folgenden bewährten Methoden können wir die meisten der Weg zu den meisten Geräten unterstützen nehmen.

Beginnend mit der Einstellung der Breite unserer App an seiner Basis in% ist ein guter Start. Mit em's zu font-Größen Set ist auch hilfreich, weil ems berechnet auf Basis der erbrachten Webseite. Eine andere Sache, hilft, ist sicherzustellen, dass Sie die Spaltenbreiten auf Basis der Prozentsätze sowie. Auch Dachrinnen Spalte kann in em's eingestellt werden.

Ein großartiger Ort zu starten, ohne arbeiten zu wollen, viel ist ein CSS-Framework. YUI 2 Grids CSS ist natürlich eines unserer Favoriten, und es hilft uns denken an unsere Seite in Bezug auf die Verhältnisse statt statisch-Breite Blöcke.

So Gebäude aus YUI Grids CSS 2 hier ist der Ausgangspunkt für meine Anwendung CSS.

  . Todo_items {
     padding-top: 1em;
 }

 . Todo_items ul {
     padding: 0;
     margin: 0;
 }
 . Todo_items ul li {
     Marge: 0,125 em 0 .5 em 0;
     padding: 0,125 em 0 0 0;
     border-top: 1px solid # ccc;
     list-style: none;
     display: block;
     word-wrap: break-word;
     Text-wrap: unterdrücken;
 }

 . ToRight {
      text-align: right;
 }

 . YUI3-console {
      text-align: left;
      margin-left: 10px;
 }

 Körper h1 {font-size: 200%;}
 Körper h2 {font-size: 150%;}

Javascript

Weiter dich für unseren Offline-to-do-Anwendung ist die JavaScript. Laden Sie zuerst yui_min.js Ihr Dokument Wurzel, und fügen Sie sie der Markup wie wir oben. Dann legen Sie diese in Ihrem base.js -Datei:

  YUI (). Nutzung ("Knoten", function (Y) {
     Y.one (". Todo_items h2") setContent ("Ich fliege").
 });

Neben Knoten, werde ich übrigens auf, die YUI 3 CSS Reset und YUI Grids CSS 2. Ich werde die ein Modul aus YUI 3 Galerie , Ryan Grove ausgezeichneten Storage Lite , dass die API verwenden wickeln alle möglichen lokalen Datenhaltung Methoden in ein bis leicht-.

  YUI (). Verwenden ("cssreset ',' yui2-Grids", "Galerie-storage-lite", "Knoten", function (Y) {

   / / To-Do List ANWENDUNG CODE

 });

Anmerkung: Ich werde nicht tauchen Sie ein in die To-do-Liste-Code, noch in einige der Techniken, die ich benutzen würde Geräte zu erleichtern Handy zu debuggen diese Art von Projekt auf. Sie finden: alle, die auf github Sie YUI3-todo . Inside base.js Sie app finden die Gesamtheit der. Außerdem können Sie die App zum Laufen zu http://html5.alexkessinger.net/yui/ytodo/ . Hier werde ich über die notwendigen Schritte um diese einfache Anwendung mit Offline-Fähigkeiten verbessern konzentrieren.

Cache Manifest

Der erste Schritt zur Aufnahme einer Webanwendung offline ist die Anwendungs-Cache . Die Anwendungs-Cache kann sagen Ihrem Browser, was Sie herunterladen möchten, und halten Offline-Dateien. In diesem Beispiel, ich weiß, ich möchte meine JavaScript und CSS meine offline, sowie die Haupt-HTML-Seite für das App halten. In diesem Sinne, meine Cache manifestieren wie folgt aussehen:

  CACHE MANIFEST

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

Einige Dinge, die über den Cache manifestieren beachten.

Es muss Zeile beginnen mit dem CACHE MANIFEST .
Sie müssen es mit einem Content-Type-Header des Textes dienen / cache-Manifest

Wenn Sie Apache auf, können Sie fügen Sie den folgenden Ausschnitt .htaccess zu geben die richtigen Inhalte.

  AddType text / cache-Manifest. Manifest

Mit dem im Ort, eine beliebige Datei mit einer .manifest wird die Endung mit serviert werden text/cache-manifest Content-Type-Header.

Als nächstes müssen wir den Browser-Cache des Manifest zu informieren, zu tun, dass wir ein Attribut zu unserem HTML-Tags hinzufügen:

  <html manifest="todo.manifest">

Nun, wenn Sie gehen zu Ihrer Seite in einen Browser, der offline apps Sie wahrscheinlich eine Benachrichtigung, wonach dieser Webseite anfordert Offline-Zugriff unterstützt.

Offline / Online

Mit dem Manifest an Stelle sagen unsere Browser-Cache, welche Ressourcen zu, sind wir bereit, darüber nachzudenken, was passiert, im Online-Modus versus Offline-Modus. Es gibt nun zwei "boot Sequenzen", die erste ist die vollständige Online-Sequenz, die wir bereits haben (und während die Ressourcen für die Offline-Verwendung zwischengespeichert). Dieser Online-Sequenz nutzt die Yahoo EUR, um die Dateien zu laden, und die Dateien sind Combo-behandelt, so dass wir nur ein paar HTTP-Anfragen haben.

Aber wir bauen auch eine Offline-Boot-Prozedur. Wir müssen in der Lage sein, dass der Browser offline ist zu erkennen und dann richtig initialisieren YUI von Ressourcen im Cache zurückgreifen.

  var online = (navigator.onLine)?  true: false;

Jetzt müssen wir nur noch eine Konfiguration wählen Objekt wird offline oder online bezogen.

  var YUI_ONLINE_CONF = {},
     YUI_OFFLINE_CONF = {
         Basis: "yui3/build /",
         kombinieren: 0,
         Gruppen: {
             Galerie: {
                 Basis: "yui3-gallery/build / ',
                 Muster: {'Galerie-': {}}
             }
             yui2: {
                 Basis: '2 in3/dist/2.8.0/build / ',
                 Muster: {
                     "Yui2-': {
                         configFn: function (me) {
                             wenn (/-skin | zurücksetzen | Schriften | Gitter | base / .test (me.name)) {
                                 me.type = 'CSS';
                                 me.path = me.path.replace (/ \ js / "css"..);
                                 me.path = me.path.replace (/ \ / yui2-Haut-/, '/ assets/skins/sam/yui2-skin');
                             }
                         }
                     }
                 }
             }
         }
      }
      ONLINE = (navigator.online)?  true: false;
      CURRENT_CONF = (ONLINE)?  YUI_ONLINE_CONF: YUI_OFFLINE_CONF;

 YUI (CURRENT_CONF). Verwenden ("cssreset ',' yui2-Grids", "Galerie-storage-lite", "Knoten", function (Y) {
     ...
 });

Die YUI_OFFLINE_CONF Konfiguration müssen möglicherweise eine Erklärung. Erstens bin ich der Basisstation ändern, meine Dokument-Root + yui3/build/ . Ich Origin Policy gebucht haben die komplette Distribution von YUI 3 auf meinen Server, weil der W3C-Spezifikation besagt, dass die einzelnen Offline-Cache hat eine strenge. Alle Ressourcen im Cache muss manifestieren kommen aus der gleichen Domäne wie der. Als Ergebnis kann ich nicht vertrauen auf Yahoo oder Google oder eine andere EUR auf meine Dateien dienen - sie alle müssen für die Zwischenspeicherung von meinem Server zur Verfügung.

Der nächste Teil, combine:0 , erzählt die YUI Loader nicht automatisch die Dateien Combo, denn ich habe nicht zu einem Combo-Handler -Server installiert auf meinem eigenen.

Abschließend möchte ich erwähnen, die groups config. Groups ist ein neues Feature in YUI 3.1.1 diesem Ort können Sie definieren ganze Gruppen von Dateien gleichen, die kommen aus dem. Sie können auch sie von der Quelle bis combo'd werden. Ich den YUI 3 Galerie hier, um von einer lokalen Kopie habe ich der YUI3-Galerie Repository auf GitHub laden.

Wenn wir online sind, können wir aus dem Yahoo EUR Bootstrap, aber offline, müssen wir lokale Kopien der Dateien haben. Dies ist einfach zu tun. Sie können entweder die Dateien herunterladen muss in einer großen Zip-Datei auf Ihrem Verzeichnis:

  cd docroot;
 wget http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip;
 unzip 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;
 unzip yui-YUI3-Galerie-Galerie-2010.05.19-19-08-0-g2a49f06.zip;
 mv yui-YUI3-Galerie-2a49f06 YUI3-Galerie;
 wget http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip;
 mv yui-2in3-yui-2in3.3-0-gdf09025 2in3;

Oder Sie können Klon der Git-Repositories von github direkt, wenn git auf Ihrem Rechner installiert ist:

  cd docroot;
 git clone git: / / github.com/yui/yui3.git YUI3;
 git clone git: / / github.com/yui/yui3-gallery.git YUI3-Galerie;
 git clone git: / / github.com/yui/2in3.git 2in3;

Zu Testzwecken. Ich werde manchmal gesetzt ONLINE = false und überprüfen, wie meine Website lädt. Wenn Sie das, und dann besuchen Sie Ihre Anwendung in einem normalen Browserfenster können Sie sehen, jede Datei, die einzeln aufgenommen werden muss. Um es korrekt zu füllen unsere Cache manifestieren, müssen Sie zur Kenntnis, jede Datei in herausgezogen, mit so etwas wie Firebug zu nehmen. Dann in Ihrem Cache manifestieren Sie jede Datei einzeln Liste. Es wird so aussehen.

  CACHE MANIFEST
 # Ein Kommentar
 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

An dieser Stelle können wir den ganzen Weg gehen offline. Wenn Sie eine iPhoneOS oder Android-Gerät (oder einen HTML5-fähigen Browser) können Sie nun Ihre Webseite besuchen, lassen Sie es vollständig geladen und dann laden Sie die Seite mit dem Gerät Internet-Zugang gesperrt.

iPhone-spezifische Goodies

Das iPhone bietet den WebApp Entwickler die Möglichkeit, Ihre Anwendung zu geben etwas Platz auf dem Home-Bildschirm genau wie alle anderen Anwendungen. Sie können sogar eine glänzende Symbol und Startbildschirm, wie Sie es mit einem "native" Anwendung haben. Zuerst müssen Sie die folgen Produktinformationen für das Symbol und Startbildschirm. Und dann können Sie fügen Sie den folgenden meta Tags:

  <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" />

Die ersten beiden Tags sagen mobile Safari, dass Ihre Web-Seite ein HTML5 WebApp ist und dass Sie wan die Farbe der Statusleiste am oberen Rand weiß sein. Dadurch werden auch alle die Navigation Chrom um Browser-Fenster. Der zweite Punkt zwei Tags, um die Dateien, die Sie für Ihr Symbol und Startbildschirm verwenden.

Was kommt als Nächstes

Die HTML5-Spezifikation ist immer noch ein bewegliches Ziel. Halten Sie ein Auge für neue Entwicklungen. Das heißt, auch heute gibt es eine fantastische neue Funktionen in modernen Browsern. Wie Sie aus diesem Tutorial sehen können, ist es nicht schwer, eine Web-Anwendung offline zu nehmen, drastisch zu erhöhen ist es potenziellen Nutzen. Und wenn Sie offline gehen, zögern Sie nicht, nehmen Sie mit YUI 3, zusammen mit allen Funktionen, die Sie aus dem YUI 3 Galerie und das YUI 2 Widget Familie gewöhnt ist.

Sagen und erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

9 Kommentare »

RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URI

Ich weiß, dass der Punkt hier ist, Demo, aber wir müssen noch Code, der im realen Leben genutzt werden könne. Es könnte ein Fehler sein auf Browsern, die Unterstützung dont navigator.online
Sie testen diese Weise
var online = (navigator.online)? true: false;
so ein IE wird immer der Ansicht, dass es offline ist, weil die Eigenschaft nicht vorhanden ist, während der Anwendung funktionieren könnte zumindest online
Kommentar von jpvincent - 28. Mai 2010 #
Gestoppt Lesung in? true: false.
Kommentar von hj - 28. Mai 2010 #
Beide FF 3.6.3 und Chrome 6dev keine Eigenschaft navigator.online aber navigator.onLine. Mit großen L.
Kommentar von Matjaž Lipuš - 28. Mai 2010 #
Ich würde gerne HTML5 umarmen, aber es ist nicht wenig zu früh, um auf HTML5 Wagen zu springen?
basierend auf wikipedia heißt es:
Zitat aus Wikipedia:
"... HTML5-Spezifikation erwartet, dass die Spezifikation des W3C Candidate Recommendation Phase im Jahr 2012 zu erreichen, und W3C-Empfehlung im Jahr 2022 oder später ...."
Kommentar von Levan - 28. Mai 2010 #
@ Jpvincent die navigator.onLine wurde in IE seit 4.0.
@ Matjaž Lipuš Sie richtig sind. Diese eigentlich überall der Fall nicht nur das iPhone. Wir haben den Fehler in dem Artikel fest, und ich habe es auch in meinem Code behoben.
@ Levan HTML5 ist ein bewegliches Ziel, aber Browser haben Teile davon umgesetzt bereits. Auch Handys und anderen mobilen Geräten mit nur wahrscheinlich beginnen mit HTML5-Funktionen. Auch in Zukunft, so scheint es, als ob die Standards Group ist eine neue nicht-Zahl Versionierung Sequenz bewegt. Also im Grunde haben wir gewohnt sehen so etwas wie "HTML7" die Spezifikation wird weiterhin entwickelt sich langsam, und Entwickler müssen Entscheidungen über die einzelnen Merkmale, anstatt zu versuchen, damit entschieden, ob sie gehen, um das Ganze zu unterstützen.
Kommentar von Alexander Kessinger - 28. Mai 2010 #
[...] Eine Einführung zur Anwendung YUI 3 im Offline-Anwendungen Eine der großartigen Features in HTML5 ist die Anwendungs-Cache, die Webseiten die Möglichkeit gibt, den Browser-Cache-Dateien, die zu erzählen und die Cache-Dateien verwenden, wenn der Browser doesn ' t haben eine Netzwerkverbindung. Sie können den Anwendungs-Cache, um sicherzustellen, dass ein Benutzer in der Lage sein, zumindest einen Teil Ihrer Anwendung zugreifen, während er offline ist. (Tags: html javascript 2010) Scritto il 30/05/10 da giorgio_v. [...]
Pingback von Links 2010.05.30 - ReFactor.it - 30. Mai 2010 #
Typo: "... und dass Sie wan die Farbe der Statusleiste ..."
"Wan" s / b "wollen"
Kommentar von Kovacs - 30. Mai 2010 #
[...] Oder Speicherung in Datenbanken zu speichern Ihre Komponenten. Alex Kessinger jüngsten YUI Blog post, Eine Einführung in die Verwendung von YUI 3 im Offline-Anwendungen könnten von Interesse für YUI 3 Entwickler erwägen diese [...]
Pingback von Mobile Browser-Cache-Limits: Android, Ios und webOS »Yahoo! User Interface Blog (YUIBlog) - 28. Juni 2010 #
Meine Beobachtungen über die Same-Origin-Aspekt:
Wie pro meinen Tests und Lesen der Spezifikation [1], die Same-Origin-Einschränkung gilt nur für die explizite Bezugnahme Cache Einträge, wenn Sie den Zugriff auf das Manifest über https (oder eine andere sichere Protokoll).
Also im obigen Beispiel, wie es scheint, es wäre in Ordnung, YUI-Code aus dem EUR ziehen haben. Es sollte noch für die Offline-Verwendung zwischengespeichert bekommen. Ich würde daran interessiert zu wissen, wenn Sie nichts anderes zu sehen.
[1] HTML 5, Parsing Offline Cache Manifests (siehe Punkt 28: Analysieren von Tokens)
Kommentar von Satyen Desai - 12. Oktober 2010 #

Einen Kommentar schreiben

Yahoo! User Interface Blog (YUIBlog)