Obsah
- 01. Odkaz WebAPK vs Android
- 02. Vytvorte si vlastný banner na inštaláciu webovej aplikácie
- 03. Zdieľajte obsah z vášho PWA
- 04. Sledovanie analytiky
- 05. Vytvorte kompatibilný iOS PWA
- 06. Synchronizácia údajov na pozadí
- 07. Sociálne siete a pseudoprehliadače
- 08. Test na zariadeniach Android a emulátoroch
- 09. Publikovanie v obchodoch
Progresívne webové aplikácie (PWA) sú novou hranicou v oblasti responzívneho webového dizajnu a ich popularita rastie. Podpora PWA začala s prehliadačom Chrome v systéme Android a je teraz k dispozícii vo väčšine ostatných prehľadávačov systému Android, ako je Opera, Firefox, Samsung Internet a UCWeb, ako aj v telefónoch iPhone a iPad v systéme iOS 11.3 a Edge pre Windows a Chrome v operačných systémoch pre stolné počítače.
Aby sme vám pomohli vytvoriť dobro užívateľská skúsenosť pre toto rastúce publikum sa podelíme o niektoré dôležité triky a nápady. Ďalšie rady nájdete v našom článku o ako vytvoriť aplikáciu.
01. Odkaz WebAPK vs Android
V roku 2017 zaviedol Chrome pre používateľov Androidu novú funkciu: WebAPK. Keď teraz vaši používatelia nainštalujú váš PWA (ak spĺňa požiadavky), server Google Play za pochodu vytvorí súbor APK (balík Android, natívny kontajner aplikácie) a nainštaluje ho do zariadenia, akoby pochádzal z Obchodu Play. . Váš používateľ nemusí povoliť nezabezpečené zdroje ani sa dotknúť žiadnych ďalších nastavení.
Po nainštalovaní sa PWA zobrazí na domovskej obrazovke, v spúšťači aplikácií, v Nastaveniach a ako každá iná prvotriedna občianska aplikácia v OS, vrátane informácií o batérii a priestore použitom v systéme.
Ak váš PWA nespĺňa všetky požiadavky, služba Play nefunguje, došlo k problému s pripojením alebo sa používa iný prehliadač Android, ako je Firefox alebo Samsung Internet, vytvorí sa štandardná skratka na domovskú obrazovku. Táto ikona bude mať značku prehliadača od Androidu 8+.
WebAPK tiež umožňuje príjemnú, ale nebezpečnú funkciu, ktorú si musíte uvedomiť: PWA bude vlastniť doménu a cestu v medziach systému Android OS. Na základe atribútu scope vo vašom manifeste webovej aplikácie bude každý odkaz, ktorý používateľ dostane na tento rozsah, preposlaný do vašej aplikácie na celú obrazovku, a nie do prehliadača, čo znamená, že musíte venovať pozornosť použitým adresám URL.
Povedzme, že máte PWA slúžiaci mobilným používateľom a je v koreňovom priečinku vašej domény. Po nainštalovaní aplikácie cez WebAPK bude celú doménu teraz vlastniť PWA. Ak máte prieskum v / Ankete, ktorý zdieľate prostredníctvom Facebooku, alebo PDF s podmienkami, ktoré pošlete svojim používateľom e-mailom na /terms.pdf, po kliknutí na tieto odkazy OS otvorí PWA a nie prehliadač. Je nevyhnutné skontrolovať, či váš smerovací systém PWA vie o týchto adresách URL a ako ich poskytovať, a ak nie, otvoriť ich v prehliadači s iným rozsahom.
02. Vytvorte si vlastný banner na inštaláciu webovej aplikácie
Niekoľko prehľadávačov vyzýva používateľa, aby si nainštaloval váš PWA, ak sú splnené určité podmienky, vrátane opakovaných návštev tohto používateľa pre váš PWA. Momentálne banner neobsahuje dostatok informácií o tom, prečo by mal používateľ súhlasiť. Môžeme však použiť udalosti, aby sme sa banneru vyhli a čo je dôležitejšie, odložili sme ho o niečo, čo s väčšou pravdepodobnosťou vygeneruje prijatie, napríklad ikona inštalácie.
Prvým krokom je zrušenie vzhľadu bannera a uloženie objektu udalosti pre neskoršie použitie:
// globálna premenná pre objekt udalosti var installPromptEvent; window.addEventListener ('beforeinstallprompt', function (event) {event.preventDefault (); installPromptEvent = event;});
Ďalším krokom je poskytnúť užívateľské rozhranie na vysvetlenie výhod inštalácie alebo tlačidlo Inštalovať. Toto používateľské rozhranie bude volať našu ďalšiu funkciu:
function callInstallPrompt () {// Nemôžeme spustiť dialógové okno, kým nezabránime predvolenému dialógovému oknu prehliadača, ak (installPromptEvent! == undefined) {installPromptEvent.prompt (); }}
03. Zdieľajte obsah z vášho PWA
Keď je váš PWA v režime celej obrazovky, používateľ nemá k dispozícii panel s adresou URL ani akciu Zdieľať, aby mohli zdieľať obsah so sociálnymi sieťami. Môžeme využiť výhody rozhrania Web Share API a mať možnosť otvoriť natívne sociálne aplikácie.
function share () {var text = 'Pridať text na zdieľanie s URL'; if ('share' in navigator) {navigator.share ({title: document.title, text: text, url: location.href,})} else {// Tu používame ako záložné riešenie API WhatsApp; nezabudnite kódovať svoj text pre URI location.href = ‘https://api.whatsapp.com/send?text=‘ + encodeURIComponent (text + ’-’) + location.href}}
04. Sledovanie analytiky
Ak máte PWA, budete chcieť sledovať čo najviac udalostí, takže sa pozrime na všetko, čo momentálne môžeme merať. Na sledovanie týchto udalostí môžete neskôr použiť API služby Google Analytics alebo akékoľvek iné analytické nástroje.
window.addEventListener (‘appinstalled’, function (event) {// Sledovať udalosť: Aplikácia bola nainštalovaná (banner alebo manuálna inštalácia)}); window.addEventListener ('beforeinstallprompt', function (event) {// Sledovať udalosť: Banner webovej aplikácie sa objavil event.userChoice.then (function (result) {if (result.outcome === 'accepted') {// Sledovať udalosť: Banner webovej aplikácie bol prijatý} else {// Sledovať udalosť: Banner webovej aplikácie bol odmietnutý}});});
Ďalšou dôležitou udalosťou sledovania je, keď používateľ otvorí aplikáciu z domovskej obrazovky. To znamená, že používateľ klikol na ikonu aplikácie alebo v systéme Android s podporou WebAPK klikol aj na odkaz smerujúci na rozsah PWA.
Najjednoduchšie to urobíte pomocou atribútu start_url manifestu, keď do adresy URL pridáte sledovaciu udalosť, ktorú je možné automaticky použiť ako pôvod zo skriptu Analytics, napríklad:
start_url: ‘/? utm_source = standalone & utm_medium = pwa‘
Nasledujúci skript nám tiež ponecháva logické tvrdenie, že používateľ je momentálne v prehliadači (true) alebo v režime samostatnej aplikácie (false):
var isPWAinBrowser = true; // nahraďte samostatnú stránku celou obrazovkou alebo minimálnym používateľským rozhraním podľa vášho manifestu, ak (matchMedia ('(display-mode: standalone)'). zápasy)) {// Android a iOS 11.3+ isPWAinBrowser = false; } else if ('standalone' in navigator) {// užitočné pre iOS 11.3 isPWAinBrowser =! navigator.standalone; }
Potom, ak používate push notifikácie, môžete sledovať niekoľko udalostí u servisného pracovníka, napríklad:
self.addEventListener (‘push’, function (e) {// Track event: Push Message Received}); self.addEventListener (‘notificationclick’, function (e) {// Sledovať udalosť: Kliknutá správa, môžete si prečítať e.action.id na sledovanie akcií}); self.addEventListener ('notificationclose', funkcia (e) {// Sledovať udalosť: Zrušená správa Push});
05. Vytvorte kompatibilný iOS PWA
Zatiaľ čo si mnohí myslia, že podpora PWA sa chystá na iOS 11.3 pristáť po prvýkrát, pravdou je, že tento koncept, aj keď s iným názvom, predstavil Steve Jobs pred viac ako desiatimi rokmi na WWDC 07. Preto domovská obrazovka podporovaná systémom iOS a offline aplikácie na chvíľu pomocou starších techník. Ale od iOS 11.3 začne podporovať rovnaké špecifikácie ako Android.
Ak stále chcete ponúknuť skúsenosť s inštaláciou pred iOS 11.3, musíte pridať metaznačky alebo použiť polyfill, ktorý vytvoril tento autor na adrese https://github.com/firtman/iWAM
Teraz bude váš PWA offline a bude možné ho nainštalovať na iOS, aj keď sa neprihlásite pre iOS. Je dôležité pochopiť niektoré rozdiely, ktoré môžu ovplyvniť vašu používateľskú skúsenosť s PWA v systéme iOS:
- Ikony v systéme iOS musia byť štvorcové a netransparentné, aby sa predišlo problémom s používateľským rozhraním. Nepoužívajte rovnakú ikonu, akú máte v systéme Android. Pre telefóny iPhone používajte veľkosti 120 x 120 a 180 x 180.
- Ak máte SPA alebo odkazujete na iné stránky vo vašom rozsahu, buďte pri navigácii opatrní, pretože používatelia iOS nemajú spôsob, ako sa vrátiť alebo posunúť vpred, ak v rámci svojho používateľského rozhrania neposkytnete navigačné odkazy. Gestá prejdením prstom nefungujú na PWA na celú obrazovku.
- Od prvých verzií systému iOS 11.3 OS znova načítava PWA pri každom prístupe k aplikácii, takže ak sa používateľ potrebuje z aplikácie dostať, aby sa vrátil neskôr (napríklad pri obojsmernom procese overovania), nezabudnite aplikácia sa predvolene spustí od nuly.
06. Synchronizácia údajov na pozadí
Servisní pracovníci majú samostatný životný cyklus z okna PWA alebo z karty prehliadača. Preto môžete vykonávať sieťové operácie na pozadí, a to aj potom, čo používateľ zatvorí PWA. Ak existuje čakajúca operácia a v danom okamihu nie je k dispozícii žiadny prístup k sieti, motor nás nechá spracovať na pozadí, ak sa pripojenie zistí neskôr.
Rozhranie API pre synchronizáciu na pozadí je v súčasnosti k dispozícii iba v niektorých prehliadačoch, takže musíte poskytnúť záložnú reklamu. Myšlienka je taká, že váš PWA nastaví príznak so značkou reťazca o tom, že je potrebné vykonať operáciu synchronizácie na pozadí.
navigator.serviceWorker.ready.then (function (reg) {reg.sync.register ('myTag')});
Potom si v službe ServiceWorker vypočujeme udalosť a ak sa jedná o štítok, očakávame, že vrátime sľub. Ak je prísľub splnený, potom je operácia označená ako dokončená. Ak nie, bude sa to na pozadí pokúšať neskôr.
self.addEventListener ('sync', function (event) {if (event.tag === 'myTag') {event.waitUntil (doAsyncOperationForMyTag ());}});
07. Sociálne siete a pseudoprehliadače
Ak vaši používatelia zdieľajú váš obsah PWA na sociálnych sieťach alebo ak používajú pseudo-prehľadávače (prehľadávače bez vlastného enginu, ale využívajúce webové zobrazenia), musíte si byť vedomí niektorých problémov.
Napríklad Facebook používa WebView v aplikáciách pre Android a iOS na ponúkanie prehliadania v aplikácii, keď používatelia kliknú na odkaz. V systéme Android väčšina funkcií WebViews nepodporuje pracovníkov služieb a nemôže nainštalovať váš PWA, takže keď používateľ otvorí váš obsah z Facebooku, bude váš PWA pôsobiť, akoby išlo o nekompatibilný prehliadač bez súborov vo vyrovnávacej pamäti alebo podrobností relácie. .
Od verzie iOS 11.3 bude WebView podporovať pracovníkov v službách, ale bude to klon rovnakého PWA, aký používal používateľ v Safari alebo dokonca v iných pseudoprehliadačoch, ako je Chrome alebo Firefox v systéme iOS.
Preto, ak vykresľujete inštalačný banner alebo dialógové okno s inštalačnou nápovedou vysvetľujúce hodnotu inštalácie vašej aplikácie, skontrolujte, či sa nachádzate v rámci WebView, pretože používateľ nebude môcť vykonať vaše kroky. Skryte tieto informácie alebo pozvite používateľa na otvorenie adresy URL v predvolenom prehliadači. To platí okrem iných aplikácií pre Facebook v systéme Android, Facebook v systéme iOS, Chrome v systéme iOS a Firefox v systéme iOS. Vykonať živú kontrolu, či používate WebView alebo nie, je zložité, ale k dispozícii je pomocný nástroj.
08. Test na zariadeniach Android a emulátoroch
Testovanie pracovníkov služieb a manifestu webových aplikácií vyžaduje protokol https, s výnimkou localhost. Aj keď je testovanie miestnych počítačov spočiatku v poriadku, v jednej chvíli chceme, aby boli naše zariadenia PWA v činnosti na zariadeniach s Androidom. Ako to môžeme urobiť? Prístup k serveru dev z nášho telefónu alebo emulátora systému Android nebude fungovať, pretože to nie je https a nie je to localhost z pohľadu OS Android.
Riešenie sa objaví v Nástrojoch pre vývojárov Chrome. Ak pôjdeme na stránku chrome: // skontrolovať a otvoriť emulátor alebo skutočné zariadenie s pripojeným ladením USB, budeme môcť povoliť presmerovanie portov. Potom bude http: // localhost na našom zariadení s Androidom preposlaný na localhost nášho hostiteľského počítača alebo na iného hostiteľa. Pomocou tohto triku Android vykreslí PWA správne cez nezabezpečené pripojenie. Nezabúdajte však, že hoci WebAPK vytvorí balík a nainštaluje ho, nemusí fungovať v samostatnom režime.
09. Publikovanie v obchodoch
Aj keď prístup PWA nezačínal pri obchodoch, niektoré ponuky, vrátane služieb Twitter Lite a Google Maps Go v obchode Play, začali v obchodoch zobrazovať reklamy PWA. Ak je to niečo, čo vás zaujíma, aby ste distribuovali svoje PWA bez toho, aby ste ich zabalili pomocou Cordova, máte k dispozícii tieto možnosti:
- Microsoft Store: PWA pre Windows 10 môžete vytvoriť pomocou oficiálneho nástroja z pwabuilder.com
- Obchod Google Play: V čase písania článku vám Trusted Web Activities dostupné na Canary Channel umožňujú vytvoriť aplikáciu pre Android, ktorá otvorí iba váš PWA, ktorý vlastníte, a distribuuje ho v obchode, čím sa vytvorí podobné riešenie ako WebAPK. Viac sa dozviete tu.
- Apple App Store: V súčasnosti neexistujú žiadne oficiálne riešenia distribúcie súborov PWA, ale WKWebView bude podporovať pracovníkov služieb zo systému iOS 11.3, takže nebude ťažké vytvoriť jednoduchý obal pre aplikáciu PWA. Otázka je, či to Apple v obchode schváli? Apple nechce riešenia, ktoré sú iba webovými stránkami, ktoré sú na ňom zabalené.
Tento článok bol pôvodne publikovaný v čísle 304 sieť, najpredávanejší časopis pre webdizajnérov a vývojárov na svete. Kúpte si číslo 304 tu alebo prihlásiť sa na odber tu.
