HTML5 prend-il en charge les applications hors ligne ?

html5 prend en charge les applications hors ligne. L'application hors ligne est une nouvelle fonctionnalité de HTML5, qui utilise le mécanisme de mise en cache locale afin que les utilisateurs puissent toujours utiliser des pages Web ou des applications sans réseau. Pour que l'application Web fonctionne normalement hors ligne, tous les fichiers de ressources qui constituent l'application Web, tels que les fichiers HTML, les fichiers CSS et les fichiers de script JavaScript, doivent être placés dans le cache local de sorte que lorsque le serveur n'est pas connecté à le réseau Vous pouvez également utiliser les fichiers de ressources du cache local pour exécuter l'application normalement.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

HTML5 a ajouté des applications hors ligne Grâce au mécanisme de mise en cache locale, les applications hors ligne nous permettent d'utiliser des pages Web ou des applications même en l'absence de réseau. Lorsque le client ne dispose pas de connexion locale avec le serveur de l'application Web, l'application Web peut être utilisée localement sur le client pour effectuer normalement les opérations associées.

Pour que l'application Web fonctionne correctement même hors ligne, tous les fichiers de ressources qui constituent l'application Web, tels que les fichiers HTML, les fichiers CSS et les fichiers de script JavaScript, doivent être placés dans le cache local. connecté au réseau Une fois connectés, les fichiers de ressources dans le cache local peuvent également être utilisés pour exécuter normalement l'application Web.

L'utilisation d'applications hors ligne nécessite les étapes suivantes :

• Détection hors ligne (déterminer si Internet est connecté)

• Accéder à certaines ressources

• Il existe un espace local de sauvegarde des données (cela ne gêne pas que vous soyez en ligne ou non) Lire et écrire)

Utiliser l'application Web hors ligne HTML5

1 Comment vérifier la prise en charge du navigateur

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

2. celles qui doivent être mises en cache et celles qui n'ont pas besoin d'être mises en cache pour une utilisation hors ligne. L'extension du fichier de description était auparavant .manifest, mais il est désormais recommandé d'utiliser .appcache, et le fichier de description doit être configuré avec le type MIME correct, c'est-à-dire "text/cache-manifest", qui doit être configuré sur le serveur web (l'encodage du fichier doit être UTF -8). Différents serveurs ont différentes méthodes de configuration, qui ne sont pas détaillées ici.

La première ligne doit commencer par la chaîne suivante

    CACHE MANIFEST

Le reste est l'URL du fichier à mettre en cache, une par ligne (l'URL relative est relative au fichier manifeste, pas au fichier)

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

Dans ce fichier Tout les fichiers répertoriés seront mis en cache. Dans le manifeste, vous pouvez utiliser un en-tête de zone spécial pour identifier le type d'élément du manifeste après les informations d'en-tête. Le cache le plus simple ci-dessus appartient à la zone « CACHE : ».

Comme ça

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

Les fichiers répertoriés dans la zone commençant par « RÉSEAU : » sont toujours obtenus en ligne et ne sont pas mis en cache

RÉSEAU : les informations d'en-tête prennent en charge le caractère générique « * », ce qui signifie que toutes les ressources qui sont non explicitement répertorié sera Sera chargé sur le réseau

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

Le contenu de la zone commençant par "FALLBACK :" fournit un chemin de ressource alternatif lorsque les ressources mises en cache ne peuvent pas être obtenues

Le contenu de cette zone, chaque ligne contient deux URL (la première La première URL est un préfixe, toutes les ressources correspondantes ne seront pas mises en cache, la deuxième URL représente la ressource qui doit être mise en cache)

    FALLBACK:
    name/  example.html

Une liste peut avoir n'importe quel nombre de zones et il n'y a aucune restriction sur les emplacements .

3. Créer une application hors ligne

Supposons que nous souhaitions créer une application d'une seule page contenant du CSS, du js et du HTML, et en même temps ajouter une prise en charge hors ligne à cette application d'une seule page.

Pour associer le fichier de description à la page, vous devez utiliser l'attribut manifest de la balise html pour spécifier le chemin du fichier de description

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

La première étape du développement d'une application hors ligne consiste à détecter si l'appareil est hors ligne

HTML5 a ajouté l'attribut navigator.onLine

Lorsque cet attribut est vrai, cela signifie en ligne, et lorsqu'il est faux, cela signifie hors ligne

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

  
  ** Remarque : les navigateurs IE6 et supérieurs et d'autres navigateurs standard prennent en charge cela attribut**

événement en ligne (pris en charge par le navigateur IE9+)

Cet événement est déclenché lorsque le réseau passe de hors ligne à en ligne. Cet événement est déclenché sur la fenêtre sans actualisation.

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

événement hors ligne (pris en charge par). Navigateur IE9+)

Lorsque le réseau passe de l'état en ligne Cet événement est déclenché en mode hors connexion Comme l'événement en ligne, cet événement est déclenché sur la fenêtre et n'a pas besoin d'être actualisé

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

  
  Cache d'application

Le cache d'application est un cache. séparée de la zone de cache du navigateur (la taille dépend du navigateur spécifique, généralement 5 Mo)

La différence entre le cache d'application et le cache de page Web :

Le cache d'application sert l'ensemble de l'application Web et le cache de page Web sert une seule page Web. page

Le cache de l'application ne met en cache que la page spécifiée Les ressources spécifiées requises (peuvent être contrôlées manuellement), toute page Web dispose d'un cache de page Web (comportement par défaut du navigateur)

• Le cache de l'application ne disparaîtra pas lorsque le cache du navigateur est vidé
• Le cache de l'application ne sera pas comme le cache de la page Web, les anciennes données seront remplacées par les dernières nouvelles données
• Le cache de l'application est accessible hors ligne, le cache Web doit être accessible en ligne
• Le cache de l'application est fiable et contrôlable, le le cache Web est incontrôlable
• Avantages du cache d'application
• • 离线浏览
  • 速度更快--已缓存资源加载更快
  • 减少负载--浏览器只从服务器下载更新过的文件

  一个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视频教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!