Internet byłby lepszym miejscem, jakby działał natychmiastowo - bez żadnych opóźnień wyświetlał zawartość klikniętego linka. Cel wydaje się być niemożliwy do osiągnięcia. Serwery strony często znajdują się daleko od naszego urządzenia. Nie dość, że czas, zanim zapytanie dotrze do nich, już trwa długo, to jeszcze musimy czekać na ich odpowiedź. W przypadku urządzeń mobilnych, które korzystają z bezprzewodowego Internetu, wszystko trwa jeszcze dłużej. Wprowadzając różne technologie, takie jak SPDY, skracamy ten czas, ale dalej jesteśmy uzależnieni od innych czynników np. dostawcy Internetu.

Pomysłem na rozwiązanie tego problemu jest zapisanie prawie całej strony lokalnie, na urządzeniu użytkownika - wtedy podstrony ładowałyby się natychmiastowo. Idealnym narzędziem do zrobienia tego będzie HTML5 Local Storage, bo jest dostępny we wszystkich nowoczesnych przeglądarkach. Dzięki tej funkcji przeglądarki, programista może zapisywać dane na komputerze osoby, która odwiedza stronę. Niestety nie jest to taka prosta sprawa jak by mogło się wydawać. Local Storage jest stosowany w większych web aplikacjach, ale nikt o zdrowych zmysłach nie spróbowałby wykorzystać go jako pamięć podręczną dla całego sklepu internetowego. :) Każda podstrona swoje waży (jest ich tylko parę tysięcy), a umieszczanie wszelkiego rodzaju "Ładuję stronę, proszę czekaj…" nigdy nie jest dobrym rozwiązaniem. Ilość miejsca, jaką można wykorzystać jest też, delikatnie mówiąc, niezadowalająca, bo wynosi jedynie 2,5MB.

Pomysł jest, teraz tylko to napisać

Żeby osiągnąć cel trzeba do tematu podejść trochę z innej strony. Dane w czystej postaci (bez tagów HTML) nie ważą dużo, do tego można je w wygodny sposób odbierać od serwera w postaci JSON-a. Po porównaniu paru podstron okazało się, że same dane ważą o ok. 80% mniej niż te z tagami HTML - nareszcie jakieś dobre wieści! Oczywiście potencjalny klient odwiedzający sklep mógłby się poczuć niepocieszony, gdyby dostał tylko "suchą" tablicę danych na białym tle… Dlatego cały system szablonów musi działać samodzielnie po stronie przeglądarki internetowej.

Technologia technologią, ale o Progressive Enhancement nie można zapomnieć! Jest to ogólnie stosowana strategia tworzenia stron internetowych: polega na progresywnym ulepszaniu w sposób warstwowy, zapewniający wszystkim użytkownikom dostęp do podstawowych treści i opcji strony. Trzeba pamiętać, że jednym z tych "użytkowników" jest Google (nie wspominając już o niepełnosprawnych, używających do przeglądania Internetu czytników ekranowych), który nie poradzi sobie z tak zaawansowanymi skryptami.

Jak to wygląda krok po kroku

1 Pierwsze wejście na stronę wygląda identycznie, jak na każdej innej. Przeglądarka otrzymuje gotowy kod strony i go normalnie wyświetla. Cała "zabawa" zaczyna się po krótkiej chwili, gdy tylko zostaną wczytane pierwsze skrypty, które ładują się na końcu, nie spowalniając całości. Pierwszym zadaniem wykonywanym przez skrypty jest (niewidocznie dla osoby odwiedzającej) podmienić zawartość całej strony na dynamicznie wygenerowaną. Wszystkie linki od tej chwili po kliknięciu będą przechwycone i zinterpretowane przez skrypt.

2 Podczas, gdy osoba spokojnie przegląda sobie pierwszą stronę sklepu, nie zdając sobie sprawy jak w tle przeglądarka ciężko pracuje, ta - po krótkiej chwili - często odwiedzane podstrony (kategorie, następna strona listy produktów itd.) stopniowo ściąga na dysk (wcześniej wspomniany Local Storage) i przechowuje je na nim przez 2 dni.

3 Po kliknięciu w link (np. produkt) przeglądarka przeszukuje lokalną bazę danych, znajduje odpowiedni szablon dla tej podstrony i błyskawicznie go wyświetla. Trwa to na tyle szybko, że nie zdąży się nawet puścić przycisku myszki. Adres strony zostaje podmieniony na ten, który występuje w linku przy pomocy History API. Dzięki temu nawet jak odświeżymy stronę albo podamy adres komuś innemu, to trafi na tą samą stronę, na której byliśmy my sami.

Dodatkowym zabezpieczeniem tego, żeby na pewno otrzymać aktualne dane, jest ich cicha aktualizacja w tle. Zaraz po zmianie podstrony skrypt jeszcze raz pobiera dane od serwera i w przypadku różnicy aktualizuje je.

Prekursorem takiego zastosowania jest wykonany przez nas internetowy sklep z lampami - Sklep-Lampy.net - to właśnie na nim będą przeprowadzone testy jak całość sprawdza się w "praniu".

Autor: Kacper Kozak