Nedávno jsem do mailu (díky Honzo!), dostal článek o tom, že Chrome Desktop Apps už fungují i na mobilu. Na článku mě upřímně nejvíc zaujalo to, že vůbec nějaké Chrome Desktop Apps existují. No a samozřejmě jsem to potřeboval vyzkoušet. Na žádném “pracovním” projektu se to dvakrát nehodilo, tak jsem si řekl, že moje vařítko čaje si taky zaslouží trochu lásky. Netrvalo to ani den a podařilo se mi překlopit webovou stránku do jednoduché aplikace!

Co jsou Chrome Web Apps?

Malá odbočka pro ty z vás, co (stejně jako já) až do dneška netušili, že něco takového existuje. Chrome Web Apps jsou webové aplikace, které se ale tváří jako “normální” Windows/Mac/Linux aplikace. To znamená, že ve Windows je najdete přímo ve Start menu (v záložce Chrome Apps), můžete si dát zástupce na plochu atd. Navíc u nových verzí Chrome je dole na liště tzv. Chrome App Launcher, což je jednoduchý způsob, jak spustit konkrétní aplikaci.

Jak to šlo?

Zdrojový kód původní aplikace je relativně jednoduchý – v zásadě jde o jednu HTML stránku a kus Javascript (popravdě Coffeescript) kódu v AngularJS. HTML šlo pryč víceméně celé. Ne, že by nešlo použít, ale potřeboval jsem uživatelské rozhraní aplikace razantně zmenšit – aplikace má rozměr jen 380x380 pixelů.

V obou případech jsem použil Twitter Bootstrap, nemusel jsem tedy nic vymýšlet a jen přepsal těch pár divů a výběr čajů dal do select boxu místo radio buttonů, co jsou na webu. Původně jsem si maloval, že v Javascriptu nebudu muset dělat změny žádné, ale opak byl pravdou. Spoustu kódu jsem naštěstí mohl vyhodit – webová verze musí kontrolovat, zda je použitý správný prohlížeč a zda jsou k dispozici webové notifikace. To šlo všechno pryč.

Změnit se musely dvě věci: Ukládání nastavení, protože desktopová aplikace nemůže použít localStorage, ale musí používat chrome.storage.*. Zase ale se nastavení automaticky (`chrome.storage.sync`) sdílí mezi všemi počítači konkrétního uživatele. Druhá změněná věc bylo samotné vyvolání notifikace – opět je třeba použít chrome rozhraní. I když tohle asi nebylo 100% nutné.

Poslední věc bylo uklizení kódu, odstranění jednoho zbytečného kontroleru a vyhození JQuery. Tohle ale asi udělám i ve webové verzi a budu se snažit kód trochu sjednotit.

Výsledek? Kdybych od začátku počítal s desktopovou verzí, mohl jsem si ušetřit spoustu práce. Ať už správným použitím kombinace col-xs-* a col-md-* tříd v HTML nebo trochou abstrakce v Javascriptu, kdy bych si obalil volání notifikací a localStorage nějakým proxy objektem. Ale ani takhle nešlo o nic hrozného, zabralo mi to asi 4-5 hodin času.

Jen výsledný zdroják je zatím v samostatné větvi, sdílení kódu mezi webem a desktopem musím teprve vyřešit.

Hurá do světa

Paradoxně nejvíc času a bádání mi zabralo vydání aplikace do Chrome Web Store. Nějak jsem nepochopil oficiální postup zabalení a vydání aplikace. Takže pro příští generace (a pro mě za půl roku) tu raději sepíšu svůj vlastní návod:

1. Aplikace se “zabalí” pomocí “Pack extension” přímo v prohlížeči Chrome. Tento krok je nutný pouze pro distribuci aplikace mimo Chrome Web Store nebo pro vyzkoušení instalace aplikace.
2. Celý adresář s aplikací se zabalí do zip souboru. Soubor manifest.json musí být v kořeni zipu.
3. Tento zip soubor se nahraje na Chrome Web Store a vydá.
4. Zabalená aplikace z prvního kroku se nikam nenahrává, do zipu nepatří, prostě je na nic!

Vydanou aplikaci můžete samozřejmě nainstalovat. z Chrome Web Store. A dejte mi vědět, jak chodí?

Mobilní verze

A běží i na mobilu? No jéje!

Ale o tom až příště.