Ankündigung

Einklappen
Keine Ankündigung bisher.

appcache Manifest

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    [Codebeispiel] appcache Manifest

    Moin,

    da ich bei Verwendung der HomeScreen Funktion auf dem iPad ständig in den Cache gelaufen bin (PageCache ist deaktiviert), hatte ich in einem anderen Beitrag schon mal eine "appcache.manifest" Datei erwähnt die ich bei Changes manuell modifiziert hatte, wodurch der HomeScreen App dann mitgeteilt wurde das Dateien zu refreshen wären.

    Nachdem mir das jetzt aber etwas auf die Nerven ging für jede kleine Änderung die Datei anzupassen habe ich etwas recherchiert und als Lösung gefunden, dass es möglich ist PHP-Code in der Manifest-Datei zu verwenden, bzw. eine PHP-Datei als Manifest zu nutzen.

    Das Ergebnis sieht wie folgt aus:

    PHP-Code:
    <?php
        header
    ("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
        
    header("Pragma: no-cache");
        
    header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
        
    header('Content-type: text/cache-manifest');
        
        
    $hashes "";
        
        function 
    printFiles($path '.'$subDir ''){
            global 
    $hashes;
            
    $dir = new RecursiveDirectoryIterator($path);
            
    $files = new RecursiveIteratorIterator($dirRecursiveIteratorIterator::SELF_FIRST);
            while (
    $files->valid()) {
                
    $file $files->current();
                
    $isDot substr($file->getFilename(), 01) === ".";

                if (
    $isDot) {
                    
    $files->next();
                    continue;
                }
                
                if (
                    
    $file->isFile()
                    && 
    $file->getFilename() !== 'cache.manifest.php'
                
    ) {
                    echo 
    $subDir $file->getFilename() . "\n";
                    
    $hashes .= md5_file($file);
                }

                if (
    $file->isDir()) {
                    
    printFiles($path '/' $file->getFilename(), $file->getFilename() . DIRECTORY_SEPARATOR);
                }

                
    $files->next();
            }
        }
    ?>
    CACHE MANIFEST
    <?php
        printFiles
    ();
        
    // version hash changes automatically when files are modified
        
    echo "#VersionHash: " md5($hashes) . "\n";
    ?>

    NETWORK:
    *

    FALLBACK:

    Schöner finde ich es mit foreach, da ich aktuell aber in einer Ubuntu VM über Parallels entwickle und hier wohl ein PHP-Bug beim DirectoryIterator besteht verwende ich stattdessen "while".

    Wer es ausprobieren mag kann die "While"-Schleife durch "foreach" ersetzen:

    PHP-Code:
    foreach($files as $file) {
        
    $isDot substr($file->getFilename(), 01) === ".";
        if (
    $isDot) {
            continue;
        }
                
        if (
            
    $file->isFile()
            && 
    $file->getFilename() !== 'cache.manifest.php'
        
    ) {
            echo 
    $subDir $file->getFilename() . "\n";
            
    $hashes .= md5_file($file);
        }

        if (
    $file->isDir()) {
            
    printFiles($path '/' $file->getFilename(), $file->getFilename() . DIRECTORY_SEPARATOR);
        }


    Eingebunden habe ich die Datei dann im "HTML"-Tag meiner "base.html"

    HTML-Code:
    <html manifest="pages/{{ config_pages }}/cache.manifest.php">
    Und damit die neue Version auch automatisch geladen wird habe ich noch ein Script in meine "visu.js" gepackt:
    Schön wäre vermutlich noch ein Hinweis für den Benutzer, dass es ein Update gibt und die Seite neu geladen wird, aber mir passt das während der Entwicklung ganz gut wenn ich nicht jedes mal "Ok" drücken muss.

    Code:
    function updateSite(event) {
    	window.applicationCache.swapCache();
    	window.location.reload();
    }
    window.applicationCache.addEventListener('updateready', updateSite, false);

    Vielleicht hilft das dem ein oder anderen, oder vll. benutze ich auch nur irgendwas falsch, das der AppCache mir ständig verweigert meine Anpassungen an der Visu zu sehen.... ;-)


    Gruß,

    Lars

    #2
    Hi Lars,

    +1 für das Teilen.

    Muss ich mal bei Gelegenheit testen.

    Bis bald

    Marcus

    Kommentar


      #3
      Hallo,

      ich habe das gerade getestet. Ich habe die php-Datei im pages/meineVisu/ Ordner gespeichert und den manifest-tag in der pages/meineVisu/base.html hinzugefügt. Die Seite funktioniert offline aber nicht. (also auch der statische nicht; es ist klar, dass keine Werte angezeigt werden können, aber offline sollte ich doch die Inhalte sehen, oder?).

      Wenn ich die php-Datei ausführe, sieht der Output so aus:
      Code:
      /var/www/visu/pages/meineVisu# php ./cache.manifest.php
      
      CACHE MANIFEST
      rooms.html
      widget_list.html
      widget_popup.html
      licht.html
      eg.arbeiten.html
      aa.garten.html
      00ws.html
      heizung.html
      system.html
      widget_shutter.html
      eg.wohnen.html
      menu.html
      kalender.html
      eg.flur.html
      telefon.html
      qlock.css
      eg.gaeste.html
      qlock.html
      widget_visu.html
      rollos.html
      dg.till.html
      haustechnik.html
      dg.schlafen.html
      eg.gaestebad.html
      index.html
      00_schoenes_beispiel_ws.html
      dg.kinderbad.html
      eg.essen.html
      m.xbmc.html
      00wp.html
      dg.flur.html
      m.squeezebox.html
      dg.lina.html
      README.md
      navigation.html
      base.html
      myButtons.html
      visu.js
      qlock.js
      widget_ext.html
      visu.css
      dg.elternbad.html
      widget_rgb.html
      #VersionHash: 066f21679ebf285a0c371419645822ce
      Das sieht ja erstmal gut aus. Ein Pfad sollte da auch nicht nötig sein, oder?
      Hm.. Oder doch?
      Die html kann ich ja direkt nur unter
      https://192.168.177.3/visu/pages/meineVisu/rooms.html und nicht unter
      https://192.168.177.3/visu/rooms.html
      oder
      https://192.168.177.3/rooms.html

      erreichen?
      Das alleine würde aber ja auch nicht reichen, da die Seiten doch noch von twig (?) verarbeitet werden müssen...

      Oh oh, böses Halbwissen... natürlich könnte das alles auch auf dem Endgerät passieren...

      Aber warum funktioniert's dann nicht?

      Edit: Und die verwendeten Icons müssten auch noch hinzugefügt werden, oder?

      Gruß,
      Hendrik

      Kommentar


        #4
        Hey,

        Normalerweise sollte der Pfad mit angegeben sein. Hast du die Version mit "While" verwendet oder die ForEach?
        In letzterer ist noch ein Fehler glaube ich. Da hatte ich den Iterator nicht richtig, muss ich zu Hause mal drauf gucken. Ich melde mich dazu noch mal, bin gerade nur mobil unterwegs.

        Seit gestern ist mein Smarthome bzw. Smartvisu endlich von der Entwicklungs VM auf n richtiges System umgezogen, da sollten beide Versionen lauffähig sein.

        Grüße,

        Lars

        Gesendet von meinem GT-I9300 mit Tapatalk

        Kommentar


          #5
          Hallo,

          danke für deine schnelle Antwort!
          Zitat von Shai Beitrag anzeigen
          Normalerweise sollte der Pfad mit angegeben sein.
          Welcher Pfad?
          In meinem Fall:
          Code:
          /visu/pages/meineVisu/rooms.html 
          oder
          /visu/rooms.html
          Wie gesagt:
          Die Pages liegen unter var/www/visu/pages/meineVisu/rooms.html und ist erreichbar über
          https://192.168.177.3/visu/

          Hast du die Version mit "While" verwendet oder die ForEach?
          Nein, ich nutze die while-Version.

          Gruß,
          Hendrik

          Kommentar


            #6
            Hm...
            Ich sehe gerade:
            Unter chrome://appcache-internals/ findet sich die Visu nicht.

            Hier zur Sicherheit nochmal mein Code:
            /var/www/visu/pages/meineVisu/base.html
            Code:
            /**
             * -----------------------------------------------------------------------------
             * @package     smartVISU
             * @author      Martin Gleiß
             * @copyright   2012
             * @license     GPL <http://www.gnu.de>
             * ----------------------------------------------------------------------------- 
             */
            <!DOCTYPE html> 
            
            <html> 
            <html manifest="pages/{{ config_pages }}/cache.manifest.php">
            <head> 
            	<title>{{ config_title }}</title>
            /var/www/visu/pages/meineVisu/visu.js
            ganz unten
            Code:
            [...]
            function updateSite(event) {
            	window.applicationCache.swapCache();
            	window.location.reload();
            }
            window.applicationCache.addEventListener('updateready', updateSite, false);
            Das ist doch richtig, oder?

            Gruß,
            Hendrik

            Kommentar


              #7
              Hast du im HTML Tag auch das Manifest verlinkt?
              Also in de root.html?
              Base.html hat doch nicht mehr das öffnende Tag, oder?

              Das Javascript ist dafür da dass die Seite neu geladen wird, wenn sich etwas an den Dateien verändert hat, also wenn der Cache invalide ist.

              Gesendet von meinem GT-I9300 mit Tapatalk

              Kommentar


                #8
                Zitat von Shai Beitrag anzeigen
                Hast du im HTML Tag auch das Manifest verlinkt?
                Ja, ich meine doch. Bin jetzt etwas verwirrt. Du meinst doch das hier:
                Code:
                /var/www/visu/pages/meineVisu/base.html
                Code:
                /**
                 * -----------------------------------------------------------------------------
                 * @package     smartVISU
                 * @author      Martin Gleiß
                 * @copyright   2012
                 * @license     GPL <http://www.gnu.de>
                 * ----------------------------------------------------------------------------- 
                 */
                <!DOCTYPE html> 
                
                <html manifest="pages/{{ config_pages }}/cache.manifest.php">
                <head> 
                	<title>{{ config_title }}</title>

                Also in de root.html?
                Jetzt bin ich noch mehr verwirrt..
                worein muss der Verweis auf das Manifest nun:
                /var/www/visu/pages/base/root.html
                oder
                /var/www/visu/pages/meineVisu/root.html
                ?

                Base.html hat doch nicht mehr das öffnende Tag, oder?
                Hab ich korrigiert. Trotzdem landet nix im appcache (laut Debug-Console des Chrome).


                Davon ab:
                kannst du dazu noch was sagen?
                Zitat von Shai Beitrag anzeigen
                Normalerweise sollte der Pfad mit angegeben sein.
                Welcher Pfad?
                In meinem Fall:
                Code:
                /visu/pages/meineVisu/rooms.html 
                oder
                /visu/rooms.html
                Wie gesagt:
                Die Pages liegen unter var/www/visu/pages/meineVisu/rooms.html und ist erreichbar über
                https://192.168.177.3/visu/
                und:
                Edit: Und die verwendeten Icons müssten auch noch hinzugefügt werden, oder?

                (Du bist ja unterwegs und ich weiß wie doof das vom Handy ist. Hat Zeit!

                Gruß,
                Hendrik

                Kommentar


                  #9
                  So


                  3 Dinge.

                  1. Ich habe das Manifest.php mal verkürzt / vereinfacht.

                  Code:
                  <?php
                  /**
                   * Iterates through every directory and generate a manifest file.
                   * If any file change occurs, the manifest changes and the browser triggers an
                   * application refresh.
                   */
                  
                  header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
                  header("Pragma: no-cache");
                  header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
                  header('Content-type: text/cache-manifest');
                  
                  $hashes = "";
                  
                  function printFiles($path = '.', $subDir = ''){
                  	global $hashes;
                  	
                  	$objects = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($path));
                  	foreach($objects as $name => $file) {
                  		if ($file->isFile() && $file->getFilename() !== 'cache.manifest.php') {
                  			echo substr($name, 2) . "\n";
                  			$hashes .= md5_file($file);
                  	 	}
                  	}
                  }
                  ?>
                  CACHE MANIFEST
                  <?php
                  printFiles();
                  // version hash changes automatically when files are modified
                  echo "#VersionHash: " . md5($hashes) . "\n";
                  ?>
                  
                  NETWORK:
                  *
                  
                  FALLBACK:

                  2. Manifest einbinden

                  Seit der SmartVisu 2.7 gibt es die "root.html" da muss das HTML-Tag erweitert werden.

                  root.html Zeile 11:

                  Code:
                  <html manifest="pages/{{ config_pages }}/cache.manifest.php" type="text/cache-manifest">

                  3. Ergebis

                  Ergebnis wenn ich die PHP Datei direkt ausführe gibt mir die Dateien inkl. relativem Pfad zu den Dateien in Unterordnern.

                  Code:
                  CACHE MANIFEST
                  ._cache.manifest.php
                  visu.js
                  base.html
                  menu.html
                  widgets/widget_shutter_small.html
                  widgets/widget_rtr_extended.html
                  widgets/calendar.html
                  widgets/widget_rtr_small.html
                  base.html.bak
                  floors/eg/garten.html
                  floors/eg/wc.html
                  floors/eg/flur.html
                  floors/eg/garage.html
                  floors/eg/eingang.html
                  floors/eg/kueche.html
                  floors/eg/wohnzimmer.html
                  floors/._.DS_Store
                  floors/.DS_Store
                  floors/og/bad.html
                  floors/og/kind1.html
                  floors/og/kind2.html
                  floors/og/schlafzimmer.html
                  rooms.html
                  ._root.html
                  navigationList_static.html
                  qlock/qlock.js
                  qlock/qlock.css
                  qlock/qlock.html
                  visu.css
                  ._.DS_Store
                  visu.css~
                  navigation.html
                  root.html
                  stats/._smarthome.html
                  stats/._heizung.html
                  stats/._rolllaeden.html
                  stats/._system.html
                  stats/._licht.html
                  stats/rolllaeden.html
                  stats/smarthome.html
                  stats/heizung.html
                  stats/system.html
                  stats/navigation.html
                  stats/licht.html
                  stats/._navigation.html
                  .DS_Store
                  index.html
                  ._visu.js
                  js/jquery.idle-timer.min.js
                  #VersionHash: d41d8cd98f00b204e9800998ecf8427e
                  
                  NETWORK:
                  *
                  
                  FALLBACK:

                  Kommentar


                    #10
                    Hallo,



                    das hier war im falschen Thread gelandet:
                    So, ich hab's:

                    Ich hatte das manifest über Cache Manifest Validator validiert. Jetzt ist mir aber aufgefallen.
                    Wenn ich das cache.manifest.php im Browser öffne, dann startet es mit einer Leerzeile.

                    Mit dieser Leerzeile ist das invalide.

                    Aber woher kommt die Leerzeile?
                    Ich hab das Skript mal angehängt, wie ich es gespeichert habe. Da sehe ich aber nicht, wo die Leerzeile herkommt.

                    Ich habe derweil das Skript mal durch dessen Output ohne Leerzeile ersetzt. Dadurch kommt in der Debug-Console auch einiges im Appcache an (s.Anhang). Offline funktioniert die Seite aber dennoch nicht ("Error Loading Page")

                    Gruß,
                    Hendrik
                    Deine Änderungen hab ich übernommen.
                    Damit funktioniert es in sofern, dass im Debug-Fenster vom Chrome der AppCache gefüllt wird.

                    Wenn ich nun aber WLAN deaktiviere und eine andere Seite der Visu öffne, dann kommt "Error Loading Page" als Popup.

                    Ist das normal?

                    Gruß,
                    Hendrik

                    Kommentar


                      #11
                      Ich befürchte ja.

                      Ein "offline"-Modus wird glaube ich nicht funktionieren, da "jquery" beim Seiten-Wechsel einen Ajax-Request ausführt, der aber nicht aus dem Cache bedient werden kann.
                      Im Hintergrund müsste zudem PHP ausgeführt werden, da aber keine Verbindung zum Server besteht passiert das natürlich nicht.

                      Der Browser cached halt Bilder, JavaScripte, CSS etc... ersetzt allerdings kein PHP-Backend.


                      Mein Anwendungsfall für die Manifest Datei ist / war halt das Änderungen an meinen Pages auch im Client ankommen, da eine geänderte Datei zu einer veränderten Manifest-Version führt und ich so automatisch refreshen kann.

                      Gerade in der Entwicklung ist son Browser-Cache manchmal n ganz schöner Bastard

                      Kommentar


                        #12
                        Zitat von Shai Beitrag anzeigen
                        Ein "offline"-Modus wird glaube ich nicht funktionieren, da "jquery" beim Seiten-Wechsel einen Ajax-Request ausführt, der aber nicht aus dem Cache bedient werden kann.
                        Verstehe. Aber: Wofür ist dieser Request?

                        Im Hintergrund müsste zudem PHP ausgeführt werden, da aber keine Verbindung zum Server besteht passiert das natürlich nicht.

                        Der Browser cached halt Bilder, JavaScripte, CSS etc... ersetzt allerdings kein PHP-Backend.
                        Dass der appcache kein php-Backend ersetzt ist mir klar. Mein Verständnis war aber, dass das PHP-Backend nur aus den *.html im pages-Order (die mit den {} als Platzhalter) die html-Daten macht, die dann ausgeliefert werden. Und dass im Falle des angeschalteten pagecache (nicht appcache) auf Server-Seite die html-Dateien statisch vorgehalten werden und php gar nicht aktiv wird.
                        Ist das falsch?

                        In dem Falle/unter der Annahme sehe ich nicht, warum ein Seitenwechsel nicht klappt.

                        Wie auch immer:
                        Es ist ja prinzipiell nicht wichtig, dass die Seiten Offline funktionieren. Eine Visualisierung lebt natürlich von den Daten/Inhalten.

                        Ich wollte ja nur rausfinden, ob tatsächlich de Appcache genutzt wird.

                        Gruß,
                        Hendrik

                        Kommentar

                        Lädt...
                        X