HTML5 na mobilních zařízeních

HTML5 má určité zvláštnosti pro použití v mobilních telefonech , dotykových podložkách a dalších přenosných zařízeních.

Hlavní rysy

Místní paměť

Ukládání dat do mezipaměti ( AppCache ) prohlížečem umožňuje mimo jiné navodit uživateli dojem kontinuity připojení v určitých případech, kdy by došlo k přerušení.

Aby to bylo možné, je nutné vytvořit offline manifest poprvé a mít typ MIME  : text / cache-manifest .

Soubor manifestu obsahuje závislosti, které jsou vyžadovány pro hladký chod aplikace.

CACHE MANIFEST # Version 0.1 offline.html /iui/iui.js /iui/iui.css /iui/loading.gif /iui/toolbar.png /iui/whiteButton.png /images/gymnastics.jpg /images/soccer.png /images/gym.jpg /images/soccer.jpg

Po vytvoření manifestu je vyžadováno připojení k prohlížeči, které je prováděno html značkou s atributem manifestu obsahujícím URL souboru manifestu.

<html manifest="manifest.mf">

Výkres

Na stránce lze přidělit prostor pro obrázky, křivky, grafy, hravé prvky a všechny ostatní věci, které lze nakreslit, a to buď programově, nebo prostřednictvím interakce s uživatelem. To je možné, aniž byste se uchýlili k programování pomocí Adobe Flash nebo jiných pluginů .

Video a audio stream

Je možné spravovat video a audio streamy přímo bez aplikace Adobe Flash .

Geolokace

Existuje geolokační API, které načte geografickou polohu uživatele. Toto API není zahrnuto ve specifikaci HTML5, ale lze ho použít jako doplněk. Zeměpisná šířka a délka jsou poté k dispozici v JavaScriptu stránky, který je pak může volitelně odeslat na server. To by mohlo být použito například k zobrazení turistických nebo komerčních budov, které jsou v blízkosti uživatele.

Zde je typický řádek kódu pro geolokaci:

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

Hledání pozice je asynchronní operace, která vyžaduje souhlas uživatele. Proto je nutné zajistit funkce zpětného volání pro případy přijetí a odmítnutí.

Pokročilé formuláře

Pole formuláře HTML5 mají atributy, které usnadňují rozhraní s uživatelem a které zmenšují velikost stránky HTML tím, že před odesláním na server odstraní potřebu určitých řádků kódu javascript, které se obvykle používají pro místní ovládací prvky.

Známé problémy

Video

Android
  • Android 2.2 a nižší verze tento atribut nepodporují controls. Proto je nutné zajistit vlastní video rozhraní, obsahující alespoň skript pro spuštění videa. Tato chyba je opravena v systému Android 2.3.
  • Android 2.2 a nižší verze tento atribut typeve všech případech nezpracovávají správně , zejména pokud u zdroje MP4 chybí přípona „.mp4“. Na druhou stranu se zdrojem H.264 jde všechno dobře. Tato chyba byla opravena v systému Android 2.3.
iPhone a iPad
  • iOS 3.2 a nižší verze nerozpoznávají video, pokud je atribut posterpřítomen. Tento atribut by měl umožnit zobrazení obrázku při načítání videa. Tato chyba byla opravena v systému iOS 4.0.
  • Pokud existuje více zdrojů, iOS 3.2 a nižší bude brát v úvahu pouze první. Protože však iOS přijímá pouze kodeky H.264 + AAC + MP4, znamená to, že prvním zdrojem bude téměř nutně MP4. Tato chyba je v iOS 4.0 opravena.

Detekce dostupnosti HTML5 a typu pevné / mobilní

Před vytvořením stránky ve standardu HTML5 může server chtít zkontrolovat, zda bude klientská pracovní stanice akceptovat HTML5. Tato detekce, stejně jako detekce typu pevné / mobilní, se obvykle provádí díky uživatelskému agentovi .

Všechna zařízení, která komunikují pomocí protokolu HTTP, musí odeslat agenta uživatele, což je řetězec znaků identifikující webový prohlížeč a operační systém klientské pracovní stanice.

U serveru webových stránek je možné zjistit, zda je podporován HTML5, zkoumáním verze prohlížeče v uživatelském agentu. A je možné zjistit typ hardwaru klienta zkoumáním operačního systému uživatelského agenta.

To lze provést jednoduchým způsobem porovnáním názvu s předem stanoveným seznamem, který je třeba udržovat. Nebo to lze provést pomocí dalších funkcí přidaných na server, například pokud je serverem Apache , pak je tu modul AMFWurflFilter (Open Source), který dává atributy ( is_wireless_device , is_tablet , ...) usnadňující mobilní detekci a usnadňující volba formátu stránky ( šířka_rozlišení , výška_rozlišení , ...).

Poznámky a odkazy

(fr) Tento článek je částečně nebo zcela převzat z článku anglické Wikipedie s názvem „  HTML5 v mobilních zařízeních  “ ( viz seznam autorů ) .
  1. HTML5 z mobilní perspektivy 22. července 2009 od Jasona Grigsbyho
  2. Zajistěte, aby mobilní webové aplikace fungovaly offline s HTML 5 , Michael Galpin, 29. června 2010
  3. Jak HTML5 změní používání webu 1. prosince 2009 od Kevina Purdyho
  4. GeoLocation API Mark Pilgrim, ponořte se do HTML5
  5. Java Script Geo location framework pro mobilní web code.google.com
  6. Mark Pilgrim : Ponořte se do HTML5
  7. http://wurfl.sourceforge.net/help_doc.php

Podívejte se také

Související články

externí odkazy