Wszystko o progresywnych aplikacjach internetowych i wdrażaniu ich w Drupalu 9

Internet został po raz pierwszy zbudowany w celu lepszej komunikacji dla wojska i naukowców w latach 60. XX wieku. Wkrótce Internet przekształcił się w rewolucyjne zjawisko około lat 90. i od tego czasu jest nie do powstrzymania. Chociaż cel sieci ciągle się zmieniał, jednym z celów, który pozostał niezmienny, była wygoda.

Potrzeba wygody zaowocowała wieloma innowacyjnymi sposobami dostępu do Internetu. Natywne aplikacje mobilne i aplikacje internetowe to dwie takie technologie, dzięki którym przeglądanie Internetu jest łatwe i wygodne. W tym artykule będziemy rozmawiać o Progressive Web Apps i o tym, jak można je zaimplementować w Drupalu za pomocą modułu Drupal Progressive Web App. Ale zanim zagłębimy się w to wszystko, spójrzmy na funkcje aplikacji natywnych i internetowych oraz jak progresywne aplikacje internetowe wypełniają luki.

Funkcje natywnych aplikacji mobilnych

• Są to aplikacje specyficzne dla platformy. Oznacza to również, że należy je przebudować na każdą nową platformę (iOS, Android).
• Trzeba pobrać.
• Zwykle superszybko.
• Bogaty w funkcje i funkcjonalności.
• Może płynnie wtapiać się w dowolne urządzenie i czuć się jego częścią.
• Może pracować w trybie offline.
• Mogą łatwo uzyskać dostęp do danych urządzenia, sprzętu urządzenia i lokalnego systemu plików.
• Droższe w rozwoju, utrzymaniu i aktualizacji.
• Są wstępnie zatwierdzone ze względów bezpieczeństwa i można je pobrać ze sklepów z aplikacjami.
• Trudno przeszukiwać wyszukiwarki.

Funkcje aplikacji internetowych

• Nie zależy od platformy. Aby uzyskać do nich dostęp, potrzebujesz tylko przeglądarki. Obsługuje większość nowoczesnych przeglądarek. Nie trzeba pobierać.
• Brak konkretnego SDK do ich rozwijania. Frontend jest tworzony przy użyciu HTML, CSS, JavaScript i stosu LAMP lub MEAN dla zaplecza.
• Nie ma potrzeby aktualizacji. Mniejsze koszty rozwoju i utrzymania.
• Chociaż wymaga uwierzytelniania, bezpieczeństwo stanowi problem, ponieważ może być podatne na nieautoryzowany dostęp.
• Nie działają w trybie offline i mogą działać wolniej niż natywne aplikacje mobilne.
• Nie są one wymienione w sklepach z aplikacjami, więc ich znalezienie może być trudniejsze.

Co to są progresywne aplikacje internetowe i jak wypełniają lukę?

Krótko mówiąc, natywne aplikacje internetowe są bardzo wydajne, ale brakuje im zasięgu. Z kolei aplikacje internetowe mają szerszy zasięg, ale brakuje im możliwości. I tu właśnie pojawiają się progresywne aplikacje internetowe, które wypełniają luki.

Progressive Web Apps to idealne połączenie zalet aplikacji natywnych i aplikacji internetowych. Korzystając z nowoczesnych funkcji internetowych, progresywne aplikacje internetowe (PWA) mogą dostarczać użytkownikom środowisko podobne do aplikacji. Łączy funkcje oferowane przez większość nowoczesnych przeglądarek z zaletami doświadczeń mobilnych. Możesz tworzyć aplikacje podobne do natywnych, niezwykle złożone i instalowalne. Ponieważ Web Assembly jest obecnie obsługiwany przez większość przeglądarek, PWA można budować w językach wybranych przez programistę, co znacznie zwiększa zakres i elastyczność oferowanych przez nie funkcjonalności.

Funkcje progresywnych aplikacji internetowych

• Są niezależne od platformy i urządzenia. Działa pięknie w każdej przeglądarce.
• Ładują się szybko i są niezwykle niezawodne (nawet przy niskiej prędkości Internetu). Przewijanie jest bardzo płynne i płynne.
• Może pracować również w trybie offline.
• Można włączyć natywne powiadomienia push przypominające aplikacje.
• Może uzyskiwać dostęp do sprzętu i danych urządzenia, takich jak aplikacje natywne.
• Skróty można dodawać na ekranie głównym użytkownika (zamiast je pobierać)
• Nie ma potrzeby skomplikowanych instalacji. Może łatwo udostępniać adresy URL.
• Responsywne na wszystkich urządzeniach.
• Są łatwiejsze i szybsze w rozwoju. Konserwacja również jest łatwa.

Zanim zaczniemy mówić o module PWA w Drupalu, przyjrzyjmy się minimalnym wymaganiom do zbudowania PWA -

• Powinien być uruchamiany przez HTTPS.
• Powinien zawierać Service Worker – Service Worker to skrypt (javascript), który działa przez https w przeglądarce i zapewnia dostęp do przeglądarki. Zapewnia natywne funkcje podobne do aplikacji, takie jak dostarczanie treści offline, powiadomienia push itp.
• Powinien mieć Web App Manifest – czyli plik JSON zawierający metadane z informacjami o aplikacji internetowej, takimi jak nazwa, opis, autor i inne. Jest to również przydatne do optymalizacji pod kątem wyszukiwarek.

Moduł PWA Drupal – Jak tworzyć progresywne aplikacje internetowe z Drupalem 9 (i 8)

Moduł Drupal PWA jest łatwy w instalacji i zawiera Service Worker (do buforowania i innych funkcji podobnych do aplikacji offline) oraz Manifest.js, które możesz skonfigurować. Musisz jednak upewnić się, że masz zainstalowany SSL przed rozpoczęciem procesu instalacji PWA. Jeśli Twoje wymagania są wyjątkowo specyficzne z mnóstwem dostosowań, możesz opracować PWA, korzystając z platform frontonu, takich jak Angular lub React, i dostosować własnego pracownika Service Worker.

Instalowanie modułu PWA Drupal 9

W przypadku Drupala 7 instalacja modułu Progressive Web App Drupal była tak prosta, jak pobranie i włączenie modułu. Możesz wygenerować plik manifest.js za pomocą formularza konfiguracyjnego i zweryfikować go. Jednak w Drupal 9 nie możemy zintegrować tej funkcjonalności bezpośrednio poprzez włączenie modułu PWA. Powodem jest to, że nie zapewnia opcji konfiguracji pliku manfest.js.

1. Zainstaluj moduł pobierając i włączając moduł PWA Drupal.

2. W przypadku Drupala 9 zastosuj tę poprawkę

3. Po zakończeniu przejdź do konfiguracji -> PROGRESSIVE WEB APP -> Ustawienia PWA i dodaj wymagane informacje.

Pracownik serwisu

Adresy URL do pamięci podręcznej — tutaj możesz określić strony, które mają być udostępniane nawet w trybie offline. Wspomniane tutaj adresy URL będą przechowywane w pamięci podręcznej - pamiętaj o opróżnianiu pamięci podręcznej za każdym razem, gdy wprowadzasz tutaj jakiekolwiek aktualizacje.
Adresy URL do wykluczenia — jeśli masz strony, które absolutnie muszą działać tylko z Internetem, wspomnij o nich tutaj.
Strona offline — wyświetlaj spersonalizowaną stronę użytkownikom, którzy przechodzą w tryb offline, a strona nie jest buforowana.

Manifest.json

Plik manifest.json Drupala umożliwia użytkownikom dodawanie PWA do ekranu głównego. Zawiera konfiguracje, które możesz modyfikować, aby zmienić zachowanie PWA – takie jak nazwa, nazwa wyświetlana, kolor tła, orientacja i inne.

Plik zostanie dodany do tagu head strony indeksu.
<link rel="manifest" href = "/manifest.json">

Poniższy obraz przedstawia opcję „Dodaj do ekranu głównego”. Po wybraniu tej opcji na ekranie głównym zostanie utworzona ikona.