Jeśli jesteś liderem technicznym lub analitykiem marketingu internetowego i chcesz zapewnić swojej aplikacji internetowej Adobe Experience Manager (AEM) możliwość korzystania z nowoczesnej funkcji internetowej, to jesteś we właściwym artykule. W tym kursie dowiesz się, czym są progresywne aplikacje internetowe (PWA) i czego potrzebujesz, aby utworzyć PWA w AEM, korzystając z biblioteki WorkBox w ramach konfiguracji bez konieczności kodowania.
Dlaczego PWA?
Progresywne aplikacje internetowe wykorzystują możliwości nowoczesnej sieci. Można je instalować na urządzeniu, ładują się szybko, a podczas kolejnych wizyt otwierają się natychmiast. Szybko reagują na dane wejściowe. Działają one dobrze w przypadku niestabilnego połączenia lub offline. PWAs używają nowoczesnych interfejsów API, aby zapewnić użytkownikom atrakcyjne wrażenia z korzystania z aplikacji, w tym opcjonalny interfejs pełnoekranowy, aktualizacje w tle i dostęp do danych offline.
Aby ulepszyć aplikację internetową i przekształcić ją w progresywną aplikację internetową, musisz dodać 2 elementy:
- Manifest aplikacji internetowej: plik konfiguracji JSON, który definiuje adres URL punktu wejścia aplikacji, ikonę służącą do reprezentowania PWA oraz inne ustawienia opisujące wygląd i działanie aplikacji.
- Pracujący w tle pracownik: skrypt, który zapewnia usługi działające w tle, wzbogacające PWA poprzez definiowanie zasobów używanych przez PWA i strategii dostępu do nich.
Co to jest skrypt service worker?
Skrypt service worker to po prostu skrypt, który przeglądarka uruchamia niezależnie, gdy wchodzisz w interakcję z aplikacją internetową. Aktywny service worker zapewnia usługi takie jak inteligentne buforowanie za pomocą interfejsu Cache API, aktualizowanie danych za pomocą interfejsu Background Sync API oraz integrację z powiadomieniami push. Skrypt service worker z odpowiednią strategią buforowania zapewnia stabilne i niezawodne działanie w różnych sytuacjach, natychmiast zwraca zasoby zapisane w pamięci podręcznej, przechowuje dane w pamięci podręcznej i aktualizuje zasoby po połączeniu z internetem.
Skrypty service worker mogą być trudne do napisania od podstaw. Opracowaliśmy Workbox, aby to ułatwić. Workbox to zestaw bibliotek, które ułatwiają pisanie i zarządzanie serwisami działającymi w tle oraz buforowaniem za pomocą interfejsu Cache Storage API. Współdziałanie serwisów workerów i interfejsu Cache Storage API pozwala kontrolować sposób przesyłania żądań do zasobów (HTML, CSS, JS, obrazów itp.) z sieci lub pamięci podręcznej. Umożliwia to nawet zwracanie zmagazynowanych treści w trybie offline. Dzięki Workbox możesz szybko konfigurować te elementy i zarządzać nimi, a także korzystać z gotowego kodu.
Przechodzenie z witryny AEM na progresywną aplikację internetową
Adobe Experience Manager (AEM) to kompleksowe rozwiązanie do zarządzania treściami, które umożliwia tworzenie witryn, aplikacji mobilnych, formularzy i tablic informacyjnych. Ułatwia zarządzanie treściami i zasobami marketingowymi.
Chociaż AEM udostępnia bogatą bibliotekę do tworzenia aplikacji internetowych, do tej pory trudno było tworzyć PWA przez dodanie pracownika usługi i pliku manifestu.
Witryny Adobe Experience Manager to narzędzie do tworzenia UI, które jest częścią Adobe Experience Manager. W połączeniu z Adobe Experience Managerem jako usługą w chmurze aplikacja AEM Sites ułatwia konwertowanie dowolnej istniejącej witryny AEM lub aplikacji jednostronicowej na instalowaną aplikację Progressive Web z możliwością korzystania w trybie offline. Wystarczy tylko skonfigurować aplikację bez konieczności kodowania. Korzysta on z Workboxa, aby udostępniać sprawdzone metody dotyczące progresywnych aplikacji internetowych, i uproszcza pisanie szablonowych plików manifestu i usług.
AEM obsługuje lokalizację treści, co oznacza, że możesz mieć inny branding, a nawet inne treści offline w różnych lokalizacjach. Aby to zrobić, utwórz różne konfiguracje PWA dla każdej wersji głównej w danym języku.
Pierwsze kroki z konfiguracją PWA w AEM
Zaloguj się w programie Adobe Experience Manager jako usługę w chmurze i wybierz dowolną stronę lub stronę mistrza języka w usłudze Adobe Experience Manager, a następnie kliknij właściwości. Powinna być widoczna karta o nazwie Aplikacja internetowa PWA. (Uwaga: jeśli nie widzisz tej karty, skontaktuj się z firmą Adobe, aby włączyć tę funkcję). Instalację i wygląd aplikacji Progressive Web możesz skonfigurować w zaledwie kilka kliknięć.
Jeśli masz już za sobą samouczki dotyczące witryn AEM, prawdopodobnie widziałeś już witrynę WKND. W tym artykule jako punkt wyjścia posłuży nam przykładowy projekt WKND. Gdy skończysz, zaktualizujesz WKND z aplikacji internetowej do PWA przy użyciu WorkBox.
Konfigurowanie pliku manifestu
Plik manifestu aplikacji internetowej to plik JSON zawierający właściwości opisujące wygląd i zachowanie aplikacji internetowej. Witryny Adobe Experience Manager mają łatwy w obsłudze interfejs do konfigurowania właściwości.
Adres URL początkowy to punkt wejścia do PWA. Gdy użytkownik kliknie ikonę PWA na telefonie, uzyska dostęp do adresu URL uruchamiania aplikacji. Tryb wyświetlania określa, czy aplikacja ma być wyświetlana w oknie czy na pełnym ekranie. Możesz też określić orientację ekranu aplikacji. Kolor motywu to kolor okna i paska narzędzi, a kolor tła to kolor ekranu powitalnego podczas uruchamiania aplikacji. Ikona to obraz wyświetlany na ekranie głównym urządzenia lub w panelu aplikacji, gdy aplikacja jest zainstalowana na urządzeniu. Konfiguracja pokazana na obrazie generuje plik manifestu JSON widoczny poniżej.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
Adres URL początkowy może być inny niż domyślna strona docelowa w domenie. Zmiana parametru start_url umożliwia przekierowanie użytkowników bezpośrednio do aplikacji zamiast na stronę domyślną, która jest wyświetlana niezalogowanym lub nowym użytkownikom. Dzięki temu użytkownicy aplikacji PWA będą działać płynniej i bardziej jak aplikacje.
AEM rozumie, że różne wersje językowe mogą się różnić wyglądem i wrażeniem. Możesz skonfigurować różne właściwości, kolory i ikony dla różnych lokalizacji lub języków, a następnie zsynchronizować tę konfigurację z połączonymi stronami.
Po uzyskaniu dostępu do PWA w przeglądarce możesz kliknąć prawym przyciskiem myszy i wybrać opcję „Sprawdź”, aby otworzyć Narzędzia deweloperskie i wyświetlić plik manifestu w panelu Aplikacje.
Konfigurowanie instancji roboczej usługi
Możesz skonfigurować treści do umieszczenia w pamięci podręcznej i strategię umieszczania w pamięci podręcznej.
Jeśli używasz usług workerów, prawdopodobnie znasz strategie buforowania. Strategie buforowania określają, które zasoby mają być przechowywane w pamięci podręcznej oraz czy najpierw mają być wyszukiwane w pamięci podręcznej, w sieci, czy w pamięci podręcznej przy użyciu rezerwowej sieci. Następnie, gdy usługa zostanie zainstalowana, możesz wybrać zasoby do wstępnego buforowania. Workery usług aplikacji AEM implementują strategię aktywnej pamięci podręcznej, dzięki której działanie aplikacji nie zostanie zakłócone nawet wtedy, gdy określisz brakujący lub uszkodzony ścieżkę.
W AEM termin „clientlibs” odnosi się do bibliotek po stronie klienta: kombinacji powiązanych zasobów JavaScript, CSS i statycznych, które zostały dodane do projektu i są udostępniane oraz wykorzystywane przez przeglądarkę internetową klienta. Możesz łatwo skonfigurować biblioteki po stronie klienta do użytku offline, określając je w interfejsie użytkownika.
Możesz też dołączyć zasoby innych firm, np. czcionki. Ta konfiguracja pamięci podręcznej offline dostarcza informacje o konfiguracji mechanizmowi Service Worker, który jest generowany dla aplikacji korzystającej wewnętrznie ze skrzynki roboczej. To w zasadzie wszystko, co trzeba zrobić, aby móc zainstalować aplikację. Po zainstalowaniu ikona aplikacji pojawi się na ekranie głównym urządzenia mobilnego tak jak w przypadku aplikacji platformowej. Kliknięcie ikony spowoduje przejście do witryny tygodnia.
Pamiętaj, że w każdej chwili możesz zmienić treści lub ustawienia. Po opublikowaniu zmian przeglądarka zaktualizuje usługę w ramach klienta, a użytkownik zobaczy komunikat o dostępności nowszej wersji aplikacji internetowej. Użytkownik może kliknąć wiadomość, aby ponownie załadować aplikację i otrzymać najnowsze informacje. Aby wyświetlić szczegóły usługi, otwórz panel Narzędzia deweloperskie i aplikacje przeglądarki.
Aby wyświetlić treści zapisane w pamięci podręcznej, możesz rozwinąć pamięć podręczną:
Wyniki
Pora sprawdzić efekty swojej pracy. Dzięki konfiguracji bez konieczności kodowania właśnie ulepszyłeś swoją witrynę AEM, aby stała się progresywną aplikacją internetową.
Narzędzia dla programistów w Chrome zawierają audytowanie Lighthouse, które pozwala sprawdzić, na ile Twoja aplikacja internetowa i jej konfiguracja są zgodne ze standardami progresywnych aplikacji internetowych.
Podsumowanie
Progresywne aplikacje internetowe zapewniają użytkownikom wrażenia zbliżone do korzystania z aplikacji, korzystając z otwartej natury internetu i jego interoperacyjności przy niższych kosztach rozwoju i utrzymania, a także zapewniając kontrolę nad dystrybucją. Zwiększa to zaangażowanie i utrzymanie użytkowników oraz, co najważniejsze, podnosi współczynniki konwersji. AEM w połączeniu z Workbox ułatwia przekształcenie istniejącej witryny w PWA za pomocą konfiguracji bez konieczności kodowania.
Pliki referencyjne
- Samouczek WKND
- Skrypty Service Worker
- Cache API
- Plik manifestu aplikacji internetowej
- Obsługa ikon adaptacyjnych w PWAs z ikonami z możliwością maskowania
- Więcej informacji o witrynach w usłudze Adobe Experience Manager
- Więcej informacji o aplikacji Workbox:
- Strategie dotyczące buforowania danych w Workbox:
- Dowiedz się więcej o progresywnych aplikacjach internetowych.