Artikel
03/22/2017

Dieser Artikel wurde maschinell übersetzt.

HTML5

HTML5 Offlineanwendungen: "Donut Hole" Zwischenspeichern

Craig Schuster

Offline-HTML-Anwendungen können Sie Anwendungen erstellen, die ohne eine Internetverbindung mithilfe von Technologien von nativen an den Webbrowser zu arbeiten.Im offline-Anwendung enthaltene Seiten sind im Anwendungsmanifest und so aus dem Anwendungscache bedient werden, ob eine Verbindung mit dem Internet vorhanden ist.In manchen Fällen jedoch, können Wenn eine Internetverbindung verfügbar ist, Sie einige Daten vom Server angezeigt werden, ohne dass der Benutzer auf der Seite zu ändern.

Scott Guthrie führte das Konzept des Zwischenspeicherns "Donut Hole" in ASP.NET, wo eine zwischengespeicherte Seite kleine Fenster Inhalt enthalten können, die unabhängig von der zwischengespeicherte Seite aktualisiert werden.Dieses Lernprogramm demonstriert die Verwendung eine offline-Seite implementieren, die einen AJAX-Aufruf, wenn Sie mit dem Web verbunden, um live-Daten für den Benutzer angezeigt wird.Wenn Sie offline, rendert die Seite einfach Standarddaten auf der Seite.

Es gibt eine Reihe von praktischen Gründen zur Implementierung einer offline.Während die meisten Entwickler zuerst an den mobilen Kontext denken bei der Prüfung, die eine offline-Anwendung verwenden kann, kann fast jede Website mit einigen Verfügbarkeit unabhängig vom Verbindungsstatus der profitieren.Einer Site Home und kontaktieren Sie uns-Seiten sind ausgezeichnete Kandidaten für die Offlineverfügbarkeit, so dass Benutzer einige grundlegende Informationen über die Organisation erhalten können, selbst wenn getrennt.

Erstellen der Anwendung

Im Beispiel in diesem Lernprogramm wird veranschaulicht, wie eine Seite "Kontakt" Zwischenspeichern, die Benachrichtigungen über bevorstehende Ereignisse Benutzern angezeigt wird.Ist der Benutzer mit dem Web verbunden, wird eine Liste von Live-Ereignissen angezeigt. Anderenfalls erscheint eine Telefonnummer, unter der sich der Benutzer über Ereignisse informieren kann.Dadurch bleibt der Benutzer unabhängig von einer Verbindung zum Web auf dem Laufenden.

Abbildung 1 zeigt, wie die Seite gerendert wird, für die Offlineansicht, während Abbildung 2 zeigt, wie die Seite aussieht, wenn Sie aus dem Anwendungscache serviert, aber der Computer im Web verbunden ist.

When the User Is Working Offline, the Application Prompts Him to Call for Event Information
Abbildung 1, wenn der Benutzer Offline arbeitet, die Anwendung fordert ihn auf Aufforderung zur Ereignisinformationen

When the User Is Connected to the Internet, the Application Shows Event Information from the Server
Abbildung 2, wenn der Benutzer mit dem Internet verbunden ist, die Anwendung zeigt die Ereignisinformationen vom Server

Das Manifest

Das Anwendungsmanifest fungiert als die Masterliste der Ressourcen, die in den offline-Anwendung enthalten.Abbildung 3 die vollständige manifest-Datei für dieses Beispiel zeigt.

Abbildung 3-Manifest-Datei (manifest.aspx)

CACHE MANIFEST
# version 1
CACHE:
contact.htm
style.css
jquery-1.6.3.min.js
map.png
NETWORK:
events.htm
<%@Page
    ContentType="text/cache-manifest"
    ResponseEncoding = "utf-8"
    Language="C#" AutoEventWireup="true"
    CodeBehind="manifest.aspx.cs"
    Inherits="ConditionalCaching.manifest" %>
<script language="CS" runat="server">
  void Page_Load(object sender, System.EventArgs e)
    {
      Response.Cache.SetCacheability(HttpCacheability.NoCache);
    }
</script>

Die Datei beginnt mit den erforderlichen Header CACHE MANIFEST und enthält einen Kommentar Versionsverwaltung zulassen von Änderungen in der aufgelisteten Dateien an den Client weitergegeben werden.

Danach verweist der CACHE-Abschnitt die Kontakte-Seite für Benutzer unabhängig vom Verbindungsstatus der verfügbar sein sollen. Die Kontakte-Seite verweist auf ein Stylesheet, jQuery und ein Kartenbild, der angibt, den physischen Standort.

Schließlich "Netzwerk" in diesem Fall Zugang zu der Seite Achim gewährleistet erforderlich ist (angezeigt Abbildung 4). Der Grund, warum, den dieser Seite in den CACHE-Abschnitt enthalten ist, dient, da in der Praxis als serverseitig generierte Seite dynamisch auf der Ereignisseite erstellt werden würde. Eine Seite wie diese Zwischenspeicherung widerspricht es dazu, live-Ereignisdaten für den Benutzer, wenn Sie mit dem Web verbunden. Mit der Ereignisseite aufgeführt, die in Abschnitt CACHE, anstatt "Netzwerk" wird nicht die Anwendungscache-API versuchen, die Anforderung der Seite abbrechen. Schließlich teilt Aufnahme von der Seite "Netzwerk" den Browser immer versuchen, die Seite aus dem Web, unabhängig vom Status der Verbindung abzurufen.

Abbildung 4 Ereignisseite (Achim)

<table border="1" cellpadding="2" cellspacing="0">
  <tr>
    <td>Aug 15</td>
    <td><a href="/events/anaheim">Anahiem Convention Center</a></td>
  </tr>
  <tr>
    <td>Sept 5</td>
    <td><a href="/events/los-angeles">Los Angeles Convention Center</a></td>
  </tr>
  <tr>
    <td>Oct 3</td>
    <td><a href="/events/las-vegas">Las Vegas Convention Center</a></td>
  </tr>
  <tr>
    <td>Nov 14</td>
    <td><a href="/events/denver">Colorado Convention Center</a></td>
  </tr>
</table>

Beachten Sie, dass das Manifest als eine ASPX-Datei implementiert ist, zu der Datei die Browserzwischenspeicherung deaktivieren. Sie möchten die Zwischenspeicherung auf dem Webserver über Konfigurationseinstellungen deaktivieren, aber dieser Ansatz wird hier verwendet, um den Beispielcode zu Demonstrationszwecken besser übertragbar zu machen.

Die Seite Kontakt

Die Kontakt-Seite HTML-Format angezeigt, Abbildung 5, implementiert wird, wie zu erwarten, unabhängig davon, ob die Seite für den Offlinezugriff optimiert wird. Das wichtigste Detail Beachten Sie in der HTML-Code für die Seite wird der Inhalt des Absatzes mit der ID des LocalMessage. Dieser Container enthält den Inhalt, der angezeigt wird, wenn der Benutzer offline arbeitet. Dieser Inhalt ist ersetzten on-the-Fly, wenn eine Verbindung mit dem Internet verfügbar ist.

Abbildung 5-Kontakt-Seite (contact.htm)

<!DOCTYPE html>
<html manifest="manifest.aspx">
<head>
  <title></title>
  <link rel="Stylesheet" href="style.css" type="text/css" />
  <script src="jquery-1.6.3.min.js" type="text/javascript"></script>
  <script>
    $(function () {
      window.applicationCache.onupdateready = function (e) {
        applicationCache.swapCache();
        window.location.reload();
      }
      function isOnLine() {
        //return false;
        return navigator.onLine;
      }
      function showEventInfo() {
        if (isOnLine()) {
            $("#localMessage").hide();
            $.get("/events.htm", function (data) {
                $("#eventList").html(data);
                $("#eventList table tr:odd").addClass("alt");
            });
        }
        else {
          $("#localMessage").show();
        }
      }
      showEventInfo();
    });
  </script>
</head>
<body>
  <div id="container">
    <h1>Awesome Company</h1>
    <h2>Contact Us</h2>
    <p>
      Awesome Company<br />
      1800 Main Street<br />
      Anytown, CA 90210<br />
      (800) 555-5555<br />
      <a href="mailto:awesome@company.com">awesome@company.com</a>
    </p>
    <img src="map.png" />
    <div id="events">
      <h2>Events</h2>
      <p>We are coming to a city near you!</p>
      <p id="localMessage">Give us a call at (800) 555-5555
        to hear about our upcoming conference dates.</p>
      <div id="eventList"></div>
    </div>
    <div id="version">Version 1</div>
  </div>
</body>
</html>

Beachten Sie, dass im Skriptabschnitt der Seite, alle Funktionen definiert und ausgeführt werden, geschachtelt im Ereignishandler jQuery Dokument bereit:

$(function () {
    ...
});

Die erste Aufgabe ist zum Verarbeiten von Aktualisierungen für die Seite im Anwendungscache durch Behandlung des Ereignisses Updateready geladen. Wenn das Anwendungsmanifest Änderungen, werden alle in einem CACHE-Abschnitt aufgelisteten Dateien an den Client kopiert. Wenn neue Versionen der Dateien verfügbar sind, können das Updateready-Ereignis ausgelöst und die Seite die neueste Version von der Kontakt-Seite aus dem Cache von aufrufenden applicationCache.swapCache geladen werden. Schließlich, sobald die neueste Version in den Speicher geladen ist, wird die Seite neu geladen, um die Änderungen für den Benutzer anzuzeigen:

window.applicationCache.onupdateready = function (e) {
  applicationCache.swapCache();
  window.location.reload();
}

Als Nächstes benötigt die Seite einen Mechanismus, um festzustellen, ob der Computer, in einem Zustand verbunden oder nicht verbunden arbeitet. Die Funktion IsOnLine umschließt einfach einen Aufruf an die navigator.onLine für schreibgeschützte boolesche Eigenschaft. Diese Kapselung ist praktisch, weil Sie den Wert für Testzwecke überschreiben möchten, Sie un-Kommentar false Reklamationszeile können und Offlineverhaltens der Seite testen, ohne tatsächlich aus dem Internet trennen:

function isOnLine() {
  //return false;
  return navigator.onLine;
}

Verwenden navigator.onLine als des einzigen Mechanismus zum Erkennen von online-Status ist übrigens ein bisschen rudimentäre. Für eine weniger fehleranfällige Methode zum online-Status zu erkennen, lesen Sie bitte das Lernprogramm "außerhalb des Rasters HTML5 offline arbeiten," von Paul Kinlan.

Die ShowEvent-Funktion ist verantwortlich für die Implementierung der Funktionalität "Donut Hole caching" für die HTML-offline-Anwendung. Die Funktion zuerst erkennt den Status den Verbindung des Computers, und klicken Sie dann entweder Abrufe und rendert live-Event-Daten oder zeigt nur die Ereignisinformationen, die bereits auf der Seite.

Wenn die IsOnLine-Funktion true zurückgibt, ist die lokale Nachricht vom Benutzer ausgeblendet, und ein AJAX-Aufruf an die Ereignisseite initiiert wird. Wenn eine Antwort von der asynchrone Aufruf erkannt wird, ist das resultierende HTML an den Container EventList beschickt werden und in der Tabelle wird erstellt, in denen Zebra-Striping.

Wenn auf der anderen Seite der Computer offline arbeitet, wird die lokale Nachricht an den Benutzer angezeigt wie folgt:

function showEventInfo() {
  if (isOnLine()) {
      $("#localMessage").hide();
      $.get("/events.htm", function (data) {
        $("#eventList").html(data);
        $("#eventList table tr:odd").addClass("alt");
      });
  }
  else {
    $("#localMessage").show();
  }
}

Schließlich wird die Manifestdatei am oberen Rand der HTML-Seite verwiesen, indem Sie in das manifest-Attribut des html-Elements auf die manifest-Datei zeigen:

<html manifest="manifest.aspx">

Abbildung 6 zeigt die style.css-Datei, die im Manifest aufgelistet und die Kontakt-Seite verweist.

Abbildung 6-Stylesheet (style.css)

body
{
  font-family:Segoe UI, Arial, Helvetica, Sans-Serif;
  background-color:#eee;
}
h1
{
  text-transform:uppercase;
  letter-spacing:-2px;
  width:400px;
  margin-top:0px;
}
#container
{
  position:relative;
  margin-left:auto;
  margin-right:auto;
  padding:20px;
  width:700px;
  -webkit-box-shadow: 3px 3px 7px #999;
  box-shadow: 6px 6px 24px #999;
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-top:20px;
  background-color:#fff;
}
#events
{
  position:absolute;
  width:210px;
  right:20px;
  top:255px;
  border:1px solid #ccc;
  padding:10px;
  font-size:.7em;
  background-color:#eee;
}
#events h2
{
  margin:0px;
}
#version
{
  font-size:.7em;
  color:#ccc;
}
table
{
  border-collapse:collapse;
}
table, tr, td
{
  border:1px solid #999;
}
.alt
{
  background-color:#ccc;
}

Zusammenfassung

Auch wenn Seiten geladen Anwendungscache aus dem Cache bedient werden, ob der Computer mit dem Internet verbunden ist, können Sie Ihre Seiten nutzen von online-Ressourcen, wenn sie verfügbar sind, erstellen. "Donut Hole caching" funktioniert durch einen AJAX-Aufruf an den Server zu machen, wenn eine Verbindung verfügbar ist, und klicken Sie dann die Ergebnisse an dem Benutzer rendern. Wenn die Seite in einen getrennten Zustand ist, rendert die Anwendung ohne Eingriffe des Benutzers bereits auf der Seite verfügbaren Daten – Es ist das beste aus beiden Welten!

Resources

Craig Schuster ist ein Software-Entwickler, Podcaster, Blogger und Produkt-Guidance-Manager für Infragistics. Als Host für die Polymorphe Podcast und Pixel8, Schuster tut, was er am meisten liebt – einen Beitrag der Gemeinschaft, und zeichnen das beste aus der Informationsbranche. Schuster handelt es sich um eine Microsoft ASP.NET MVP, ASP-Insider-Geschäfte und Gast-Lautsprecher an verschiedene Benutzergruppen für Entwickler und messen. Er ist Mitverfasser von "Anfang ASP.NET 2.0 AJAX"(Wrox, 2007) und"am Anfang der ASP.NET AJAX"(Wrox, 2006), und ein Beitrag Autor zu Pluralsight, TekPub und CODE Magazine*.*In seiner Freizeit genießt Schuster, auf der Suche nach einem Heuhaufen, um seine Preis Nadel Sammlung ausblenden. Können Sie ihn auf Twitter @ Craigshoemaker oder per E-mail CShoemaker@infragistics.com.