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 brakowało im integracji z systemem operacyjnym. Jeszcze niedawno nie dało się ich nawet zainstalować. Na szczęście to się zmieniło i teraz możemy korzystać z tej integracji, aby dodawać przydatne funkcje do naszych aplikacji PWA. Przyjrzyjmy się niektórym z nich.

Praca z systemem plików

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

• Wybierz plik lub folder na urządzeniu i otwórz go bezpośrednio.
• Wprowadź zmiany w tych plikach lub folderach i zapisz te zmiany bezpośrednio.
• tworzenie nowych plików i folderów;

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

Otwieranie pliku

Do otwierania plików używamy metody window.showOpenFilePicker(). Ta metoda wymaga gestu użytkownika, np. kliknięcia przycisku. Pozostała część konfiguracji otwierania pliku:

1. Przechwyć nick pliku z interfejsu API selektora plików dostępnego w systemie plików. W ten sposób uzyskasz podstawowe informacje o pliku.
2. Używając metody getFile() uchwytu, uzyskasz specjalny rodzaj Blob o nazwie File, który zawiera dodatkowe właściwości tylko do odczytu (takie jak nazwa i data ostatniej modyfikacji) pliku. Ponieważ to obiekt blob, można wywołać jego metody, np. text(), aby pobrać jego 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ż użyć gestu użytkownika. Następnie:

1. Użyj uchwytu pliku, aby utworzyć FileSystemWritableFileStream.
2. Wprowadź zmiany w strumieniu. Nie spowoduje to zaktualizowania pliku na miejscu. Zamiast tego zwykle tworzony jest plik tymczasowy.
3. Na koniec, po zakończeniu wprowadzania zmian, zamykasz strumień, co powoduje przeniesienie zmian z tymczasowych na trwałe.

Spójrzmy na kod:

// 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();

Obsługa plików

Interfejs File System Access API pozwala otwierać pliki z poziomu aplikacji, ale co z drugą stroną? 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 zainstalowanie progresywnych aplikacji internetowych w pliku manifestu aplikacji internetowej. Umożliwia rejestrowanie jako modułu obsługi plików na urządzeniu użytkownika. Aby to zrobić, określ typ MIME i rozszerzenie pliku obsługiwane przez Twoją aplikację internetową. Możesz określić niestandardowe ikony plików dla obsługiwanych rozszerzeń.

Po zarejestrowaniu zainstalowana aplikacja PWA będzie widoczna jako opcja w systemie plików użytkownika, co umożliwi otwarcie pliku bezpośrednio w niej. Oto przykład konfiguracji pliku manifestu aplikacji PWA do odczytywania plików tekstowych:

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

Obsługa adresów URL

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

To zachowanie jest automatycznie dostępne na Androidzie, gdy używany jest WebAPK, na przykład gdy użytkownicy instalują aplikację PWA w Chrome. Przechwytywanie adresów URL w aplikacjach PWA zainstalowanych na iOS i iPadOS za pomocą Safari jest niemożliwe.

Użytkownicy korzystający z przeglądarek komputerowych stworzyli nową specyfikację. Ma ona obecnie charakter eksperymentalny i jest dodawana do pliku manifestu: url_handlers. Ta właściwość wymaga tablicy źródeł, które PWA chce przechwycić. Źródło Twojej aplikacji PWA zostanie przyznane automatycznie, a inne źródła muszą zaakceptować tę obsługę przy użyciu 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, powinno to wyglądać tak:

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

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

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

Obsługa protokołów adresów URL

Obsługa adresów URL działa ze standardowymi adresami URL protokołu https, ale można użyć niestandardowych schematów URI, takich jak pwa://. W niektórych systemach operacyjnych zainstalowane aplikacje uzyskują tę możliwość przez rejestrowanie schematów przez aplikacje.

W przypadku PWA ta funkcja jest włączana za pomocą interfejsu API obsługi protokołu URL, który jest dostępny tylko na komputerach. Możesz zezwolić na niestandardowe protokoły dla urządzeń mobilnych tylko, rozpowszechniając aplikację PWA w sklepach z aplikacjami.

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

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

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

Nawiązywanie połączeń z innymi aplikacjami

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

Możesz używać dobrze znanych schematów standardowych, takich jak tel: w przypadku połączeń telefonicznych, mailto: do wysyłania e-maili czy sms: w przypadku SMS-ów. Informacje o schematach adresów URL innych aplikacji, np. dobrze znane wiadomości, mapy, nawigacja, spotkania online, sieci społecznościowe i sklepy z aplikacjami, możesz poznać.

Udostępnianie w internecie

Dzięki Web Share API aplikacja PWA może przesyłać treści do innych aplikacji zainstalowanych na urządzeniu za pomocą kanału współdzielonego.

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

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

Aby sprawdzić, czy bieżące urządzenie może udostępniać proste dane, np. tekst, należy sprawdzić obecność metody navigator.share() w celu udostępniania plików pod kątem obecności metody navigator.canShare().

Prosisz o udostępnienie, wywołując metodę navigator.share(objectToShare). To wywołanie zwraca obietnicę, która jest równa undefined lub odrzuca z wyjątkiem.

Cel udostępniania w internecie

Interfejs Web Share Target API umożliwia używanie aplikacji PWA jako celu operacji udostępniania z innej aplikacji na danym urządzeniu, niezależnie od tego, czy jest to PWA. PWA otrzymuje dane udostępnione przez inną aplikację.

Jest obecnie dostępna na urządzeniach z Androidem z WebAPK i ChromeOS. Działa tylko wtedy, gdy użytkownik zainstaluje Twoją aplikację PWA. Gdy aplikacja jest zainstalowana, przeglądarka rejestruje miejsce docelowe udziału w systemie operacyjnym.

Konfigurujesz miejsce docelowe udziału w sieci w pliku manifestu z użytkownikiem share_target zdefiniowanym w wersji roboczej specyfikacji celu udostępniania w sieci. share_target jest ustawiony na obiekt z pewnymi właściwościami:

action

Adres URL, który zostanie wczytany w oknie PWA, które ma otrzymywać udostępnione dane.

method

Do wykonania tego działania zostanie użyta metoda czasownika HTTP, np. GET, POST lub PUT.

enctype

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

params

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

Możesz na przykład określić dla swojej aplikacji PWA, że chcesz otrzymywać udostępniane dane (tylko tytuł i adres URL), dodając do pliku manifestu:

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

Jeśli któraś aplikacja w systemie udostępnia URL z tytułem, a użytkownik wybierze Twoją aplikację PWA w oknie, przeglądarka utworzy nową nawigację do elementu /receive-share/?shared_title=AAA&shared_url=BBB źródła, gdzie AAA to udostępniony tytuł, a BBB to udostępniony adres URL. Aby odczytać dane z ciągu znaków window.location, możesz użyć JavaScriptu. W tym celu przeanalizuj je za pomocą konstruktora URL.

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

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

Za pomocą interfejsu Contact Picker API możesz zażądać, by urządzenie wyrenderowało natywne okno dialogowe ze wszystkimi kontaktami użytkownika. Dzięki temu użytkownik będzie mógł wybrać co najmniej 1 opcję wyboru. PWA może wtedy otrzymać odpowiednie dane od tych kontaktów.

Interfejs Contact Picker API jest dostępny głównie na urządzeniach mobilnych, a wszystko odbywa się przez interfejs navigator.contacts na zgodnych platformach.

Możesz poprosić o dostępne właściwości, o które chcesz wysyłać zapytania za pomocą funkcji navigator.contacts.getProperties(), oraz wybrać pojedynczy kontakt lub większą liczbę kontaktów z listą odpowiednich 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ć navigator.contacts.select(properties), przekazując tablicę właściwości, które chcesz uzyskać w zamian.

Poniższy przykład 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: uproszczenie dostępu do plików lokalnych
• Pozwól zainstalowanym aplikacjom internetowym jako modułami 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 udostępnionych danych za pomocą interfejsu Web Share Target API
• Selektor kontaktów w internecie