Comment mettre en cache un site mobile en utilsant l'attribut manifest du HTML5 ?

Le manifest c'est quoi ?

En voilà une balise pratique, il existe de très bon tutoriel sur ce qu'est cette nouvelle balise ici. Mais pour résumer il s'agit d'un lien vers un fichier qui contient toute les routes que l'on souhaite mettre en cache où pas !

Controler du manifest

Tout d'abbord nous allons mettre un controler qui genera le fichier manifest automatiquement. On va lui mettre une route et on va appeller les objets pour lequels on souhaite modifier les routes. Autre point important il faudra préciser dans le header de la réponse que le type text/manifest. Sans cela les mobiles ne le reconnaîtrons pas comme un cache (Mais chrome si, ce qui m'a fait foirer une démo d'ailleurs). Ci dessous

/**

* @Route("manifest/", name="manifest_mobile")

* @Template()

public function buildManifestAction()

{

$response = new Response();

$response->headers->set('Content-Type', 'text/cache-manifest');

$response->sendHeaders();

        $articles = $this
                ->getDoctrine()
                ->getRepository('MyBundle:Article')
                ->findBy(array());
        return $this->render('MyBundle:Manifest:manifest.txt.twig',
                        array(
                    'articles' => $articles,
                     ),$response);
    }

Dans cette exemple certaines de mes ont besoins d'entité pour être généré cest pour cette raison que je les transmets au template. Une fois votre controler fait nous pouvons passer au template

Le template

Le template est assez rudimentaire il contient les ressources necessaires aux pages (Javascript, CSS) et les routes que l'on souhaite conserver. De plus vous pouvez définir des routes de remplacement en cas d'abscence de réseau. Mettez une étoile sur NetWork pour avoir accès à toute les URL une fois en ligne (Sauf si vous désirez faire une application full-off-line) N'oubliez pas de mettre des comentaire qui peuvent changer si le contenue est mis à jour. Cela permettra de mettre à jour votre cache si le contenue de la page change.

CACHE MANIFEST

# version

# Style

{{ asset('bundles/fabfotogallery/jquery.mobile-1.0.1/jquery.mobile.structure-1.0.1.css')}}

{{ asset('bundles/fabfotogallery/jquery.mobile-1.0.1/images/icons-18-white.png')}}

#Javascript

{{ asset('bundles/fabfotogallery/jquery.mobile-1.0.1/jquery.mobile-1.0.1.js')}}

#index new

#index of blog

{%forarticleinarticles%}

{{ path('show_article_blog_mobile', { 'slugblog': article.slugblog }) }}

# updated the {{ article.updatedAt | date(constant('DATE_RFC822')) }}

{% endfor %}

FALLBACK:

NETWORK:

Voilà une fois ce template effectuer vous n'avez plus qu'à appeller cette page dans votre layout

Le layout

Dans le layout de votre vous n'avez plus qu'à appeller cette page dans la balise manifest comme ceci :

<!DOCTYPE html>

...

</html>

Voilà vous n'avez plus qu'à faire une page pour le cas hors connexion et voilà votre application symfony2 est mise en cache !

Un petit exemple en application sur ce site avec la version mobile qui est entièrement mise en cache. Si vous avez des questions, ou vous connaissez une meilleur façon de faire je suis preneur.

A bientôt ...

: Symfony2 PHP HTML HTML5 | Fabien GARCIA | Crée le : 11/04/2012 | Mise à jour : 15/10/2012