Jeśli jesteś specjalistą ds. technicznych lub analityczem ds. marketingu internetowego i szukasz nowoczesnych rozwiązań internetowych w aplikacji internetowej Adobe Experience Manager (AEM) i szukasz rozwiązania, które to umożliwia, jesteś w odpowiednim artykule. Z tego kursu dowiesz się, czym są progresywne aplikacje internetowe (PWA) i co jest potrzebne do utworzenia takiej aplikacji przy użyciu biblioteki WorkBox przez konfigurację bez konieczności kodowania.
Dlaczego warto korzystać z PWA?
Progresywne aplikacje internetowe wykorzystują możliwości współczesnego internetu. Można je instalować na urządzeniu, szybko się ładują, a przy kolejnych wizytach wczytują się błyskawicznie. Szybko reagują na opinie. Działają dobrze w przypadku zawodnych połączeń oraz w trybie offline. Progresywne aplikacje internetowe korzystają z nowoczesnych interfejsów API, które zapewniają atrakcyjne środowisko aplikacji. Oferują opcjonalny interfejs pełnoekranowy, możliwość aktualizowania w tle i dostęp do danych offline.
Aby przekształcić aplikację internetową w progresywną aplikację internetową, musisz dodać 2 artefakty:
- Plik manifestu aplikacji internetowej: plik konfiguracji JSON, który określa adres URL punktu wejścia aplikacji, ikonę reprezentującą PWA i inną konfigurację opisującą wygląd i działanie aplikacji.
- Skrypt service worker: skrypt udostępniający usługi działające w tle, które wzbogacają Twoją aplikację PWA przez określenie zasobów, z których ona korzysta, oraz strategii uzyskiwania do nich dostępu.
Co to jest skrypt service worker?
Skrypt service worker jest zasadniczo po prostu skryptem, który przeglądarka uruchamia niezależnie podczas interakcji z aplikacją internetową. Aktywny skrypt service worker udostępnia takie usługi, jak inteligentne buforowanie za pomocą interfejsu Cache API, dbanie o aktualność danych za pomocą interfejsu Background Sync API oraz integrację z powiadomieniami push. Skrypt service worker z odpowiednią strategią buforowania zapewnia stabilne i niezawodne środowisko dla użytkowników w różnych sytuacjach, błyskawicznie zwraca zasoby wstępnie 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 zapisu od zera. Pole robocze zostało utworzone, aby ułatwić Ci pracę. Workbox to zestaw bibliotek, które ułatwiają pisanie skryptów service worker i buforowanie pamięci podręcznej oraz zarządzanie nimi za pomocą interfejsu Cache Storage API. Mechanizmy Service Worker i interfejs Cache Storage API, jeśli są używane razem, kontrolują sposób żądania zasobów (HTML, CSS, JS, obrazów itp.) z sieci lub pamięci podręcznej, nawet dzięki czemu można zwracać zawartość z pamięci podręcznej, gdy jest offline. Dzięki Workbox możesz szybko skonfigurować oba te elementy oraz zarządzać nimi za pomocą kodu gotowego do wykorzystania w środowisku produkcyjnym.
Uaktualnienie witryny AEM do PWA
Adobe Experience Manager (AEM) to kompleksowe rozwiązanie do zarządzania treścią przeznaczone do tworzenia stron internetowych, aplikacji mobilnych, formularzy i treści informacyjno-reklamowych. Ułatwia ona zarządzanie treściami i zasobami marketingowymi.
AEM udostępnia bogatą bibliotekę do tworzenia aplikacji internetowych, jednak do tej pory tworzenie PWA przez dodanie skryptu service worker i pliku manifestu było bardzo trudne.
Witryny w usłudze Adobe Experience Manager to narzędzie do tworzenia interfejsu użytkownika, które jest częścią programu Adobe Experience Manager. W połączeniu z Adobe Experience Manager jako usługą w chmurze AEM Sites łatwo przekonwertować dowolną witrynę AEM lub aplikację jednostronicową na progresywną aplikację internetową z możliwością instalacji offline bez konieczności kodowania. Narzędzie to wykorzystuje Workbox do dostarczania sprawdzonych metod dla progresywnych aplikacji internetowych oraz niweluje złożoność tworzenia stałych plików manifestu i skryptów service worker.
AEM obsługuje lokalizację treści, co oznacza, że możesz prezentować różne elementy marki, a nawet różne treści offline w zależności od regionu. W tym celu utwórz różne konfiguracje PWA dla każdego mastera języka.
Wprowadzenie do konfiguracji PWA w AEM
Zaloguj się w narzędziu Adobe Experience Manager jako usługę w chmurze, wybierz dowolną stronę witryny lub mastera języka, a potem kliknij właściwości kliknięcia. Powinna się wyświetlić karta o nazwie Progresywna aplikacja internetowa (uwaga: jeśli jej nie widzisz, skontaktuj się z Adobe, by włączyć tę funkcję). Wystarczy kilka kliknięć, aby skonfigurować instalację oraz wygląd i styl progresywnych aplikacji internetowych.
Jeśli masz już za sobą samouczki dotyczące Witryn AEM, witryna WKND prawdopodobnie już Ci się podobała. W tym artykule jako punktu wyjścia użyto wersji demonstracyjnej WKND. Gdy skończysz, zaktualizujesz WKND z aplikacji internetowej do PWA przy użyciu WorkBox.
Skonfiguruj plik manifestu
Plik manifestu aplikacji internetowej to plik JSON zawierający właściwości opisujące wygląd i działanie aplikacji PWA. Witryny Adobe Experience Manager mają przyjazny interfejs użytkownika do konfigurowania właściwości.
Początkowy URL to punkt wejścia do Twojej aplikacji PWA. Gdy użytkownik kliknie ikonę aplikacji PWA na telefonie, uzyska dostęp do adresu URL uruchamiania. Tryb wyświetlania określa, czy aplikacja ma być wyświetlana w oknie, czy w trybie pełnoekranowym. 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 po zainstalowaniu aplikacji na urządzeniu. Konfiguracja przedstawiona 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 URL może się różnić od domyślnej strony docelowej dla Twojej domeny. Gdy zmienisz parametr start_url, możesz kierować użytkowników bezpośrednio do aplikacji zamiast na stronę domyślną, czyli stronę nieuwierzytelnioną lub nowego użytkownika. Dzięki temu użytkownicy PWA mogą korzystać z płynniejszych aplikacji.
Zdajemy sobie sprawę, że różne regiony mogą wyglądać inaczej. 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 połączonymi stronami.
Po otwarciu aplikacji PWA w przeglądarce możesz kliknąć prawym przyciskiem myszy i sprawdzić, czy otworzyć Narzędzia deweloperskie i wyświetlić plik manifestu w panelu Aplikacje.
Konfigurowanie skryptu service worker
Możesz skonfigurować treść do buforowania i użyć strategii buforowania.
Jeśli korzystasz z mechanizmów Service Worker, być może znasz strategie buforowania. Strategie dotyczące buforowania określają, które zasoby mają być zapisywane w pamięci podręcznej, i czy należy je szukać najpierw w pamięci podręcznej, najpierw w sieci, czy w pamięci podręcznej z opcją zastępczą sieci. Następnie możesz wybrać zasoby, które mają być wstępnie buforowane po zainstalowaniu skryptu service worker. Mechanizmy Service Worker aplikacji AEM implementują strategię ciepłego pamięci podręcznej, dzięki czemu wrażenia użytkownika nie pogarszają się, nawet jeśli podasz brakującą lub uszkodzoną ścieżkę.
W AEM termin „clientlibs” odnosi się do bibliotek po stronie klienta, czyli kombinacji powiązanych zasobów JavaScript, CSS i zasobów statycznych dodanych do projektu, które są udostępniane i używane przez przeglądarkę klienta. Możesz w łatwy sposób określić biblioteki po stronie klienta do używania w trybie offline, określając je w interfejsie.
Możesz też dołączyć zasoby innych firm, takie jak czcionki. Ta konfiguracja pamięci podręcznej offline udostępnia informacje o konfiguracji skryptowi service worker, który jest generowany dla Twojej aplikacji, która wewnętrznie korzysta ze skrzynki roboczej. To wszystko, co trzeba zrobić, aby zainstalować aplikację. Po zainstalowaniu ikona aplikacji będzie wyświetlana na ekranie głównym urządzenia mobilnego, tak jak w przypadku aplikacji platformy. Kliknięcie ikony spowoduje przejście do witryny.
Pamiętaj, że w każdej chwili możesz zmienić swoje treści lub te ustawienia. Po opublikowaniu zmian skrypt service worker jest aktualizowany w kliencie przez przeglądarkę, a użytkownik zobaczy komunikat, że dostępna jest nowsza wersja PWA. Użytkownik może kliknąć tę wiadomość, aby ponownie załadować aplikację i uzyskać najnowsze aktualizacje. Możesz otworzyć panel narzędzi i aplikacji dla programistów przeglądarki, aby wyświetlić szczegóły skryptu service worker.
Możesz zwiększyć ilość pamięci podręcznej, aby wyświetlić zawartość zapisaną lokalnie:
Wyniki
Czas przyjrzeć się wynikom ciężkiej pracy. Dzięki tylko konfiguracji i bez kodowania Twoja witryna AEM stała się progresywną aplikacją internetową.
Narzędzia deweloperskie w Chrome oferują audyt latarni morskiej, który pozwala sprawdzić, czy Twoja aplikacja internetowa i jej konfiguracja są zgodne ze standardami progresywnych aplikacji internetowych.
Podsumowanie
Progresywne aplikacje internetowe działają podobnie do aplikacji. Wykorzystują wieloplatformową i otwartą naturę sieci przy niższych kosztach programowania i utrzymania, a jednocześnie zapewniają kontrolę nad dystrybucją. Zwiększa to zaangażowanie i utrzymanie użytkowników, a co najważniejsze – powoduje wzrost współczynników konwersji. AEM w połączeniu z Workbox ułatwia przekształcanie istniejących witryn w progresywną aplikację internetową bez konieczności kodowania.
Źródła
- Samouczek WKND
- Skrypty service worker
- Interfejs API pamięci podręcznej
- Plik manifestu aplikacji internetowej
- Obsługa ikon adaptacyjnych w PWA z ikonami z możliwością maskowania
- Więcej informacji o witrynach Adobe Experience Manager
- Więcej informacji o Workbox:
- Strategie buforowania obszaru roboczego:
- Dowiedz się więcej o progresywnych aplikacjach internetowych.