Unterstützt HTML5 Offline-Anwendungen?

html5 unterstützt Offline-Anwendungen. Offline-Anwendungen sind eine neue Funktion von HTML5, die den lokalen Caching-Mechanismus nutzt, sodass Benutzer Webseiten oder Anwendungen auch ohne Netzwerk nutzen können. Damit die Webanwendung offline ordnungsgemäß funktioniert, müssen alle Ressourcendateien, aus denen die Webanwendung besteht, z. B. HTML-Dateien, CSS-Dateien und JavaScript-Skriptdateien, im lokalen Cache abgelegt werden, sodass sie auch dann im lokalen Cache abgelegt werden, wenn keine Verbindung zum Server besteht Das Netzwerk Sie können auch Ressourcendateien im lokalen Cache verwenden, um die Anwendung normal auszuführen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML5 hat Offline-Anwendungen hinzugefügt. Mithilfe des lokalen Caching-Mechanismus können wir mit Offline-Anwendungen Webseiten oder Anwendungen auch dann verwenden, wenn kein Netzwerk vorhanden ist. Wenn der Client keine lokale Verbindung mit dem Server der Webanwendung hat, kann die Webanwendung lokal auf dem Client verwendet werden, um zugehörige Vorgänge normal auszuführen.

Damit die Webanwendung offline normal funktioniert, müssen alle Ressourcendateien, aus denen die Webanwendung besteht, wie HTML-Dateien, CSS-Dateien und JavaScript-Skriptdateien, im lokalen Cache abgelegt werden, wenn der Server nicht verbunden ist an das Netzwerk Wenn eine Verbindung besteht, können Ressourcendateien im lokalen Cache auch zum normalen Ausführen der Webanwendung verwendet werden.

Die Verwendung von Offline-Anwendungen erfordert die folgenden Schritte:

• Offline-Erkennung (feststellen, ob eine Internetverbindung besteht)

• Zugriff auf bestimmte Ressourcen

• Es gibt einen lokalen Speicherplatz zum Speichern von Daten (dies behindert nicht Ob Sie online sind oder nicht) Lesen und Schreiben

Verwenden Sie eine HTML5-Offline-Webanwendung

1. So überprüfen Sie die Browserunterstützung

  if(window.applicationCache){
        //浏览器支持离线应用
  }

2. Über Beschreibungsdateien
Die Beschreibungsdatei wird verwendet, um diese aufzulisten Ressourcen, die zwischengespeichert werden müssen, und solche, die nicht zwischengespeichert werden müssen, sind Ressourcen zur Offline-Nutzung.
Die Erweiterung der Beschreibungsdatei war früher .manifest, aber jetzt wird empfohlen, .appcache zu verwenden, und die Beschreibungsdatei muss mit dem richtigen MIME-Typ konfiguriert werden, d. h. „text/cache-manifest“. muss auf dem Webserver konfiguriert sein (die Dateikodierung muss UTF-8 sein). Verschiedene Server verfügen über unterschiedliche Konfigurationsmethoden, die hier nicht näher erläutert werden.

Die erste Zeile muss mit der folgenden Zeichenfolge beginnen

    CACHE MANIFEST

Der Rest ist die URL der Datei, die zwischengespeichert werden soll, eine pro Zeile (die relative URL bezieht sich auf die Manifestdatei, nicht auf die Datei)

    #以“#”开头的是注释
    common.css
    common.js

Auf diese Weise gilt: In dieser Datei werden alle aufgelisteten Dateien zwischengespeichert. Im Manifest können Sie einen speziellen Bereichsheader verwenden, um den Typ des Manifestelements nach den Headerinformationen zu identifizieren. Der einfachste Cache oben gehört zum Bereich „CACHE:“.

Gefällt mir

    #该头信息之后的内容需要缓存    CACHE:
    common.css
    connom.js

Die im Bereich, der mit „NETWORK:“ beginnt, aufgeführten Dateien werden immer online abgerufen und nicht zwischengespeichert

NETWORK: Die Header-Informationen unterstützen das Platzhalterzeichen „*“, was bedeutet, dass alle Ressourcen vorhanden sind Nicht explizit aufgeführte Dateien werden über das Netzwerk geladen URLs (die erste Die erste URL ist ein Präfix, alle übereinstimmenden Ressourcen werden nicht zwischengespeichert, die zweite URL stellt die Ressource dar, die zwischengespeichert werden muss)

    #该头信息之后的内容不需要缓存，总是从线上获取
    NETWORK:
    a.css
    #表示以name开头的资源都不要缓存
    name/

Eine Liste kann eine beliebige Anzahl von Bereichen haben und es gibt keine Einschränkungen hinsichtlich der Standorte .

3. Erstellen Sie eine Offline-Anwendung
Angenommen, wir möchten eine einseitige Anwendung mit CSS, JS und HTML erstellen und dieser einseitigen Anwendung gleichzeitig Offline-Unterstützung hinzufügen.

Um die Beschreibungsdatei mit der Seite zu verknüpfen, müssen Sie das Manifest-Attribut des HTML-Tags verwenden, um den Pfad der Beschreibungsdatei anzugeben

    FALLBACK:
    name/  example.html

Der erste Schritt bei der Entwicklung einer Offline-Anwendung besteht darin, zu erkennen, ob das Gerät offline ist

HTML5 hat ein neues navigator.onLine-Attribut

Wenn dieses Attribut wahr ist, bedeutet es online, und wenn es falsch ist, bedeutet es offline

    <html manifest=&#39;./offline.appcche&#39;>

** Hinweis: Browser ab IE6 und höher sowie andere Standardbrowser unterstützen dies Attribut**

• 
  Online-Ereignis (unterstützt vom Browser IE9+)

Dieses Ereignis wird ausgelöst, wenn das Netzwerk von offline auf online wechselt. Dieses Ereignis wird im Fenster ohne Aktualisierung ausgelöst.

  if(navigator.onLine){      //联网  }else{      //离线  }

• offline-Ereignis (unterstützt von IE9+ Browser)
Wenn das Netzwerk vom Online-Modus wechselt, wird dieses Ereignis ausgelöst, wenn es offline ist.

 window.online = function(){        //需要触发的事件    }

Application Cache

• Application Cache ist ein vom Browser getrennter Cache Cache-Bereich (Größe hängt vom jeweiligen Browser ab, normalerweise 5 MB)
  

  Der Unterschied zwischen Anwendungs-Cache und Webseiten-Cache:

Der Anwendungs-Cache dient der gesamten Webanwendung und der Webseiten-Cache dient einer einzelnen Webseite

Der Der Anwendungscache speichert nur die angegebene Seite im Cache. Die erforderlichen Ressourcen können manuell gesteuert werden. Jede Webseite verfügt über einen Webseitencache (Standardverhalten des Browsers).

Der Anwendungscache verschwindet nicht, wenn der Browsercache geleert wird.

Der Anwendungscache wird nicht wie der Webseiten-Cache sein, alte Daten werden durch die neuesten neuen Daten ersetzt
• Auf den Anwendungs-Cache kann offline zugegriffen werden, auf den Web-Cache muss online zugegriffen werden
• Der Anwendungs-Cache ist zuverlässig und kontrollierbar, der Web-Cache ist unkontrollierbar
• Vorteile des Anwendungscaches
• 离线浏览
• 速度更快--已缓存资源加载更快
• 减少负载--浏览器只从服务器下载更新过的文件

一个web应用首次下载并缓存之后，任何加载请求都优先来自于缓存，因此可以实现离线缓存。如果不需要使用离线缓存了，就需要在服务器端删除描述文件，或者删除HTML页面中的manifest属性。

一旦应用被缓存，则缓存始终不变。那么，怎样才能改变缓存

• 用户清空应用缓存
• manifest文件被修改
• 使用update()方法更新缓存

如果服务器上的文件有所修改的话，那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法

此外，我们还可以使用HTML5提供的API来操作和更新缓存

applicationCache API

applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
这个对象有一个status属性，值为常量，表示缓存状态

• 0：没有与页面相关的应用缓存（未缓存）
• 1：应用缓存未得到更新（空闲）
• 2：正在下载描述文件并检查更新（检查中）
• 3：应用缓存正在下载描述文件中指定的资源（下载中）
• 4：应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了（更新就绪）
• 5：应用缓存的描述文件不存在了，页面无法再访问应用缓存（已过期）

这个对象有以下事件，表示其状态的改变

• 每次载入一个设置了manifest属性的HTML文件，首先会触发checking事件
• 如果应用程序已经缓存，并且清单文件没有改动，则浏览器触发noupdate事件
• 如果应用程序已经缓存，并且清单文件发生改动，则浏览器触发downloading事件，下载完毕后触发updateready事件
• 如果应用程序未缓存，则downloading事件和progress事件都会触发，但是下载完成后触发cached事件而不是updateready事件
• 如果处于离线，无法检测清单状态，则触发error事件，如果引用一个不存在的清单文件，也会触发error事件
• 如果处于在线，应用也缓存了，但是清单文件不存在，则会触发obsolete事件，并将应用程序从缓存中清除。

一般来讲，这些事件会随着页面加载按上述顺序依次触发

update()方法

通过update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件

    applicationCache.update();

update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。

swapCache()方法

如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。

    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
    };

浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户

    window.applicationCache.onupdateready = function(){
        var con = comfirm('有新内容可用，是否重新加载？');
        if(con){
            location.reload();
        }
    }

相关推荐：《html视频教程》

Das obige ist der detaillierte Inhalt vonUnterstützt HTML5 Offline-Anwendungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!