Totul despre Progressive Web Apps și despre implementarea lor în Drupal 9

Internetul a fost construit pentru prima dată cu scopul unei mai bune comunicări pentru militari și oameni de știință în anii 1960. În curând, Web-ul s-a transformat într-un fenomen revoluționar în jurul anilor 1990 și de atunci a fost de neoprit. Deși scopul web-ului a continuat să se schimbe, un scop care a rămas constant a fost confortul.

Nevoia de comoditate a adus multe modalități inovatoare de acces la internet. Aplicațiile mobile native și aplicațiile web sunt două astfel de tehnologii care au făcut navigarea pe internet ușoară și convenabilă. În acest articol, vom vorbi despre Progressive Web Apps și despre cum le puteți implementa cu Drupal folosind modulul Drupal Progressive Web App. Dar înainte de a ne aprofunda în toate acestea, să ne uităm la caracteristicile aplicațiilor native și web și la modul în care aplicațiile web progresive completează golurile.

Caracteristicile aplicațiilor mobile native

• Sunt aplicații specifice platformei. Aceasta înseamnă, de asemenea, că trebuie reconstruite pentru fiecare platformă nouă (iOS, Android).
• Trebuie descărcat.
• De obicei super-rapid.
• Bogat în caracteristici și funcționalități.
• Se poate integra perfect în orice dispozitiv și se poate simți ca parte a acestuia.
• Poate lucra offline.
• Aceștia pot accesa cu ușurință datele dispozitivului, hardware-ul dispozitivului și sistemul de fișiere local.
• Mai scump de dezvoltat, întreținut și actualizat.
• Sunt preaprobate pentru securitate și pot fi descărcate din magazinele de aplicații.
• Greu de accesat cu crawlere pentru motoarele de căutare.

Caracteristicile aplicațiilor web

• Nu depinde de platformă. Tot ce aveți nevoie este un browser pentru a le accesa. Acceptă majoritatea browserelor moderne. Nu este necesar să fie descărcat.
• Nu există SDK special pentru dezvoltarea acestora. Frontend-ul este dezvoltat folosind fie HTML, CSS, JavaScript și o stivă LAMP sau MEAN pentru backend.
• Nu este nevoie să faceți upgrade. Costuri mai mici de dezvoltare și întreținere.
• Deși are nevoie de autentificare, securitatea este o problemă deoarece poate fi vulnerabilă la accesul neautorizat.
• Ele nu funcționează offline și pot fi mai lente decât aplicațiile mobile native.
• Ele nu sunt listate în magazinele de aplicații, așa că poate fi mai dificil să le descoperi.

Ce sunt Progressive Web Apps și cum umple aceste goluri?

Deci, pe scurt, aplicațiile web native sunt foarte capabile, dar lipsesc în ceea ce privește acoperirea. În timp ce aplicațiile web au o acoperire mai largă, dar le lipsesc capacități. Și aici intervin Progressive Web Apps pentru a reduce golurile.

Progressive Web Apps este o combinație ideală a beneficiilor aplicațiilor native și ale aplicațiilor web. Folosind capabilități web moderne, aplicațiile web progresive (PWA) pot oferi utilizatorilor experiențe asemănătoare aplicațiilor. Combină funcțiile oferite de majoritatea browserelor moderne cu beneficiile experiențelor mobile. Puteți crea aplicații native asemănătoare aplicațiilor, extrem de complexe și instalabile. Având în vedere că Web Assembly este suportat de majoritatea browserelor acum, PWA-urile pot fi construite în limbile alese de dezvoltator, crescând astfel extinderea domeniului și flexibilitatea funcționalităților pe care le poate oferi.

Caracteristicile aplicațiilor web progresive

• Sunt independente de platformă și dispozitiv. Funcționează frumos pe orice browser.
• Se încarcă rapid și sunt extrem de fiabile (chiar și cu o viteză scăzută a internetului). Derularea este foarte lină și fluidă.
• Poate lucra și offline.
• Notificările push asemănătoare aplicației native pot fi activate.
• Poate accesa hardware-ul și datele dispozitivului, cum ar fi aplicațiile native.
• Comenzile rapide pot fi adăugate pe ecranul de start al utilizatorului (în loc să le descarce)
• Nu este nevoie de instalații complexe. Poate partaja cu ușurință adresele URL.
• Reactiv pe toate dispozitivele.
• Sunt mai ușor și mai rapid de dezvoltat. Întreținerea este, de asemenea, ușoară.

Înainte de a vorbi despre modulul PWA din Drupal, să ne uităm la cerințele minime pentru a construi un PWA -

• Ar trebui să fie rulat prin HTTPS.
• Ar trebui să includă un Service Worker – Service worker este un script (javascript) care rulează pe https în browser și oferă acces la browser. Oferă funcții native asemănătoare aplicației, cum ar fi livrarea de conținut offline, notificări push etc.
• Ar trebui să aibă un Web App Manifest – care este un fișier JSON care conține metadate cu informații despre aplicația web, cum ar fi numele, descrierea, autorul și multe altele. Acest lucru este util și pentru optimizarea motoarelor de căutare.

Modulul PWA Drupal – Cum să faci aplicații web progresive cu Drupal 9 (și 8)

Modulul Drupal PWA este ușor de instalat și vine cu Service Worker (pentru stocarea în cache și alte capabilități asemănătoare aplicației offline) și Manifest.js pe care le puteți configura. Cu toate acestea, va trebui să vă asigurați că aveți SSL instalat înainte de a începe procesul de instalare a PWA. Dacă cerințele dvs. sunt extrem de specifice, cu o mulțime de personalizări, puteți dezvolta PWA utilizând cadre frontale precum Angular sau React și vă puteți personaliza propriul lucrător de service.

Instalarea modulului PWA Drupal 9

Cu Drupal 7, instalarea modulului Progressive Web App Drupal a fost la fel de ușoară ca descărcarea și activarea modulului. Puteți genera fișierul manifest.js printr-un formular de configurare și îl puteți valida. Cu toate acestea, în Drupal 9, nu putem integra această funcționalitate direct doar activând modulul PWA. Motivul este că nu vă oferă o opțiune de a configura fișierul manfest.js.

1. Instalați modulul prin descărcarea și activarea modulului PWA Drupal.

2. Pentru Drupal 9, aplicați acest plasture

3. După ce ați terminat, navigați la configurare -> PROGRESSIVE WEB APP -> setări PWA și adăugați informațiile necesare.

Lucrător de serviciu

Adrese URL de stocat în cache - Aici puteți specifica paginile care trebuie să fie disponibile chiar și atunci când sunteți offline. Adresele URL menționate aici vor fi stocate în cache - asigurați-vă că ștergeți memoria cache ori de câte ori faceți actualizări aici.
Adrese URL de exclus – Dacă aveți pagini care trebuie neapărat să funcționeze numai cu internetul, menționați-le aici.
Pagina offline – Afișați o pagină personalizată pentru utilizatorii dvs. atunci când aceștia sunt offline și pagina nu este stocată în cache.

Manifest.json

Fișierul Drupal manifest.json este cel care permite utilizatorilor să adauge PWA pe ecranul lor de pornire. Conține configurații pe care le puteți modifica pentru a schimba modul în care se va comporta PWA - cum ar fi numele, numele afișat, culoarea de fundal, orientarea și multe altele.

Fișierul va fi adăugat la eticheta head a paginii dvs. de index.
<link rel="manifest" href = "/manifest.json">

Imaginea de mai jos arată opțiunea „Adăugați la ecranul de start”. Când selectați această opțiune, va fi creată o pictogramă pe ecranul de start.