Integracja z systemem operacyjnym

Aplikacje internetowe mają ogromny zasięg. Działają na wielu platformach. Można je łatwo udostępniać za pomocą linków. Tradycyjnie jednak brakowało im integracji z systemem operacyjnym. Jeszcze niedawno nie dało się ich zainstalować. Na szczęście to się zmieniło i teraz możemy to wykorzystać, by dodać przydatne funkcje do naszych aplikacji PWA. Przyjrzyjmy się niektórym z tych opcji.

Praca z systemem plików

Typowy przepływ pracy użytkownika korzystający z plików wygląda tak:

• Wybierz plik lub folder z urządzenia i otwórz go bezpośrednio.
• Wprowadź zmiany w tych plikach lub folderach i zapisz je z powrotem.
• tworzyć nowe pliki i foldery;

Przed wprowadzeniem interfejsu File System Access API aplikacje internetowe nie mogły tego robić. Otwarcie plików wymagało przesłania pliku, a zapisanie zmian wymagało od użytkowników pobrania tych plików. Internet nie miał też dostępu do tworzenia nowych plików i folderów w systemie plików użytkownika.

Otwieranie pliku

Do otwierania plików służy metoda window.showOpenFilePicker(). Pamiętaj, że ta metoda wymaga gestu użytkownika, np. kliknięcia przycisku. Oto pozostała część konfiguracji otwierania pliku:

1. Przechwyć uchwyt pliku z interfejsu API selektora plików dostępu do systemu plików. Znajdziesz tam podstawowe informacje o pliku.
2. Korzystając z metody getFile() nicku, otrzymasz specjalny rodzaj Blob o nazwie File, który zawiera dodatkowe właściwości tylko do odczytu (takie jak nazwa i data ostatniej modyfikacji) dotyczące pliku. Ponieważ jest to obiekt blob, można go wywoływać przy użyciu metod (np. text()), aby pobrać zawartość.

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

Zapisuję zmiany

Aby zapisać zmiany w pliku, musisz też wykonać gest użytkownika. to:

1. Użyj uchwytu pliku, aby utworzyć FileSystemWritableFileStream.
2. Wprowadź zmiany w strumieniu. Nie spowoduje to zaktualizowania pliku. zwykle tworzony jest plik tymczasowy.
3. Wreszcie, po wprowadzeniu wszystkich zmian, zamykasz strumień, co powoduje przeniesienie zmian z tymczasowych do trwałych.

Zobaczmy to w kodzie:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

Uwaga: Safari wdraża interfejs File System Access API, nie dla systemu publicznego, ale jako prywatną piaskownicę źródła. Za pomocą tego interfejsu API możesz tylko odczytywać i zapisywać pliki w tym wirtualnym systemie plików.

Obsługa plików

Interfejs File System Access API umożliwia otwieranie plików z poziomu aplikacji, ale co z drugim? Użytkownicy chcą ustawić ulubioną aplikację jako domyślną do otwierania plików. Interfejs API do obsługi plików to eksperymentalny interfejs API, który umożliwia zainstalowane aplikacje PWA: Zarejestruj się jako moduł obsługi plików na urządzeniu użytkownika, określając w manifeście aplikacji internetowej typ MIME i rozszerzenie obsługiwane przez PWA. Możesz określić niestandardowe ikony plików dla obsługiwanych rozszerzeń.

Po rejestracji zainstalowana aplikacja PWA będzie widoczna w systemie plików użytkownika jako opcja umożliwiająca otwarcie pliku bezpośrednio w nim. Oto przykład konfiguracji pliku manifestu dla aplikacji PWA pod kątem odczytu plików tekstowych:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

Obsługa adresów URL

Dzięki obsłudze adresów URL aplikacja PWA może przechwytywać linki, które są częścią jej zakresu z systemu operacyjnego, i renderować je w oknie aplikacji PWA zamiast na karcie domyślnej przeglądarki. Jeśli na przykład otrzymasz wiadomość z linkiem do aplikacji PWA lub klikniesz precyzyjny link (adres URL prowadzący do konkretnego fragmentu treści) w aplikacji PWA, ta zawartość otworzy się w osobnym oknie.

To zachowanie jest automatycznie dostępne na Androidzie, gdy używany jest plik WebAPK, na przykład gdy użytkownik zainstaluje PWA w Chrome. Przechwytywanie adresów URL w aplikacjach PWA zainstalowanych w iOS i iPadOS z przeglądarki Safari jest niemożliwe.

Dla przeglądarek na komputerach społeczność przeglądarek przygotowała nową specyfikację. Ta specyfikacja jest obecnie eksperymentalna. doda nowego użytkownika pliku manifestu: url_handlers. Ta usługa oczekuje tablicy źródeł, którą chce przechwycić aplikacja PWA. Źródło Twojej aplikacji PWA zostanie przyznane automatycznie, a pozostałe źródła muszą zaakceptować tę obsługę w pliku o nazwie web-app-origin-association. Jeśli na przykład plik manifestu PWA jest hostowany w domenie web.dev i chcesz dodać źródło app.web.dev, będzie to wyglądać tak:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

W takim przypadku przeglądarka sprawdzi, czy plik istnieje pod adresem app.web.dev/.well-known/web-app-origin-association, akceptując obsługę adresu URL z adresu URL zakresu PWA. Ten plik musi utworzyć deweloper. W poniższym przykładzie plik wygląda tak:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

W przypadku Androida z WebAPK aplikacje PWA są automatycznie rejestrowane jako moduły obsługi zakresu manifestu przy użyciu filtra intencji Androida. Nie można dodawać do niego kolejnych źródeł ani zakresów. W przypadku iOS i iPadOS możesz obsługiwać tylko adresy URL z aplikacjami PWA opublikowanymi w App Store, np. utworzonymi za pomocą narzędzia PWABuilder.

Obsługa protokołów URL

Obsługa adresów URL działa w przypadku standardowych adresów URL protokołu https, ale można też stosować niestandardowe schematy URI, takie jak pwa://. W kilku systemach operacyjnych zainstalowane aplikacje uzyskują tę możliwość, rejestrując schematy.

W przypadku PWA ta funkcja jest włączana za pomocą interfejsu API z obsługą protokołu URL, który jest dostępny tylko na komputerach. Aby zezwolić na niestandardowe protokoły dla urządzeń mobilnych, musisz rozpowszechniać PWA w sklepach z aplikacjami.

Uwaga: w przypadku aplikacji PWA korzystających z interfejsu API obsługi protokołu URL nazwa protokołu musi być jednym z schematów na liście bezpiecznych lub musi zawierać prefiks web+. Zatem w naszym przykładzie link powinien wskazywać web+pwa://, aby otworzyć naszą progresywną aplikację internetową.

Aby się zarejestrować, możesz użyć metodyregisterProtocolHandler() lub element protocol_handlers w pliku manifestu z wybranym schematem i adresem URL, który chcesz wczytać w kontekście aplikacji PWA, na przykład:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

Możesz przekierować adres URL from-protocol do odpowiedniego modułu obsługi i uzyskać ciąg zapytania value w aplikacji PWA. Obiekt %s jest symbolem zastępczym adresu URL ze zmianą znaczenia, który aktywował operację. Jeśli więc masz link, np. <a href="web+pwa://testing">, aplikacja PWA otworzy /from-protocol?value=testing.

Połączenia z innymi aplikacjami

Za pomocą schematów URI możesz łączyć się z innymi zainstalowanymi aplikacjami (PWA i nie) w na każdej platformie. Wystarczy utworzyć link lub użyć funkcji navigator.href i wskazać odpowiedni schemat URI, przekazując argumenty w formie ze zmianą znaczenia adresu URL.

Możesz używać dobrze znanych schematów standardowych, takich jak tel: do połączeń telefonicznych, mailto: do wysyłania e-maili i sms: do wysyłania SMS-ów. lub możesz dowiedzieć się więcej o innych aplikacjach, schematy adresów URL, np. ze znanych komunikatów, map, nawigacji, spotkań online, sieci społecznościowych i sklepów z aplikacjami;

Uwaga: zamiast używać prywatnych schematów URI do komunikowania się z komunikatorami i aplikacjami społecznościowymi, możesz użyć ogólnego interfejsu Web Share API.

Udostępnianie w internecie

Obsługa przeglądarek

• 89
• 93.
• 
• 12,1

Źródło

Dzięki interfejsowi Web Share API aplikacja PWA może wysyłać treści do innych aplikacji zainstalowanych na urządzeniu za pomocą udostępnionego kanału.

Interfejs API jest dostępny tylko w systemach operacyjnych z mechanizmem share, takich jak Android, iOS, iPadOS, Windows i ChromeOS. Możesz udostępnić obiekt zawierający:

• Tekst (właściwości title i text)
• Adres URL (url usługa)
• Pliki (files usługa).

Aby sprawdzić, czy bieżące urządzenie może udostępniać proste dane, takie jak tekst, poszukaj metody navigator.share() w celu udostępnienia plików, które zostały sprawdzone pod kątem obecności metody navigator.canShare().

Aby wysłać prośbę o udostępnienie, zadzwoń pod numer navigator.share(objectToShare). To wywołanie zwraca obietnicę zależną od reguły undefined lub odrzuca z wyjątkiem wyjątku.

Cel udziału w internecie

Web Share Target API pozwala PWA być celem operacji udostępniania z innej aplikacji na tym urządzeniu niezależnie od tego, czy jest to PWA, czy nie. Twoja aplikacja PWA otrzymuje dane udostępniane przez inną aplikację.

Obecnie jest ona dostępna na Androidzie z WebAPK i ChromeOS. Działa dopiero wtedy, gdy użytkownik zainstaluje Twoją progresywną aplikację internetową. Przeglądarka rejestruje w systemie operacyjnym miejsce docelowe udostępniania po zainstalowaniu aplikacji.

Cel udziału w internecie konfigurujesz w pliku manifestu z elementem share_target zdefiniowanym w specyfikacji roboczej wersji miejsca docelowego udziału w internecie. share_target jest ustawiony na obiekt o kilku właściwościach:

action

Adres URL, który zostanie wczytany w oknie PWA i będzie odbierać udostępnione dane.

method

Do wykonania działania zostanie użyta metoda czasowników HTTP, np. GET, POST lub PUT.

enctype

(Opcjonalnie) Domyślny typ kodowania parametrów to application/x-www-form-urlencoded, ale w przypadku metod takich jak POST można go też ustawić jako multipart/form-data.

params

Obiekt, który mapuje udostępniane dane (z kluczy: title, text, url i files z udziału w internecie) na argumenty, które przeglądarka przekaże w adresie URL (w method: 'GET') lub w treści żądania przy użyciu wybranego kodowania.

.

.

Uwaga: możesz przeanalizować żądanie POST po stronie serwera lub w skrypcie service worker, aby uniknąć przesyłania danych do sieci. Więcej szczegółów znajdziesz w tym przykładzie.

Aby na przykład w przypadku aplikacji PWA określić, że chcesz otrzymywać udostępniane dane (tylko tytuł i adres URL), dodaj w pliku manifestu te dane:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

Jeśli na podstawie poprzedniego przykładu jakaś aplikacja w systemie udostępnia adres URL z tytułem, a użytkownik wybierze Twoją progresywną aplikację internetową w oknie, przeglądarka utworzy nowe menu nawigacyjne do elementu /receive-share/?shared_title=AAA&shared_url=BBB punktu początkowego, gdzie AAA to udostępniony tytuł, a BBB to udostępniony adres URL. Aby odczytać te dane z ciągu znaków window.location, możesz użyć JavaScriptu, analizując je za pomocą konstruktora URL.

Przeglądarka użyje nazwy i ikony PWA z pliku manifestu do przesłania wpisu udziału systemu operacyjnego. Nie możesz wybrać innego zestawu do tego celu.

Uwaga: upewnij się, że strona, na której są przechowywane udostępniane dane, jest dostępna offline. Nie chcesz, aby użytkownicy wybierali Twoją aplikację i znajdowali błąd, gdy nie mają połączenia z internetem.

Bardziej szczegółowe przykłady i informacje o odbieraniu plików znajdziesz w artykule Odbieranie danych udostępnionych za pomocą interfejsu Web Share Target API.

Wybór kontaktów

Obsługa przeglądarek

• x
• x
• x
• x

Źródło

Korzystając z interfejsu Contact Picker API, możesz poprosić urządzenie o wyrenderowanie natywnego okna ze wszystkimi kontaktami użytkownika, co umożliwi użytkownikowi wybranie jednej lub kilku kontaktów. Aplikacja PWA będzie mogła dzięki temu otrzymywać żądane dane od tych kontaktów.

Interfejs Contact Picker API jest dostępny głównie na urządzeniach mobilnych, a do wszystkich działań służy interfejs navigator.contacts na zgodnych platformach.

Możesz wysłać zapytanie o dostępne miejsca zakwaterowania za pomocą usługi navigator.contacts.getProperties() oraz poprosić o wybór jednego lub wielu kontaktów z listą wybranych właściwości.

Przykładowe właściwości to name, email, address i tel. Gdy poprosisz użytkownika o wybranie co najmniej 1 kontaktu, możesz wywołać funkcję navigator.contacts.select(properties) i przekazać tablicę właściwości, które chcesz otrzymać w zamian.

Uwaga: interfejs API nie gwarantuje, że zwrócone obiekty będą miały wszystkie żądane właściwości, dlatego należy ponownie sprawdzić ich obecność.

Poniższa próbka zawiera listę kontaktów otrzymanych przez selektor.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

Zasoby

• Interfejs File System Access API: ułatwianie dostępu do plików lokalnych
• Zezwól zainstalowanym aplikacjom internetowym jako moduły obsługi plików
• Obsługa plików w progresywnych aplikacjach internetowych
• Integracja z interfejsem udostępniania systemu operacyjnego za pomocą interfejsu Web Share API
• Udostępnianie treści innym aplikacjom
• Odbieranie danych udostępnionych za pomocą interfejsu Web Share Target API
• selektor kontaktów w internecie,