Mogę umieścić HTML i JavaScript razem w tym samym .html
pliku, ale obrazy muszą być osobnymi plikami. Jedyne rozwiązanie, jakie przychodzi mi na myśl, to podanie użytkownikowi .zip
folderu.
To nie jest ładne ... Jak inaczej mogę to zrobić?
Mogę umieścić HTML i JavaScript razem w tym samym .html
pliku, ale obrazy muszą być osobnymi plikami. Jedyne rozwiązanie, jakie przychodzi mi na myśl, to podanie użytkownikowi .zip
folderu.
To nie jest ładne ... Jak inaczej mogę to zrobić?
Odpowiedzi:
Możesz osadzać obrazy w dokumencie HTML za pomocą składni dataurl, która pozwala umieścić reprezentację binarnych danych obrazu w formacie base64 jako atrybut src obrazu. Działa to również na każdym innym pliku multimedialnym.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9EFBAoYMhVvMQIAAAAtSURBVHicY/z//z8DHoBH+v///yy4FDEyMjIwMDDhM3lgpaEuh7gTEzDiDxYA9HEPDF90e5YAAAAASUVORK5CYII=">
Kiedy korzystasz z arkuszy stylów CSS, możesz utworzyć je całkowicie proceduralnie w JavaScript.
Samo umieszczenie wszystkich plików w pliku .zip nie jest realnym rozwiązaniem, ponieważ większość aplikacji internetowych potrzebuje serwera WWW, aby mogli uzyskać dostęp do zasobów za pośrednictwem żądań HTTP. W niektórych systemach można uzyskać dostęp do plików za pomocą file://
schematu URI , ale nie ma gwarancji, że będzie działać wszędzie ze względów bezpieczeństwa i nie powiedzie się w przypadku takich rzeczy, jak żądania AJAX.
Może to działać w przypadku bardzo prostej aplikacji, w której masz większość zasobów, ale to nie jest podejście, które poleciłbym każdemu. Istnieją jednak alternatywy, takie jak:
Możesz spakować aplikację internetową jako aplikację natywną za pomocą Node-Webkit . Możesz nawet użyć tego do dodania natywnych funkcji pulpitu (takich jak lokalne zapisywanie gier) do gry.
Nie jest to jednak podejście „ pakiet i gotowe ”. Prawdopodobnie będziesz musiał przepisać fragmenty aplikacji i napisać różne programy ładujące (np. Za pomocą aplikacji komputerowej raczej ładujesz pliki przez system plików, podczas gdy używasz HTTP -Pytania w przeglądarce / grze online).
Jeśli Twoim głównym celem jest umożliwienie graczowi grania w grę offline, możesz także użyć pamięci podręcznej aplikacji, aby umożliwić dostęp do aplikacji offline. Ta funkcja działa w większości nowoczesnych przeglądarek . Dodatkową korzyścią jest to, że użytkownik nie musi niczego pobierać i może po prostu użyć zakładki, aby zagrać w grę, nawet w trybie offline.
W przypadku zasobów ładowanych asynchronicznie (AJAX) należy również zaimplementować osobne mechanizmy ładowania. Możesz skorzystać z pamięci lokalnej, aby zapisać te zasoby do użytku offline.
file:///
dostęp do protokołu localStorage
, który działa w celu zapisywania. Skaluje się do wszystkiego, co można zrobić w grze HTML, z wyjątkiem gry online.
Jeśli chcesz, aby gra działała w trybie offline i mogła cieszyć się rodzimą funkcjonalnością, możesz rozważyć stworzenie aplikacji Chrome .
W ten sposób możesz dystrybuować go w Chrome Web Store , aby uzyskać lepszą widoczność, możesz cieszyć się potężnymi interfejsami API i sprawić, że będzie wyglądał bardziej jak samodzielna aplikacja .
Minusem jest oczywiście Chrome.
To zależy od tego, ile pracy naprawdę chcesz w to włożyć. Korzystając z bieżącego zestawu interfejsów API sieci Web, możesz:
Cmd+S
lub Ctrl+S
w przeglądarce) lub buforuj stronę jako PWA. Po prostu wiedz, że na urządzeniach mobilnych dataURI nie działają zbyt dobrze.zip
plikiem, sprawdź JSZip . Nie mam pojęcia, jak możesz go używać, ale jestem pewien, że ktoś może wymyślić dobry pomysł (może skompresować plik, a następnie przekonwertować dane binarne na ciąg i umieścić je w pliku HTML).