Budujemy aplikację sieciową offline!

W rozdziale:

Budujemy aplikację sieciową offline!

Pamiętasz grę Halma, którą poznałeś w rozdziale o elemencie canvas i którą udoskonaliliśmy w rozdziale o zapisywaniu danych w lokalnych magazynach? Teraz umożliwimy granie w nią offline.

Do tego potrzebny nam będzie manifest z listą wszystkich potrzebnych w grze zasobów. Należą do nich główna strona HTML, jeden plik JavaScript zawierający cały kod gry i… koniec. Nie ma żadnych obrazów, ponieważ wszystkie rysunki są wykonane programowo przy użyciu API canvas. Wszystkie style CSS znajdują się w elemencie <style> na początku strony HTML. Oto w takim razie treść naszego manifestu:

CACHE MANIFEST
halma.html
../halma-localstorage.js

Kilka słów o ścieżkach. W katalogu examples/ utworzyłem podkatalog offline/, w którym znajduje się plik manifestu. Jako że strona HTML potrzebuje jeszcze drobnego dodatku do działania offline (zaraz o nim napiszę), utworzyłem osobną kopię tego pliku HTML, która również znajduje się w podkatalogu offline/. Ponieważ plik JavaScript nie wymaga żadnych zmian, bo dodaliśmy obsługę magazynu lokalnego, używam dokładnie tego samego pliku .js, który znajduje się w katalogu nadrzędnym (examples/). Ścieżki do wszystkich plików wyglądają tak:

/examples/localstorage-halma.html
/examples/halma-localstorage.js
/examples/offline/halma.manifest
/examples/offline/halma.html

W manifeście (/examples/offline/halma.manifest) wskazujemy dwa pliki. Pierwszy z nich to wersja offline pliku HTML (/examples/offline/halma.html). Jako że te dwa pliki znajdują się w tym samym folderze, ścieżka do niego nie ma żadnego przedrostka. Po drugie dołączamy plik JavaScript znajdujący się w katalogu nadrzędnym (/examples/halma-localstorage.js). Wskazujemy go przy użyciu względnej ścieżki URL: ../halma-localstorage.js. Składnia jest taka sama, jak przy wstawianiu obrazów na stronę przy użyciu elementu <img src>. Jak zobaczysz w następnym przykładzie, można też używać ścieżek bezwzględnych (rozpoczynających się od katalogu głównego domeny), a nawet mogą być bezwzględnymi adresami URL (wskazującymi zasoby pod innymi domenami).

Teraz w pliku HTML musimy dodać atrybut manifest wskazujący plik manifestu.

<!doctype html>
<html lang="en" manifest="halma.manifest">

To wszystko! Gdy przeglądarka obsługująca aplikacje offline wczyta tę stronę HTML aplikacji offline, pobierze dołączony manifest i rozpocznie pobieranie wszystkich wymienionych w nim zasobów oraz zapisze je w buforze. Od tej pory przy każdej kolejnej wizycie na stronie jej wyświetlaniem będzie zarządzać algorytm obsługi aplikacji offline. Możesz grać w grę offline, a dodatkowo dzięki zapisywaniu stanu możesz ją przerwać w dowolnym momencie i wrócić do gry później.