Jak sprawić, aby Twoja aplikacja PWA wyświetlała się obok aplikacji związanych z konkretną platformą w interfejsach udostępniania na poziomie systemu
Interfejs Web Share Target API umożliwia wyświetlanie progresywną aplikację internetową arkusza udostępniania na poziomie systemu użytkownika po jego zainstalowaniu. To świetnie działa, jeśli masz serwer gdy nie otrzymacie prośby, będzie o wiele trudniej podjąć pracę.
W tym artykule użyjemy funkcji Workbox, zestaw JavaScriptu bibliotek do dodania obsługi offline do aplikacji internetowych w celu utworzenia docelowego adresu URL udostępniania które w całości działa w skrypcie service worker. Pozwala to witrynom statycznym aplikacje jednostronicowe służą do udostępniania treści bez dedykowanego punktu końcowego serwera.
Na tej samej stronie
Jeśli nie wiesz, jak działa cel udostępniania w internecie, przeczytaj artykuł Odbieranie danych udostępnionych za pomocą udostępniania w internecie. Docelowy interfejs API zawiera szczegółowe omówienie. Oto krótka analiza.
Wdrożenie funkcji docelowego udziału w internecie składa się z 2 etapów. Po pierwsze,
zaktualizuj manifest aplikacji internetowej, aby wskazać, że chcesz udostępniać aplikację.
miejsce docelowe po zainstalowaniu. Ten przykład kieruje udostępnienia do adresu URL /share
za pomocą żądania POST
. Jest zakodowany jako wieloczęściowa postać z tytułem
name
, tekst to description
, a obrazy JPEG – photos
.
…
"share_target": {
"action": "/share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"files": [
{
"name": "photos",
"accept": ["image/jpeg", ".jpg"]
}
]
}
}
…
Skrypty service workbox współdzielą cele Workbox
Choć zwykle jest obsługiwane przez punkt końcowy serwera, możesz łatwo udostępnić celem jest zarejestrowanie trasy bezpośrednio w mechanizmie Service Worker do obsługi użytkownika. Dzięki temu aplikacja będzie miała miejsce docelowe bez backendu.
W Workbox możesz to zrobić przez
rejestrując trasę obsługiwaną przez skrypt service worker. Zacznij od zaimportowania
registerRoute
od: 'workbox-routing'
. Zwróć uwagę, że jest ona zarejestrowana w
/share
, tę samą podaną w przykładowym pliku manifestu aplikacji internetowej. W
w odpowiedzi wywołuje shareTargetHandler()
.
import { registerRoute } from 'workbox-routing';
registerRoute(
'/share',
shareTargetHandler,
'POST'
);
Funkcja shareTargetHandler()
jest asynchroniczna i przyjmuje zdarzenie, czekając
(i pobiera z niego pliki multimedialne).
async function shareTargetHandler ({event}) {
const formData = await event.request.formData();
const mediaFiles = formData.getAll('media');
for (const mediaFile of mediaFiles) {
// Do something with mediaFile
// Maybe cache it or post it back to a server
});
// Do something with the rest of formData as you need
// Maybe save it to IndexedDB
};
Możesz z nimi zrobić, co chcesz. Możesz je zapisać w pamięci podręcznej. Ty wysłać je gdzieś z prośbą o pobranie. Możesz też użyć drugiego adresu, plik manifestu, np. wyświetlanie strony z parametrami zapytania dla drugiej udostępniane elementy lub przechowywanie danych i wskaźników do nośnika w pamięci podręcznej Interfejs API lub IndexedDB.
Możesz ją wypróbować w przykładowej aplikacji Fugu Dziennik i wyświetlany skrypt service worker w swoim źródle .
Jedną z typowych rozwiązań jest zatrzymywanie udostępnionych zasobów do czasu, aż sieć polepszy dostępnych połączeń. Workbox obsługuje również okresowe tło synchronizację.
Podsumowanie
Interfejs Share Target API pozwala w prosty sposób zintegrować swoją sieć progresywną instalując aplikację na urządzeniach użytkowników, porównując je z aplikacjami zależnymi od platformy to ważne zadanie, jakim jest udostępnianie treści między aplikacjami. Zazwyczaj wymaga to jednak który może odebrać żądanie. Użycie Workbox do utworzenia udostępnienia docelowej trasy bezpośrednio w skryptach service worker, aplikacja jest wolna pozwala udostępniać cel w aplikacjach w trybie offline i bez z backendami.
Zdjęcie: Elaine Casap, Unsplash