Transformarea site-ului dvs. WordPress într-un PWA: Porniți cu tendința

Publicat: 2021-02-17

Cuprins

Mișcarea PWA este o mișcare atât de transformatoare și monumentală încât a devenit ca a unui val uriaș, care mătură lumea tehnologiei, schimbând totul în cale în bine.

Unele dintre cele mai influente mărci din lume, și anume Twitter cu celebrul lor Twitter Lite , acum au făcut oficial din PWA fundamentul dezvoltărilor lor viitoare.

 Lectură recomandată: 12 exemple de aplicații web progresive pentru inspirația ta

WordPress, sau pentru a fi mai specific, Automattic – oamenii din spatele WordPress, a inițiat și mișcarea WordPress PWA înapoi în Chrome Dev Summit 2017, anunțând lucrările în curs de integrare a tehnologiilor progresive în fluxul de lucru al platformelor precum WordPress.

De atunci, peisajul WordPress s-a schimbat atât de mult încât neconversia WordPress într-un PWA este aproape o pierdere garantată a satisfacției spectatorilor.

Înțelegerea PWA

După cum a spus Google, Progressive Web Apps sunt

  • Fiabil – Încărcați instantaneu și nu afișați niciodată downasaurul, chiar și în condiții incerte de rețea.
  • Rapid – Răspundeți rapid la interacțiunile utilizatorului cu animații netede și fără derulare neplăcută.
  • Captivant – Simțiți-vă ca o aplicație naturală pe dispozitiv, cu o experiență de utilizator captivantă.

Mai simplu spus, PWA sunt viitorul experienței de navigare pe web. Pentru mai multe informații despre PWA, consultați articolul nostru: Ce este un PWA?.

De ce PWA pentru WordPress?

Dacă nu doriți ca spectatorii să se plictisească de moarte așteptând ca pagina dvs. web să se încarce, soluția cu performanță sporită a site-ului, funcționalitate și UX este întotdeauna cea mai bună alegere.

Experimentele PWA în Jetpack
WordPress înainte și după optimizarea PWA

Luați, de exemplu, celebrul Twitter Lite. Un studiu de caz a arătat că Twitter a cunoscut o schimbare extraordinară în comportamentul utilizatorilor odată cu lansarea Twitter Lite.

Nicolas Gallagher, directorul de inginerie pentru Twitter Lite, notează:

Twitter Lite este acum cel mai rapid, mai puțin costisitor și mai fiabil mod de a folosi Twitter. Aplicația web rivalizează cu performanța aplicațiilor noastre native, dar necesită mai puțin de 3% din spațiul de stocare al dispozitivului, comparativ cu Twitter pentru Android.

Și nu doar Twitter s-a alăturat mișcării, branduri mari precum Spotify au făcut-o și cu dezvoltarea recentă a Spotify PWA. Statisticile și știrile referitoare la schimbările pe care le aduc PWA sunt peste tot și sunt aproape prea mari pentru a fi ignorate, astfel încât afirmația unui viitor al Web-ului alimentat de PWA să pară și mai realistă ca niciodată.

Statistici PWA
Sursa: PWAstats

Cerințe preliminare pentru a configura un PWA în WordPress

  • Aplicațiile web progresive necesită ca site-ul dvs. WordPress să fie servit dintr-o origine sigură, adică site-ul dvs. ar trebui să fie HTTPS și nu HTTP .
  • Versiunea WordPress: mai mare decât 3.5.0
  • Versiunea PHP: mai mare decât 5.3

Cum să vă convertiți site-ul WordPress într-un PWA

Odată ce cerințele preliminare menționate mai sus sunt îndeplinite, proprietarii de site-uri WordPress pot alege să convertească la PWA utilizând una dintre cele două moduri: manual sau cu pluginuri .

1. Dezvoltați-vă manual PWA

Dezvoltarea PWA – în ciuda faptului că este mai puțin costisitoare decât alte tipuri de dezvoltare – necesită totuși o cantitate substanțială de cunoștințe de codare, iar dezvoltatorul acesteia să-și cunoască modul în care se află în jurul cadrelor și bibliotecilor Javascript predominante, în special Angular și React. Acesta este motivul pentru care se recomandă adesea ca proprietarii de site-uri fără experiență să încerce pluginuri (gratuite și/sau plătite) sau să angajeze un dezvoltator profesionist, deoarece procesul de construire a unui PWA nu este unul ușor.

Când încercați să creați manual un PWA, nu uitați să urmați Lista de verificare a aplicațiilor web progresive de la Google și să testați pagina dvs. web cu instrumentul Lighthouse pentru cea mai bună experiență posibilă de utilizator.

2. Cu pluginuri

Nu vă îngrijorați, proprietari de site-uri care nu sunt dezvoltatori! WordPress oferă o mare varietate de plugin-uri care fac majoritatea sarcinilor grele pe care utilizatorii săi le pot alege. Aceste pluginuri vin în 2 tipuri: Pluginuri gratuite și plătite.

Pluginuri gratuite

1. SuperPWA

Banner SuperPWA

În topul Pluginurilor PWA gratuite pentru WordPress se află SuperPWA, cu tradiția sa îndelungată de servicii și calitate excelente.

SuperPWA este ușor de configurat, durează mai puțin de un minut pentru a vă configura aplicația web Progressive. SuperPWA face o dezinstalare curată, eliminând fiecare intrare în baza de date și fișier pe care le creează. De fapt, niciuna dintre setările implicite nu este salvată în baza de date până când nu o salvați manual prima dată.

Instalări active: 30000+
Evaluare cu stele: ★★★★★

2. PWA

Banner PWA

PWA are scopul de a oferi elementele de bază ale PWA și mecanismul de coordonare pentru teme și pluginuri pentru a nu reinventa roata și, de asemenea, pentru a nu intra în conflict între ele.

Dacă dezvoltați un plugin sau o temă care include un lucrător de servicii, luați în considerare să vă bazați pe acest plugin PWA sau cel puțin să utilizați implementarea încorporată doar ca alternativă atunci când pluginul PWA nu este disponibil.

Ultima actualizare: acum 5 luni
Instalații active: 20.000+
Evaluare cu stele: ★★★★

3. PWA pentru WP și AMP

PWA pentru banner WP

Pentru o ofertă gratuită, PWA pentru WP și AMP este excelent în ceea ce face. Este bun, ușor de utilizat și oferă un serviciu excepțional pentru clienți; cu toate acestea, documentația sa se simte puțin lipsită, ceea ce poate duce la dificultăți de a face totul să funcționeze.
Instalații active: 8.000+
Evaluare cu stele: ★★★★★

4. WebSuite PWA

WebSuit WordPress PWA Plugin

WebSuite PWA este un plugin complet pentru a vă transforma site-ul într-un PWA cu suport AMP integrat. Pluginul vine cu diverse teme pentru a oferi PWA un aspect asemănător aplicației, împreună cu multe funcții precum Adăugați la ecranul de pornire, Notificări push, CDN, Integrare Analytics etc.

Instalații active: 30+

Evaluare cu stele: ★★★★★

5. PWA simplu pentru WordPress de Webkul

Webkul PWA pentru WordPress

Cu doar 49 USD, vă puteți converti site-ul WordPress într-un PWA complet funcțional, cu toate caracteristicile și avantajele sale - și asta nu este tot. Plugin-ul este compatibil cu toate temele WordPress, plus că puteți schimba tema, numele aplicației, precum și pictograma aplicației din backend-ul administrativ, fără prea mult efort sau cunoștințe tehnice necesare.

Instalări active: informații indisponibile

Evaluare cu stele: informații indisponibile

Cum se instalează pluginuri PWA

Procesul de instalare pentru WordPress PWA Plugins este destul de simplu și simplificat. Mai jos vom folosi SuperPWA ca exemplu:

Instalare WordPress :

  • Vizitați WordPress Admin > Plugins > Add New
  • Căutați „ Aplicații web super progresive
  • Faceți clic pe „ Instalare acum ” și apoi „ Activațiaplicații web super progresive

Pentru a instala manual:

  • Încărcați dosarul de aplicații web super-progresive în directorul /wp-content/plugins/ de pe serverul dvs
  • Accesați Admin WordPress > Pluginuri
  • Activați pluginul Super Progressive Web Apps din listă.

Concluzie

Această mișcare PWA nu pare să încetinească prea curând și cel mai bun pariu este să acționați acum înainte de a rămâne în urmă.

Dacă sunteți pasionat de tehnologie și doriți mai multă libertate pentru dvs. și pentru site-ul dvs., dezvoltarea manuală a PWA ar trebui să fie o opțiune preferată pentru dvs. Cu toate acestea, pentru proprietarii de site-uri care nu au atât de experimentat și doresc o metodă mai sigură, încercată și testată , Pluginurile PWA pentru WordPress nu sunt o idee atât de rea. Pluginurile vă pot economisi timp și ocazional durere de cap atunci când aveți de-a face cu procesul de construire a unui PWA, permițând astfel o mai bună alocare a resurselor.


Lectură suplimentară:

  • Magento PWA Studio: o comparație detaliată cu Vue Storefront
  • Integrarea Magento WordPress: un ghid pas cu pas