PWA pre WordPress: Jednoduché nastavenie progresívnej webovej aplikácie
Progresívne webové aplikácie (PWA) sú jednou z nových inovácií vo vývoji webu. Je to ako mať mobilnú aplikáciu pre váš web bez toho, aby ste ho vytvorili.
Progresívne webové aplikácie umožňujú, aby sa váš web dostal na smartfónoch používateľov ako natívna aplikácia.
Umožňuje používateľom načítať vaše webové stránky bez pripojenia k internetu. Načítava sa super rýchlo a dáva pocit skutočnej natívnej mobilnej aplikácie. PWA sú mimoriadne spoľahlivé, pretože používateľ nikdy neuvidí mŕtvu obrazovku, aj keď má problémy s pripojením.
PWA poskytuje používateľom lepšiu kvalitu používateľského zážitku, pretože sú rýchle a pútavé:
Ak používate WordPress, môžete jednoducho nastaviť progresívne webové aplikácie pre vašu webovú stránku alebo blog. V tomto návode vám ukážem, ako to urobiť, krok za krokom.
V tomto návode vám ukážem, ako nastaviť progresívnu webovú aplikáciu pre váš web WordPress.
Celý proces je jednoduchý a nemusíte sa dotknúť ani jedného riadku kódu.
Aby to bolo oveľa jednoduchšie, použijem PWA pre WP čo je bezplatný doplnok umožňujúci progresívnu webovú aplikáciu vo WordPress.
Čo je PWA pre WP
PWA for WP je bezplatný doplnok, ktorý vám umožní vytvoriť kompatibilnú webovú stránku WordPress alebo blog s progresívnou webovou aplikáciou. Automaticky optimalizuje stránku pre vás všetkých, takže nebudete musieť nič robiť.
Pridáva tiež dôležité funkcie, ako je vlastný spúšťač „pridať na domovskú obrazovku“, tlačiť oznámenia, natívne UX a nastavenia platnosti vyrovnávacej pamäte.
PWA pre WP sa aktívne vyvíja, takže čoskoro môžete očakávať nové funkcie.
Krok 1: Nainštalujte PWA pre WP
Prejdite na svoj informačný panel WordPress a vyhľadajte PWA pre WP. Doplnok si môžete stiahnuť aj ručne z Úložisko doplnkov WordPress. Keď ho nájdete, kliknite na tlačidlo inštalácie a potom kliknite na aktivovať.
Po aktivácii doplnku kliknite na nastavenia PWA:
Kliknite na tlačidlo Spustiť PWA. Potom kliknutím na začiarkavacie políčko stavu zapnite nastavenia pluginu a uložte nastavenia.
PWA pre WP funguje hneď po vybalení, takže nemusíte nič konfigurovať, teraz môžete pristupovať k svojej stránke ako PWA.
Môžete však upraviť nastavenia tak, aby ste prispôsobili vzhľad svojich stránok tak, aby zodpovedali vašej značke.
Krok 2: Ako prispôsobiť vzhľad svojich stránok PWA
Prejdite do nastavení PWA a kliknutím na tlačidlo dizajnu zmeňte farbu témy. V sekcii všeobecných nastavení môžete pridať ikonu svojej aplikácie a ikonu úvodnej obrazovky. Úvodná obrazovka je prvá obraz používatelia uvidia, keď spustia vašu aplikáciu.
Krok 3: Nastavte predbežné ukladanie do vyrovnávacej pamäte
PWA sa načítavajú extrémne rýchlo z dôvodu predbežného ukladania do vyrovnávacej pamäte. Plugin vytvára a medzipamäte súbor pre počet príspevkov, ktoré vyberiete, a to pomáha aplikácii načítať sa super rýchlo a dokonca aj bez internetu.
Ak chcete aktivovať predbežné ukladanie do vyrovnávacej pamäte, prejdite do nastavení pluginu PWA a kliknite na PreCaching nastavenie. Tu vyberte automatický, zadajte počet príspevkov (dobré číslo bude 10) a kliknite na tlačidlo Uložiť.
To je všetko! – na vašej webovej lokalite sa teraz zobrazí tlačidlo „Pridať na domovskú obrazovku“, keď ju používateľ navštívi zo smartfónu. Svoj web teraz môžete slúžiť ako progresívna webová aplikácia.
Po aktivácii doplnku by ste mali tiež vymazať vyrovnávaciu pamäť, aby sa mohol rýchlo prejaviť u nových návštevníkov.
Integrácia Push Notification v PWA
Do svojho PWA môžete pridať upozornenia push pomocou platformy Google Firebase.
Prejdite na nastavenia doplnku a kliknite na tlačidlo upozornení. Tu budete musieť zadať svoj kľúč FCM a kód JSON.
Vytvorte nový projekt Firebase v hasičská základňa konzoly. Po vytvorení projektu nájdete kľúč FCM a JSON v sekcii podrobností o projekte.
Takto bude aplikácia vyzerať, keď si ju niekto nainštaluje do svojho smartfónu:
pokročilé nastavenia
Dôrazne vám odporúčam, aby ste sa nedotýkali pokročilých nastavení, ak nepoznáte progresívne webové aplikácie podrobne. V pokročilých nastaveniach skutočne potrebujete zapnúť iba niekoľko vecí:
- CDN kompatibilita – ak používate CDN ako Cloudflare, zapnite to
- offline Google Analytics – synchronizácia na pozadí, aby služba Google Analytics získala údaje (online aj offline)
- Sledovanie UTM – to vám pomôže presne sledovať návštevnosť prichádzajúcu z aplikácie
V pokročilých nastaveniach sa nemusíte ničoho iného dotýkať.
Ak chcete otestovať, či PWA na vašom webe funguje alebo nie, použite oficiálny nástroj spoločnosti Google s názvom Maják.
Ak sa niekedy dostanete do problému alebo chcete, aby bola do PWA pridaná nová funkcia, môžete kontaktovať ich podporu na adrese WordPress fórum.
Dajte mi vedieť, ako PWA funguje pre vás v komentároch.
Aayush, PWA je niečo, o čom vie len veľmi málo ľudí a pomohli ste ľuďom ako ja, aby sa o tom dozvedeli. Ďakujem, tento týždeň sa to pokúsim pridať na blog.
Veľmi vítaný Sanjeev!