Praca z obrazami w aplikacji offline HTML5?

Question

Pomyślnie utworzyliśmy aplikację offline przy użyciu HTML5. To, co robi, to przechowywanie danych w indeksowanym DB lub w localStorage, gdy online, lokalna baza danych i baza danych online zostaną zsynchronizowane. Wszystko jest w porządku, dopóki nie zdecydowaliśmy się dodać funkcjonalności do przesyłania zdjęć.

1) Ponieważ aplikacja działa w trybie offline, nie możemy przesyłać obrazów na serwer, gdzie zamierzamy je umieścić?

Możliwe rozwiązania:

• w trybie offline, zapisz ścieżkę, gdy użytkownik dostaje w Internecie, przesyłanie obrazów poprzez tworzenie elementów wejściowych i przypisywanie ścieżkę do swojego atrybutu wartości. Problem z tym podejściem polega na tym, że nie możemy zmienić atrybutu wartości elementu wejściowego i nie możemy uzyskać pełnej ścieżki do obrazu, który ma zostać przesłany. Wygląda na to, że to rozwiązanie nie jest naprawdę możliwe.
• zapisać obraz w indexedDB lub localStorage, jest to możliwe?

2) Jeśli uda nam się zapisać obraz w indeksie DB lub localStorage, w jaki sposób prześlemy go, gdy użytkownik przejdzie do trybu online?

Możliwe rozwiązania:

• websocket - Nie dotykaj tego jeszcze.
• Flash - czy to działa na iPhone'a? Prawdopodobnie nie.

3) Jeśli uda nam się zapisać obraz w indeksie DB lub localStorage, w jaki sposób wyświetlimy go na stronie? Elementy obrazu używają atrybutu src do określenia, który obraz do wyświetlenia, czy istnieją inne metody, takie jak użycie binarnego obrazu?

Jeśli wcześniej spotkałeś się z podobną sytuacją, jakie obejście podjąłeś, aby osiągnąć swój cel?

Answer 1

Użyj FileAPI dostępnego w HTML5. Możesz "przesłać" tam swoje obrazy, a następnie, gdy serwer wróci do trybu online, możesz je przesłać, nawet przy użyciu tradycyjnego XHR.

FileAPI jest bezpieczny w użyciu, ponieważ większość głównych przeglądarek go wspierać: http://caniuse.com/#feat=fileapi

Szczegółowe:

1) zapisać plik do permament lub temporary przechowywania (zgodnie z definicją naszej aplikacji). Uwaga: przechowywanie temporary jest usuwane po zakończeniu sesji (według uznania przeglądarki).

Zobacz tutaj tutorialu: http://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript

2) Chciałbym używać tradycyjnych XHRequests je przekazywać. To jest łatwiejsze i lepiej przetestowane (nie musisz projektować nowego protokołu od zera).

3) To najlepsza rzecz :) Możesz uzyskać poprawne adresy URL bezpośrednio z interfejsu API pliku, aby obrazy były wyświetlane z pamięci podręcznej. Zobacz tutaj: http://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript#toc-filesystemurls