Monday, January 9, 2012

jQuery Mobile: Diverse problem

jQM tar för mycket kraft att ladda om vid varje sidladdning; speciellt i mobila enheter. Det självklara valet blir då att bara ladda jQuery och jQM en gång; och sedan ladda påföljande sidor med hjälp av AJAX (detta är dessutom ganska djupt inbyggt i jQM:s navigeringslogik).

Då stöter vi på ett antal problem.

404: File not found
Om man stöter på en sida som returnerar en felkod som jQuery:s AJAX-anrop tolkar som ett "error"; exempelvis 404, så visas inte svarssidan alls. Istället får man ett felmeddelande från jQM:s navigeringssystem, och lämnas kvar på sidan man befann sig på tidigare. Detta är dessutom klurigt att ändra utan att göra ganska stora förändringar i jQM-koden, som då blir ett helvete att underhålla när det ska uppgraderas.

Enklaste "lösningen" är att helt enkelt inte skicka "rätt" HTTP-felkoder från backend, utan att alltid skicka 200 OK när innehållet faktiskt ska visas. Detta är inte något större problem om det inte handlar om en sida som Google ska indexera; där felkoderna faktiskt fyller en funktion.

Sidspecifik JS/CSS
I den lösning jag jobbar i nu så byggs ett block med JS och ett block med CSS för varje kombination av templates. Så vid första sidladdningen laddas alltid bara den JS och den CSS som behövs för den sidan; inte mer. När man då byter sida med hjälp av AJAX så kommer jQM inte att plocka ut CSS/JS från HEAD-delen av svaret, utan bara plocka ut själva DIV:en med sidans innehåll.

Detta bör gå att lösa genom att lyssna på lämpligt jQM-event; parsa HEAD-delen av svaret själv, och kopiera in nyupptäckt CSS/JS i sidans riktiga HEAD-del innan den nya sidan visas ut.

Annonser
Vår gamle vän document.write dyker som vanligt upp i AJAX-sammanhang. Annonskoder håller i regel stenåldersnivå; det krävs document.write i minst två led för att fungera, och dessutom kräver eventuella tredjeparts-taggar ännu ett eller två led för att få ut något.

På desktop-sidan har vi löst detta med en modifierad variant av LazyWrite som fungerar relativt bra i nyare webbläsare. I övriga låter vi helt enkelt document.write göra sitt; vilket ju är ett alternativ när man inte laddar om hela sidan med AJAX.

Återstår att se om LazyWrite är lösningen även på mobilsidan. Preliminära tester visar att det åtminstone inte fungerar rakt av. Gissningsvis har det att göra med hur jQM hanterar SCRIPT-blocken i de AJAX-hämtade sidorna, och förhoppningsvis går det att göra något åt genom att lyssna på något event.


Återkommer förhoppningsvis med lösningar, och en separat post om den där CSS/JS-implementationen.

No comments: