Drupal 7 a mobilní web: pár tipů a více povzdychnutí

Oblast mobilních webů v kombinaci s Drupalem 7 je pro mě jedna velká černá díra. Vytvořit téma vzhledu, které bude vypadat dobře na mobilu, to problém není. Stejně tak není problém vytvořit „responsive“ web, jehož grafika se bude přizpůsobovat rozměrům displeje, resp. prohlížeče.

Ovšem v mnoha situacích potřebujete mít prostě samostatné mobilní téma vzhledu a v něm úplně jiné bloky než na desktopové verzi. V takovou chvíli potřebujete spolehlivý nástroj, který dovede přepínat téma vzhledu podle toho, jaký prohlížeč na web zrovna kouká.

Pro Drupal existuje takovýchto přepínačů spousta. Radost z toho ale brzy zkazí zjištění, že většina těchto modulů je ve stabilní verzi jen pro starší Drupal 6. V sedmičce buď jejich vývojové verze fungují s problémy, nebo ani neexistují. Pár řešení, jak zprovoznit přepínání na mobilní vzhled v Drupalu 7 existuje, ale fungují spolehlivě jen do okamžiku, kdy se rozhodnete zapnout cacheování.

Drupal 7, cache a mobilní vzhled? To nejde dohromady

Myslím, že se touto problematikou trápím už něco přes rok. Vždy, když jsem našel dobře vypadající řešení pro přepnutí vzhledu webu na mobilní téma, narazil jsem na problém, který mají úplně všechny moduly. Tím je cache Drupalu. V momentě, kdy zapnete cacheování stránek pro anonymní uživatele, můžete se se spolehlivostí přepínátka na mobilní vzhled rozloučit.

Drupal totiž cacheuje jednotlivé stránky podle jejich URL. Pro přepínání na mobilní vzhled to má neblahý důsledek. Začněme s prázdnou cache. Na web se podívá první nepřihlášený návštěvník pomocí počítače nebo notebooku. Do cache se stránka uloží s výchozím tématem vhledu. Nyní se na web podívá někdo nepřihlášený přes mobil. Správně by mělo dojít k přepnutí na mobilní vzhled, ale jelikož je stránka již uložena v cache s desktopovou verzí, pošle se do mobilu desktop.

A obráceně. Začneme zase s prázdnou cache. Jako první se na web podívá nepřihlášený „mobilista“. Když pak na web koukne někdo z počítače, načte se mu mobilní vzhled, protože ten byl uložen do cache jako první.

Jak z toho ven? Snadno, stačí vypnout cacheování a nepoužívat jej. Jenže takové řešení je podle mého názoru špatné. Navíc u velkých webů je zapnutá cache nezbytností, jinak to brzy negativně pocítíte na jejich rychlosti načítání.

Přiznám se, že řešení neznám a pokud někdo ze zdejších čtenářů už něco podobného řešil, budu rád, když se o své zkušenosti rozdělí. Většina návodů na internetu totiž kombinaci přepínání na mobilní vzhled se zapnutou cache jaksi zapomíná řešit (zřejmě kvůli popsaným problémům).

Snad nejrozumnější kompromis, který se blíží ideálu (ale jen blíží) je použití modulu Dynamic Cache, který vám poskytne API pro dynamické vypnutí cache v závislosti na nějaké podmínce. Můžete tedy ve svém modulu zkusit implementovat funkci hook_boot() a zde pomocí Dynamic Cache cacheování vypnout v případě, že na web někdo kouká v mobilním prohlížeči. Příklad takového použití najdete v tomto komentáři na drupal.org. Potřebujete k tomu ještě modul Browscap.

Výsledkem by mělo být, že na mobilu se nikdy cache neuplatní, takže se nenačte cacheovaná desktopová verze ani se mobilní verze do cache neuloží. Musíte samozřejmě počítat s jedním ALE, a sice, že web v mobilu tak může být kvůli vypnuté cache pomalejší. V praxi jsem toto řešení ale zatím nezkusil.

Pokud nezapnete cache, jde to jako po másle. Skoro

V případě, že se rozhodnete cache kvůli bezproblémové podpoře mobilního tématu vzhledu pro Drupal 7 nezapínat, pak je situace poměrně jednoduchá. Z několika momentálně dostupných řešení pro přepínání na mobilní vzhled mohu doporučit dvoje. Na www.cnews.cz používáme starší modul Mobile Tools 2 s množstvím dodatečných patchů. Vývojovou trojkovou a modernější verzi se mi bohužel nepodařilo rozchodit.

Problém Mobile Tools je v tom, že to s jeho dalším vývojem nevypadá zrovna nejlépe. Z tohoto pohledu je na tom lépe modul Mobile Theme, který se také mnohem jednodušeji nastavuje. Jenom si v něm zapnete, které téma vzhledu se má aplikovat pro mobilní prohlížeče. Bohužel zde není možnost se v mobilu přepnout na desktop.

Pominu-li popsané problémy s cache, pak je z mého pohledu nejzajímavější modul Mobile Switch. Umí toho docela dost a hlavně se dále vyvíjí a je udržován. Stačí se podívat na data vydání aktuálních verzí.

Detekci mobilního prohlížeče provádí Mobile Switch pomocí knihovny Mobile Detect, kterou je potřeba nakopírovat do složky sites/all/libraries dle přiloženého návodu. Poté je potřeba zapnout modul Libraries. Teprve se zapnutými Libraries zapněte Mobile Switch, v opačném případě skončí instalace modulu chybou. Podrobnosti najdete v readme.

Trošku náročnější instalace mobilního přepínátka Mobile Switch je však jediná složitější věc u tohoto modulu. Po jeho zapnutí jděte do administrační části Konfigurace > Uživatelské rozhraní > Mobile Switch.

V základním nastavení si z rozbalovací nabídky Mobile Theme vyberte téma vzhledu, které se použije v mobilních prohlížečích. Na drupal.org najdete řadu výchozích témat vzhledu vhodných pro mobilní prohlížeče, musíte si je ale nastylovat, většina z nich slouží jen jako výchozí témata.

Můžete si rovněž vybrat, zda se mobilní téma aplikuje na tabletech a na administračních stránkách. V pokročilém nastavení lze pak automatické přepínání na mobilní vzhled vypnout – uživatel by tak musel použít přepínátko v bloku z doplňujícího modulu Mobile Switch Block.

Pro ladění můžete zapnout také podporu detekce emulátorů mobilních prohlížečů nebo si nechat zobrazovat mobilní vzhled na desktopu.

Jak vidíte, pokud si odmyslíme problémy s cache, je zapnutí přepínače na mobilní vzhled v Drupalu 7 celkem snadné. Z mého pohledu je však nedostupnost cache v této kombinaci natolik limitující, že na vlastních webech podobnou funkcionalitu zatím nemám. Jak jste na tom vy? A mimochodem, uvítali byste Maxiorla v mobilní podobě?