Integracja z systemem operacyjnym

Aplikacje internetowe mają duży zasięg. działają na różnych platformach; Można je łatwo udostępniać za pomocą linków. Jednak tradycyjnie nie były one zintegrowane z systemem operacyjnym. Niedawno nie można było 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 plikami 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 je bezpośrednio.
• tworzyć nowe pliki i foldery.

Przed wprowadzeniem interfejsu File System Access API aplikacje internetowe nie mogły tego robić. Otwieranie plików wymagało ich przesłania, zapisywanie zmian wymagało ich pobrania, a strona internetowa nie miała w ogóle dostępu do tworzenia nowych plików i folderów w systemie plików użytkownika.

Otwieranie pliku

Aby otworzyć plik, użyj metody window.showOpenFilePicker(). Pamiętaj, że ta metoda wymaga działania użytkownika, np. kliknięcia przycisku. Oto pozostała część konfiguracji otwierania pliku:

1. Pobierz uchwyt pliku z interfejsu API selektora plików w ramach dostępu do systemu plików. Znajdziesz tu podstawowe informacje o pliku.
2. Za pomocą metody getFile() obiektu uchwytu 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 Blob, można wywoływać metody Blob, takie jak text(), aby uzyskać 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ż wykonać gest. 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. Gdy wprowadzisz wszystkie poprawki, zamknij transmisję, aby zmiany stały się trwałe.

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

Uwaga: Safari implementuje interfejs File System Access API nie dla publicznego systemu, ale jako piaskowni prywatnej dla pochodzenia. 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 aplikacji, ale co z odwrotną sytuacją? 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 zainstalowanym PWA: Rejestrowanie się jako moduł obsługi plików na urządzeniu użytkownika, określając typ MIME i rozszerzenie pliku obsługiwane przez Twoją PWA w pliku manifestu aplikacji internetowej. Możesz określić niestandardowe ikony plików dla obsługiwanych rozszerzeń.

Po zarejestrowaniu zainstalowana PWA będzie widoczna jako opcja w systemie plików użytkownika, co pozwoli mu otworzyć plik bezpośrednio w aplikacji. Oto przykład pliku manifestu PWA do odczytu 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 pobierać linki, które są częścią jej zakresu, z systemu operacyjnego i renderować je w oknie PWA, a nie na karcie domyślnej przeglądarki. Jeśli na przykład otrzymasz wiadomość zawierającą link do aplikacji PWA lub klikniesz w niej precyzyjny link (adres URL wskazujący na konkretny element treści), treści zostaną otwarte w oddzielnym oknie.

Takie zachowanie jest automatycznie dostępne na Androidzie, gdy używany jest WebAPK, np. gdy użytkownicy instalują progresywną aplikację internetową w Chrome. Nie można przechwytywać adresów URL w PWA zainstalowanych na iOS i iPadOS za pomocą Safari.

W przypadku przeglądarek na komputery stacjonarne społeczność przeglądarek internetowych opracowała nową specyfikację. Jest ona obecnie eksperymentalna i dodaje nowy element pliku manifestu: url_handlers. Ta właściwość oczekuje tablicy wartości, które PWA chce przechwycić. Źródło PWA zostanie przyznane automatycznie, a inne źródła muszą zaakceptować obsługę za pomocą pliku o nazwie web-app-origin-association. Jeśli np. plik manifestu PWA jest hostowany na stronie web.dev i chcesz dodać domenę app.web.dev, wygląda to 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. Deweloper musi utworzyć ten plik. W tym przykładzie plik wygląda tak:

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

Na Androidzie z WebAPK pliki PWA są automatycznie rejestrowane jako moduły obsługi dla zakresu pliku manifestu za pomocą 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 progresywnymi aplikacjami internetowymi opublikowanymi w App Store, np. utworzonymi za pomocą PWABuilder.

Obsługa protokołu URL

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

W przypadku aplikacji PWAs ta funkcja jest włączona za pomocą interfejsu URL protocol handler API, który jest dostępny tylko na komputerach. Niestandardowe protokoły możesz zezwolić tylko na urządzeniach mobilnych, rozpowszechniając PWA w sklepach z aplikacjami.

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

Aby zarejestrować moduł obsługi, możesz użyć metody registerProtocolHandler() lub użyć elementu protocol_handlers w manifeście, podając żądany schemat i adres URL, który chcesz wczytać w kontekście PWA, np.:

...
{
  "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 swojej aplikacji internetowej. Wartość %s to placeholder dla ujętego w cudzysłowie adresu URL, który wywołał operację. Jeśli więc masz gdzieś link, np. <a href="web+pwa://testing">, Twoja aplikacja PWA otworzy adres /from-protocol?value=testing.

Nawiązywanie połączeń z innych aplikacji

Możesz używać schematów identyfikatorów URI do łączenia się z innymi zainstalowanymi aplikacjami (z PWĄ lub bez) na urządzeniach użytkowników na każdej platformie. Wystarczy, że utworzysz link lub użyjesz elementu navigator.href i wskażesz żądany schemat identyfikatora URI, przekazując argumenty w postaci ucieczki znaków w adresie URL.

Możesz używać znanych schematów standardowych, takich jak tel: do połączeń telefonicznych, mailto: do wysyłania e-maili lub sms: do wysyłania SMS-ów. Możesz też zapoznać się ze schematami adresów URL innych aplikacji, np. z popularnych komunikatorów, map, nawigacji, aplikacji do spotkań online, sieci społecznościowych i sklepów z aplikacjami.

Uwaga: zamiast używać prywatnych schematów URI do komunikacji z aplikacją do obsługi wiadomości i mediów społecznościowych, możesz użyć ogólnego interfejsu Web Share API.

Udostępnianie przez internet

Browser Support

• 89
• 93
• 
• 12.1

Source

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

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, takie jak tekst, sprawdź, czy jest obecna metoda navigator.share(). Aby udostępnić pliki, sprawdź, czy jest obecna metoda navigator.canShare().

Prośbę o udostępnienie możesz wysłać, dzwoniąc na numer navigator.share(objectToShare). To wywołanie zwraca obietnicę, która zwraca undefined lub odrzuca z wyjątkiem.

Docelowy adres URL udostępniania przez internet

Interfejs API do udostępniania treści w internecie umożliwia udostępnianie treści z Twojej aplikacji PWA z innej aplikacji na tym samym urządzeniu, niezależnie od tego, czy jest to aplikacja PWA, czy nie. PWA otrzymuje dane udostępnione przez inną aplikację.

Jest ona obecnie dostępna na Androidzie z WebAPK i ChromeOS i działa tylko wtedy, gdy użytkownik zainstaluje Twoją PWA. Po zainstalowaniu aplikacji przeglądarka rejestruje docelowe miejsce udostępniania w systemie operacyjnym.

W pliku manifestu możesz skonfigurować docelowe miejsce udostępniania w internecie za pomocą elementu share_target zdefiniowanego w specyfikacji szkicu docelowego miejsca udostępniania w internecie. Wartość share_target jest ustawiana na obiekt z pewnymi właściwościami:

action

Adres URL, który zostanie załadowany w oknie PWA, w którym mają być wyświetlane udostępnione dane.

method

Do wykonania działania zostanie użyta metoda

(czasownik HTTP), np. GET, POST lub PUT.

enctype

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

params

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

Uwaga: jeśli chcesz uniknąć połączenia z siecią, możesz przeanalizować żądanie POST po stronie serwera lub w ramach usługi pomocniczej. Więcej informacji znajdziesz w tym pliku.

Możesz np. określić w 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"
   }
}
...

W przypadku poprzedniego przykładu, jeśli jakakolwiek aplikacja w systemie udostępnia adres URL z nazwą, a użytkownik wybierze Twoją PWA w oknie dialogowym, przeglądarka utworzy nową nawigację do /receive-share/?shared_title=AAA&shared_url=BBB, gdzie AAA to udostępniany tytuł, a BBB to udostępniany adres URL. Za pomocą kodu JavaScript możesz odczytać te dane z ciągu window.location, analizując go za pomocą konstruktora URL.

Przeglądarka użyje nazwy i ikony PWA z Twojego pliku manifestu, aby wypełnić wpis o udostępnianiu w systemie operacyjnym. Nie możesz wybrać innego zestawu.

Uwaga: upewnij się, że strona, która obsługuje udostępnione dane, jest dostępna offline. Nie chcesz, aby użytkownicy wybierając Twoją aplikację, napotykali błąd z powodu braku połączenia z internetem.

Więcej przykładów i informacji o odbieraniu plików znajdziesz w artykule Odbieranie udostępnionych danych za pomocą interfejsu Web Share Target API.

Wybór kontaktów

Browser Support

• x
• x
• x
• x

Source

Za pomocą interfejsu Contact Picker API możesz poprosić urządzenie o wyświetlenie natywnego okna dialogowego ze wszystkimi kontaktami użytkownika, aby mógł on wybrać co najmniej 1 kontakt. Dzięki temu PWA może otrzymywać od tych kontaktów potrzebne dane.

Interfejs API selektora kontaktów jest dostępny głównie na urządzeniach mobilnych, a wszystkie czynności wykonuje się za pomocą interfejsu navigator.contacts na zgodnych platformach.

Możesz poprosić o dostęp do dostępnych usług za pomocą navigator.contacts.getProperties() oraz o wybór jednego lub wielu kontaktów z listy odpowiednich usług.

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), przekazując tablicę właściwości, które chcesz otrzymać.

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

W tym przykładzie podajemy 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

• File System Access API: uproszczenie dostępu do plików lokalnych
• Zezwalanie zainstalowanym aplikacjom internetowym na obsługę plików
• Praca z plikami 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