Pages web et HTML intégré sur un écran

« Ça marche dans l'aperçu mais l'écran est vide » est le symptôme caractéristique des widgets de page web et de HTML intégré, et ce n'est pas un bug. L'aperçu s'exécute dans votre navigateur, connecté en tant que vous, sur votre réseau de bureau. Le lecteur exécute un moteur de navigateur différent, connecté en tant que personne, peut-être sur un réseau différent. Tout ce qui dépend de ces différences ne fonctionne pas.

Pourquoi l'aperçu ment

Quatre choses diffèrent entre votre aperçu et le lecteur :

1. Votre session. Si la page nécessite une connexion, votre navigateur possède le cookie et le lecteur ne l'a pas. Le lecteur obtient un écran de connexion, ou, plus souvent, une page vide.
2. Autorisations d'intégration. La plupart des sites modernes envoient des en-têtes qui interdisent d'être intégrés dans une autre page. Votre aperçu peut en être exempté ; le lecteur ne l'est pas. La page refuse silencieusement de s'afficher.
3. Contenu mixte. Une page ou un élément http:// intégré dans un contexte https:// est bloqué purement et simplement.
4. Le moteur de rendu. Les moteurs de navigateur des lecteurs sont plus anciens et plus stricts que Chrome de bureau, en particulier sur les téléviseurs connectés et les boîtiers Android bon marché. Sous Windows, le moteur est sélectionnable, et un widget récalcitrant isolé peut être forcé sur le moteur Edge plus récent en plaçant <!-- BROWSER=edge --> sur la première ligne de son HTML intégré, ce qui vaut la peine d'être essayé avant de réécrire une page.

Solutions, classées par fréquence d'efficacité

1. Testez l'URL sur l'appareil lui-même

Ouvrez le navigateur propre à l'appareil et chargez l'URL exacte. Si elle échoue là, aucun paramètre easyCMS ne la sauvera, vous avez un problème de réseau, de certificat ou d'authentification à résoudre d'abord. Ce seul test résout la plupart des cas.

2. Utilisez le bon mode de rendu

Le widget page web propose différentes façons de rendre :

• Ouvrir en mode natif : le lecteur charge l'URL directement dans son propre navigateur. C'est le seul mode qui contourne un site refusant d'être intégré dans un cadre. Il ne peut pas être superposé sous d'autres contenus, il occupe toute la zone qui lui est donnée, et il n'a aucun aperçu dans easyCMS, donc la seule façon de le vérifier est de regarder l'écran.
• Position manuelle et Ajustement optimal : la page est intégrée dans un cadre aux dimensions que vous définissez, avec décalage et échelle afin de n'afficher que la partie de page que vous voulez. Les deux sont plus flexibles, et les deux sont soumis à toutes les règles d'intégration ci-dessus.

Si une page est vide une fois intégrée, passez en Ouvrir en mode natif et republiez. Cela corrige la majorité des widgets de page web vides, mais uniquement sous Android et Windows. Sur un panneau LG webOS, un site qui refuse d'être intégré dans un cadre ne s'affichera dans aucun mode. Aucun paramètre ne change cela. La solution est une URL source différente, ou une page que vous contrôlez.

3. Servez tout via HTTPS avec un certificat valide

Les certificats autosignés et expirés sont rejetés sans erreur visible, et les lecteurs de téléviseurs connectés sont les plus stricts de tous. Utilisez un certificat d'une autorité publique normale. Si vous devez utiliser un certificat interne, il doit être installé comme fiable sur l'appareil lui-même.

4. Supprimez l'exigence de connexion

L'affichage dynamique ne peut pas saisir de mot de passe. Si la page nécessite une authentification, exposez une version en lecture seule, un lien de tableau de bord partagé, une URL à jeton public, une vue publiée, et pointez plutôt le widget vers celle-ci.

5. Vérifiez ce dont la page a besoin pour fonctionner

Les frameworks JavaScript lourds, WebGL, les médias en lecture automatique et les polices web chargées depuis des tiers échouent tous plus souvent sur le matériel du lecteur que sur votre ordinateur portable. Plus une page est statique, plus elle est fiable sur un écran. Là où vous contrôlez la page, construisez-en une version allégée pour l'affichage.

Le cas particulier des tableaux de bord

Les tableaux de bord des outils d'analyse et de BI sont l'usage le plus courant du widget page web, et l'échec le plus courant. Presque tous bloquent l'intégration par défaut et nécessitent une session. Cherchez l'option propre à l'outil lien public, publier sur le web ou partage en lecture seule. Cela vous donne une URL conçue pour être intégrée, et elle fonctionne là où l'URL normale du tableau de bord ne fonctionnera pas.

HTML intégré

Le widget HTML intégré injecte votre balisage dans la mise en page. Causes fréquentes d'un résultat vide :

• Scripts chargés via http://, ou depuis un domaine que l'appareil ne peut pas atteindre.
• Un code qui suppose une taille de fenêtre d'affichage de bureau.
• Un balisage qui casse l'analyse de la mise en page, une balise non fermée peut invalider toute la mise en page, qui ne se lit alors plus jamais du tout. Voir Le contenu programmé ne se diffuse pas.

Une chose à ne pas pourchasser : une mise en page contenant une page web porte souvent un point d'exclamation orange plutôt qu'une coche verte. C'est normal. easyCMS ne peut pas savoir ce qu'une page web en direct va afficher, il refuse donc de déclarer la mise en page entièrement valide. Elle se lit quand même.

Astuce Testez d'abord avec quelque chose de trivial, un bloc coloré avec un peu de texte, pour prouver que le widget lui-même fonctionne. Puis rajoutez votre vrai code morceau par morceau.

Articles associés : Créer des mises en page, Contenu dynamique avec les DataSet, Exigences réseau et règles de pare-feu