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. Dowiesz się, czym są progresywne aplikacje internetowe (PWA) i co jest potrzebne do utworzenia aplikacji PWA w AEM z wykorzystaniem biblioteki WorkBox przez konfigurację bez konieczności kodowania.
Dlaczego progresywna aplikacja internetowa?
Progresywne aplikacje internetowe wykorzystują możliwości współczesnego internetu. Można je zainstalować na urządzeniu, szybko się wczytują, a kolejne wizyty wczytują się natychmiast. Szybko reagują na informacje. Działają one dobrze w przypadku niestabilnego połączenia lub offline. Progresywne aplikacje internetowe (PWA) korzystają z nowoczesnych interfejsów API, aby umożliwiać wygodne korzystanie z aplikacji. Można w nich korzystać z opcjonalnego pełnego ekranu, aktualizowania w tle i dostępu do danych w trybie offline.
Aby przekształcić aplikację internetową w progresywną aplikację internetową, dodaj 2 artefakty:
- Plik web app manifes: plik konfiguracji JSON, który określa URL punktu wejścia aplikacji, ikonę służącą do reprezentowania PWA i innej konfiguracji opisującej wygląd i działanie aplikacji.
- Skrypt service worker: skrypt udostępniający usługi w tle, które wzbogacają Twoją PWA, definiując zasoby używane przez tę aplikację oraz strategie uzyskiwania do nich dostępu.
Co to jest skrypt service worker?
Skrypt service worker jest po prostu skryptem, który przeglądarka działa niezależnie podczas korzystania z aplikacji internetowej. Aktywny skrypt service worker udostępnia usługi takie jak inteligentne buforowanie za pomocą interfejsu Cache API, aktualizowanie danych za pomocą interfejsu Background Sync API i 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 pisania od zera. Opracowaliśmy Workbox, aby to ułatwić. Workbox to zbiór bibliotek, które ułatwiają pisanie Skryptów roboczych i buforowanie oraz zarządzanie nimi za pomocą interfejsu Cache Storage API. Skrypty service worker i interfejs Cache Storage API – używane razem – kontrolują sposób żądania zasobów (HTML, CSS, JS, obrazy itp.) z sieci lub pamięci podręcznej. Pozwala to nawet zwrócić zawartość pamięci podręcznej w trybie offline. Workbox pozwala szybko skonfigurować m.in. kod w środowisku produkcyjnym oraz zarządzać tymi funkcjami.
Uaktualnianie witryny AEM do PWA
Adobe Experience Manager (AEM) to kompleksowe rozwiązanie do zarządzania treścią do tworzenia stron internetowych, aplikacji mobilnych, formularzy i treści informacyjno-reklamowych. Ułatwia zarządzanie treściami marketingowymi i zasobami marketingowymi.
Chociaż AEM zapewnia bogatą bibliotekę do tworzenia aplikacji internetowych, do tej pory trudno było stworzyć PWA przez dodanie skryptu service worker i pliku manifestu.
Witryny Adobe Experience Manager to narzędzie do tworzenia UI, które jest częścią Adobe Experience Manager. W przypadku aplikacji Adobe Experience Manager jako usługi w chmurze usługa AEM Sites ułatwia konwersję dowolnej witryny AEM lub aplikacji jednostronicowej na możliwą do zainstalowania progresywną aplikację internetową działającą w trybie offline, bez konieczności kodowania. Wykorzystuje Workbox, aby udostępniać sprawdzone metody dotyczące progresywnych aplikacji internetowych, a także upraszcza tworzenie powtarzalnych plików manifestu i skryptów service worker.
AEM obsługuje lokalizację treści, co oznacza, że możesz stosować różne elementy marki, a nawet treści offline w różnych językach. W tym celu utwórz różne konfiguracje aplikacji PWA dla każdego mastera języka.
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 wyświetlić się karta Progresywna aplikacja internetowa. (Uwaga: jeśli nie widzisz tej karty, skontaktuj się z firmą Adobe, aby włączyć tę funkcję). Wystarczy kilka kliknięć, aby skonfigurować instalację oraz wygląd i działanie progresywnych aplikacji internetowych.
Jeśli znasz już nasze samouczki Witryn AEM, prawdopodobnie znasz już witrynę WKND. Punktem wyjścia w tym artykule jest demonstracja WKND. Gdy skończysz, zaktualizujesz WKND z aplikacji internetowej do PWA przy użyciu WorkBox.
Konfigurowanie pliku manifestu
Manifest aplikacji internetowej to plik JSON zawierający właściwości opisujące wygląd i działanie PWA. Witryny Adobe Experience Manager mają łatwy w obsłudze interfejs do konfigurowania właściwości.
URL początkowy to punkt wejścia aplikacji PWA. Gdy użytkownik kliknie ikonę PWA na telefonie, otworzy się URL uruchamiania. 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 po uruchomieniu aplikacji. Ikona to obraz wyświetlany na ekranie głównym urządzenia lub w panelu aplikacji, gdy aplikacja jest zainstalowana na urządzeniu. Konfiguracja widoczna na obrazie generuje plik JSON manifestu 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"
}
]
}
Początkowy adres URL może się różnić od domyślnej strony docelowej dla domeny. Zmieniając parametr start_url, możesz kierować użytkowników bezpośrednio do aplikacji zamiast do strony domyślnej wyświetlanej nieuwierzytelnionym lub nowym użytkownikom. Dzięki temu użytkownicy aplikacji PWA będą działać płynniej i bardziej jak aplikacje.
Firma AEM zdaje sobie sprawę, że różne języki mogą mieć różny wygląd i charakter. Możesz skonfigurować różne właściwości, kolory i ikony dla różnych języków i języków, a następnie zsynchronizować konfigurację z linkowanymi stronami.
Po uzyskaniu dostępu do PWA w przeglądarce możesz kliknąć prawym przyciskiem myszy i sprawdzić, czy chcesz otworzyć Narzędzia deweloperskie, a potem wyświetlić plik manifestu w panelu Aplikacje.
Konfigurowanie skryptu service worker
Możesz skonfigurować buforowanie treści i wybraną strategię buforowania.
Jeśli zdarzyło Ci się korzystać z skryptów service worker, być może 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 możesz wybrać zasoby do wstępnego buforowania, gdy zainstalowany jest skrypt service worker. Instancje robocze usługi aplikacji AEM wdrażają strategię ciepłej pamięci podręcznej, co oznacza, że funkcje nie będą działać, nawet jeśli określisz brakującą lub uszkodzoną ścieżkę.
W AEM określenie „clientlibs” odnosi się do bibliotek po stronie klienta: kombinacji powiązanych zasobów JavaScript, CSS i zasobów statycznych dodanych do projektu, które są obsługiwane i wykorzystywane przez przeglądarkę klienta. Możesz łatwo skonfigurować biblioteki po stronie klienta do używania offline, określając je w interfejsie.
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 jej ikona pojawi się na ekranie głównym urządzenia mobilnego tak samo jak w przypadku aplikacji platformy. Kliknięcie ikony spowoduje przejście do tydz.
Pamiętaj, że w każdej chwili możesz zmienić te ustawienia lub treści. Po opublikowaniu zmian skrypt service worker zostanie zaktualizowany po stronie klienta przez przeglądarkę, a użytkownik zobaczy komunikat o dostępności nowszej wersji PWA. Użytkownik może kliknąć wiadomość, aby ponownie załadować aplikację i pobrać najnowsze aktualizacje. Aby wyświetlić szczegóły skryptu service worker, możesz otworzyć panel narzędzi i aplikacji dla programistów w przeglądarce.
Rozszerzając zakres pamięci podręcznej, możesz wyświetlić treści przechowywane lokalnie:
Wyniki
Czas sprawdzić wyniki Twojej ciężkiej pracy. Sama konfiguracja i bez kodowania sprawiły, że Twoja witryna AEM stała się progresywną aplikacją internetową.
Narzędzia dla programistów Chrome udostępniają audyt typu „latarnia morska”, który pozwala sprawdzić, w jakim stopniu Twoja aplikacja internetowa i konfiguracja są zgodne ze standardami progresywnych aplikacji internetowych.
Podsumowanie
Progresywne aplikacje internetowe to interfejs podobny do aplikacji. Wykorzystuje on wiele platform i otwarty charakter sieci przy niższych kosztach tworzenia i utrzymania, a jednocześnie zapewnia kontrolę nad dystrybucją. Zwiększa to zaangażowanie i utrzymanie użytkowników oraz, co najważniejsze, podnosi współczynniki konwersji. Rozszerzenie AEM w połączeniu z Workbox ułatwia przekształcenie istniejącej witryny w PWA bez konieczności kodowania.
Pliki referencyjne
- Samouczek WKND
- Skrypty service worker
- Interfejs API Cache
- Plik manifestu aplikacji internetowej
- Obsługa ikon adaptacyjnych w PWA z ikonami z możliwością maskowania
- Więcej informacji o witrynach w Adobe Experience Manager
- Więcej informacji o aplikacji Workbox:
- Strategie dotyczące buforowania w Workbox:
- Dowiedz się więcej o progresywnych aplikacjach internetowych.