Interfejsy API pamięci masowej

Niemal każdy aspekt tworzenia aplikacji wiąże się z pewnym elementem wysyłania lub odbierania danych. Uruchamiam należy użyć platformy MVC, która pomaga w projektowaniu i wdrażaniu aplikacji, są całkowicie oddzielone od widoku tych danych w aplikacji (patrz Architektura VMC).

Musisz też wziąć pod uwagę sposób przetwarzania danych, gdy aplikacja jest offline (zobacz Najpierw offline). W tym dokumencie pokrótce omówiliśmy opcje przechowywania, które umożliwiają lokalne wysyłanie, odbieranie i zapisywanie danych. pozostała część dokumentu zawiera informacje o tym, jak używać interfejsów API systemu plików i synchronizacji systemu plików w Chrome (zobacz też fileSystem API i syncFileSystem API).

Opcje miejsca na dysku

Aplikacje w pakiecie korzystają z wielu różnych mechanizmów do wysyłania i odbierania danych. W przypadku danych zewnętrznych (zasobów, stron internetowych), zapoznaj się z polityką Content Security Policy (CSP). Podobne do Chrome Rozszerzenia umożliwiają komunikację z serwerami zdalnymi za pomocą międzydomenowych żądań XMLHttpRequests. Ty również może izolować strony zewnętrzne, aby reszta aplikacji była bezpieczna (zobacz Umieszczanie zewnętrznych stron internetowych ).

Podczas lokalnego zapisywania danych możesz użyć interfejsu Chrome Storage API, aby zapisać niewielkie ilości ciągu znaków. i IndexedDB. Dzięki IndexedDB możesz zachowywać obiekty JavaScript w i używać indeksów tego sklepu do wysyłania zapytań o dane (więcej informacji znajdziesz w filmie Simple Todo firmy HTML5 Rock Wyświetl samouczek). W przypadku innych typów danych, np. danych binarnych, użyj systemu plików i synchronizacji Interfejsy API systemu plików.

Interfejsy API Filesystem i Sync Filesystem w Chrome rozszerzają interfejs HTML5 FileSystem API. Dzięki przeglądarce Chrome Interfejs Filesystem API, aplikacje mogą tworzyć, odczytywać i zapisywać w piaskownicy użytkownika w lokalnym systemie plików. Na przykład aplikacja do udostępniania zdjęć może używać interfejsu Filesystem API do odczytu i zapisu wybrane przez użytkownika zdjęcia.

Dzięki interfejsowi Sync Filesystem API Chrome aplikacje mogą zapisywać i synchronizować dane na Dysku Google użytkownika, że te same dane mogą być dostępne w różnych klientach. Na przykład tekst w chmurze może automatycznie synchronizować nowe pliki tekstowe z kontem Dysku Google użytkownika. Gdy użytkownik otwiera edytor tekstu w nowym kliencie, Dysk Google przesyła nowe pliki tekstowe do tego wystąpienia za pomocą edytora tekstu.

Korzystanie z interfejsu Chrome Filesystem API

Dodaję uprawnienia systemu plików

Aby używać interfejsu File System API w Chrome, musisz dodać plik „fileSystem” do pliku manifestu, więc które można uzyskać od użytkownika na przechowywanie danych trwałych.

"permissions": [
  "...",
  "fileSystem"
]

Opcje wyboru plików dla użytkownika

Użytkownicy chcą wybierać pliki w taki sam sposób jak zawsze. Wymagane jest minimum: „Plik” i standardowy wybór plików. Jeśli Twoja aplikacja intensywnie korzysta z obsługi plików, zastosuj przeciąganie i upuszczanie (zobacz poniżej oraz zapoznaj się z sekcją o przeciąganiu i upuszczaniu natywnego formatu HTML5).

Uzyskiwanie ścieżki elementu FileEntry

Aby uzyskać pełną ścieżkę do wybranego przez użytkownika pliku (fileEntry), wywołaj getDisplayPath():

function displayPath(fileEntry) {
  chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
    console.log(path)
  });
}

Wdrażanie funkcji „przeciągnij i upuść”

Jeśli chcesz wdrożyć zaznaczanie metodą „przeciągnij i upuść”, użyj kontrolera plików typu „przeciągnij i upuść” (dnd.js) w przykładowy kod filesystem-access to dobry punkt wyjścia. Kontroler tworzy wpis pliku z folderu DataTransferItem za pomocą przeciągania i upuszczania. W tym przykładzie fileEntry ma wartość pierwszą porzucony element.

var dnd = new DnDFileController('body', function(data) {
  var fileEntry = data.items[0].webkitGetAsEntry();
  displayPath(fileEntry);
});

Odczytywanie pliku

Poniższy kod otwiera plik (tylko do odczytu) i odczytuje go jako tekst za pomocą obiektu FileReader. Jeśli plik nie istnieje, pojawia się błąd.

var chosenFileEntry = null;

chooseFileButton.addEventListener('click', function(e) {
  chrome.fileSystem.chooseEntry({type: 'openFile'}, function(readOnlyEntry) {

    readOnlyEntry.file(function(file) {
      var reader = new FileReader();

      reader.onerror = errorHandler;
      reader.onloadend = function(e) {
        console.log(e.target.result);
      };

      reader.readAsText(file);
    });
    });
});

Zapisywanie pliku

2 typowe przypadki użycia plików do zapisywania to „Save” (Zapisz). i „Zapisz jako”. Ten kod tworzy writableEntry z dostępnego tylko do odczytu (chosenFileEntry) i zapisuje w nim wybrany plik.

 chrome.fileSystem.getWritableEntry(chosenFileEntry, function(writableFileEntry) {
    writableFileEntry.createWriter(function(writer) {
      writer.onerror = errorHandler;
      writer.onwriteend = callback;

    chosenFileEntry.file(function(file) {
      writer.write(file);
    });
  }, errorHandler);
});

Ten kod tworzy nowy plik z opcją „Zapisz jako” i zapisuje nowy obiekt blob w za pomocą metody writer.write().

chrome.fileSystem.chooseEntry({type: 'saveFile'}, function(writableFileEntry) {
    writableFileEntry.createWriter(function(writer) {
      writer.onerror = errorHandler;
      writer.onwriteend = function(e) {
        console.log('write complete');
      };
      writer.write(new Blob(['1234567890'], {type: 'text/plain'}));
    }, errorHandler);
});

Używanie interfejsu Filesystem API synchronizacji Chrome

Dzięki wykorzystaniu funkcji przechowywania plików z możliwością synchronizacji zwracanych obiektów danych można obsługiwać w taki sam sposób jak obiekty lokalne. systemów plików offline w interfejsie FileSystem API, ale wraz z dodaną (i automatyczną) synchronizacją na Dysk Google.

Dodaję uprawnienia systemu plików synchronizacji

Aby używać interfejsu API synchronizacji systemu plików w Chrome, musisz dodać parametr „syncFileSystem” uprawnienia manifestu, który umożliwia uzyskanie od użytkownika uprawnień do przechowywania i synchronizowania danych trwałych.

"permissions": [
  "...",
  "syncFileSystem"
]

Inicjuję przechowywanie plików z możliwością synchronizacji

Aby zainicjować przechowywanie plików z możliwością zsynchronizowania w aplikacji, po prostu wywołaj syncFileSystem.requestFileSystem. Ta metoda zwraca możliwy do zsynchronizowania system plików oparty na Dysku Google, na przykład:

chrome.syncFileSystem.requestFileSystem(function (fs) {
   // FileSystem API should just work on the returned 'fs'.
   fs.root.getFile('test.txt', {create:true}, getEntryCallback, errorCallback);
});

Informacje o stanie synchronizacji plików

Aby sprawdzić stan synchronizacji bieżącego pliku, użyj polecenia syncFileSystem.getFileStatus:

chrome.syncFileSystem.getFileStatus(entry, function(status) {...});

Wartości stanu synchronizacji plików mogą mieć następujące wartości: 'synced', 'pending' lub 'conflicting'. Zsynchronizowano oznacza, że plik jest w pełni zsynchronizowany; nie ma żadnych oczekujących zmian lokalnych, które nie zostały synchronizowane z Dyskiem Google. Po stronie Dysku Google mogą jednak znajdować się oczekujące zmiany, które nie zostały jeszcze pobrane.

Oczekujące oznacza, że w pliku są zmiany oczekujące, które nie są jeszcze zsynchronizowane z Dyskiem Google. Jeśli aplikacja jest wprowadzane w trybie online zmiany lokalne są (prawie) natychmiast synchronizowane z Dyskiem Google, a Zdarzenie syncFileSystem.onFileStatusChanged jest wywoływane ze stanem 'synced' (poniżej znajdziesz ).

Metoda syncFileSystem.onFileStatusChanged jest wywoływana, gdy stan pliku zmieni się na 'conflicting' Konflikt oznacza, że występują sprzeczne zmiany zarówno w pamięci lokalnej, jak i Dysk Google. Plik może znajdować się w tym stanie tylko wtedy, gdy zasada rozwiązywania konfliktów jest ustawiona na 'manual' Domyślna zasada to 'last_write_win', a konflikty są automatycznie rozwiązane przez czyli prostą zasadę ostatniego zapisu. Zasadę rozwiązywania konfliktów w systemie można zmienić przez syncFileSystem.setConflictResolutionPolicy.

Jeśli zasada rozwiązywania konfliktów jest ustawiona na 'manual', a plik ma stan 'conflicting', aplikacja nadal może odczytywać i zapisywać plik jako lokalny plik offline, ale zmiany nie są synchronizowane , a plik będzie odłączony od zdalnych zmian wprowadzonych w innych klientach, dopóki konflikt nie zostanie rozwiązany . Najłatwiejszym sposobem rozwiązania konfliktu jest usunięcie lokalnej wersji pliku lub zmiana jej nazwy. Wymusza to synchronizację wersji zdalnej, stan konfliktu zostaje rozwiązany, a Zdarzenie onFileStatusChanged jest wywoływane ze stanem 'synced'.

Nasłuchiwanie zmian stanu synchronizacji

Zdarzenie syncFileSystem.onFileStatusChanged jest wywoływane po zmianie stanu synchronizacji pliku. Załóżmy na przykład, że plik ma zmiany oczekujące i jest w stanie oczekiwania stanu. Aplikacja mogła zostać aby zmiany zostały zsynchronizowane. Gdy usługa synchronizacji wykryje oczekującej zmiany lokalnej i przesyłając ją na Dysk Google, usługa uruchamia onFileStatusChanged zdarzenie z tymi wartościami: { fileEntry:a fileEntry for the file, status: 'synced', action: 'updated', direction: 'local_to_remote' }

Podobnie, niezależnie od działań lokalnych, usługa synchronizacji może wykryć zmiany zdalne wprowadzone przez do innego klienta i pobiera zmiany z Dysku Google na pamięć lokalną. Jeśli pilot zmiana dotyczy dodania nowego pliku, wywoływane jest zdarzenie o następujących wartościach: { fileEntry: a fileEntry for the file, status: 'synced', action: 'added', direction: 'remote_to_local' }

Jeśli po stronie lokalnej i zdalnej występują sprzeczne zmiany w tym samym pliku, a także konflikt zasada rozdzielczości jest ustawiona na 'manual', stan pliku zmienia się na conflicting zostaną odłączone od usługi synchronizacji i nie zostaną zsynchronizowane, dopóki konflikt nie zostanie rozwiązany. W tym gdy wywoływane jest zdarzenie o następujących wartościach: { fileEntry: a fileEntry for the file, status: 'conflicting', action: null, direction: null }

Możesz dodać dla tego zdarzenia detektor, który będzie reagować na każdą zmianę stanu. Na przykład parametr Aplikacja Chrome Music Player nasłuchuje nowej muzyki zsynchronizowanej z Dyskiem Google, ale jeszcze nie zaimportowane do pamięci lokalnej użytkownika w danym kliencie. Każda znaleziona muzyka zostanie z nim zsynchronizowana klient:

chrome.syncFileSystem.onFileStatusChanged.addListener(function(fileInfo) {
  if (fileInfo.status === 'synced') {
    if (fileInfo.direction === 'remote_to_local') {
      if (fileInfo.action === 'added') {
        db.add(fileInfo.fileEntry);
      } else if (fileInfo.action === 'deleted') {
        db.remove(fileInfo.fileEntry);
      }
    }
  }
});

Sprawdzanie wykorzystania interfejsu API

Aby sprawdzić ilość danych używanych przez interfejs API, wyślij zapytanie do lokalnego katalogu w piaskownicy aplikacji lub bajty wykorzystania zwrócone przez funkcję syncFileSystem.getUsageAndQuota:

chrome.syncFileSystem.getUsageAndQuota(fileSystem, function (storageInfo) {
   updateUsageInfo(storageInfo.usageBytes);
   updateQuotaInfo(storageInfo.quotaBytes);
});

Możesz też sprawdzić miejsce w backendzie usługi synchronizacji użytkownika (na Dysku Google). Zsynchronizowane pliki są zapisane w ukrytym folderze Dysku Google o nazwie Chrome Syncable FileSystem. Folder nie będzie widoczny w Twój „Mój dysk” ale można ją otworzyć, wyszukując nazwę folderu w polu wyszukiwania. (Pamiętaj, że nie ma gwarancji, że układ folderu zdalnego nie będzie miał zgodności wstecznej między wersjami).