PWAs: Mirësevini në revolucionin celular

Përmbajtje

• Ngjitja e PWAs
• PWA në veprim sot
• Instalimi
• Offline dhe nisja e menjëhershme
• Përvoja e klasit të parë
• Dyqanet e aplikacioneve
• Integrimi i platformës
• Dizajni dhe sfidat UX
• Viti i PWAs

Ashtu si dizajni i përgjegjshëm i internetit mbylli hendekun midis faqeve të desktopit dhe celularëve disa vjet më parë, teknikat progresive të aplikacioneve në internet aktualisht po mbyllin hendekun midis internetit dhe botës së aplikacioneve. Me përvojat e përdoruesve nga aplikacionet desktop në celular që konvergojnë me shpejtësi, duket sikur po zhvillohet një internet shumë më i hijshëm, më efikas - edhe pse në mënyrë të pashmangshme jo pa disa ndryshime të rëndësishme në kodin e tij themelor gjenetik.

• Si të krijoni një Aplikacion Progresiv në Ueb

Evshtë e qartë se ka disa presione të konsiderueshme selektive që e nxisin këtë. Së pari, krijimi i aplikacioneve vendase për çdo vend nuk është domosdoshmërisht një përdorim efikas i burimeve: përdoruesit përfundojnë me qindra aplikacione të mëdha duke humbur gjerësi bande dhe hapësirë ​​të vlefshme në disk dhe kompanitë shpenzojnë shumë para duke krijuar aplikacione vetëm që ato të braktisen pas versioneve të tyre të para. Dhe shumica e këtyre aplikacioneve drejtohen thjesht nga përmbajtja në internet: informacioni që vjen nga shërbimet në internet ose nga një sistem i menaxhimit të përmbajtjes.

Përkufizimi i një aplikacioni progresiv në internet nuk është konkret. Një PWA është thjesht një aplikacion në internet që përdor disa API dhe aftësi të reja në platformën e internetit duke përdorur përmirësimin progresiv për të ofruar një përvojë të ngjashme me aplikacionin në çdo platformë me të njëjtën bazë të kodit. Moreshtë më shumë një sërë praktikash më të mira dhe përdorimi i API që krijon një përvojë të shkëlqyeshme si aplikacioni për përdoruesit tuaj, kështu që nuk është sikur keni ose nuk keni një PWA; është më shumë sikur faqja juaj është pak a shumë PWA.

Do të filloni të ndërtoni një sit të ri? Provoni të përdorni një krijues uebsajtesh. Dhe sigurohuni që të merrni mbështetjen që ju nevojitet nga një shërbim i mirë i mbajtjes në internet, gjithashtu. Ose për diçka pak më ndryshe, shihni udhëzuesin tonë për ruajtjen më të mirë të reve.

Ngjitja e PWAs

Ndërsa emri PWA u krijua në vitin 2015 në artikullin Escaping Tabs With Don't humbing our shpirt nga Alex Russell duke punuar në Google për ekipin Chrome, udhëtimi i tyre në të vërtetë nuk filloi atje. Më parë kishim Aplikime HTML (HTA), të cilat u krijuan nga Microsoft në 1999, së bashku me shumë platforma të tjera të aplikacioneve në internet nga Nokia, BlackBerry dhe kompani të tjera. Pastaj, në vitin 2007, Steve Jobs paraqiti atë që në atë kohë ishte mënyra e vetme për të krijuar aplikacione për iPhone origjinal: PWAs, megjithëse me një emër tjetër. Chrome filloi nga atje, përmirësoi API-të disa vjet më vonë dhe shpiku emrin PWA.

Me kaq shumë përvoja të mëparshme të dështuara, duke provuar të sjellin përmbajtje në internet në botën e aplikacioneve, pse mendojmë se do të funksionojë tani? Kryesisht, varet nga kompanitë që tani po punojnë dhe promovojnë teknologjitë prapa PWAs, të tilla si Microsoft, Google, Apple dhe Mozilla, për të përmendur vetëm disa. Gjithashtu, performanca e platformës në internet arriti një pikë ku nuk ka asnjë ndryshim të perceptuar kur krahasoni një PWA të mirë-dizajnuar me një aplikacion vendas. Këto kushte nuk kanë ekzistuar kurrë më parë dhe kjo është një arsye që komuniteti i internetit ka vendosur që ka ardhur koha për PWA.

PWA në veprim sot

Sot PWA janë plotësisht funksionale dhe të instalueshme në:

• Android me shumicën e shfletuesve, me Chrome që ofron përvojën më të mirë
• iOS me Safari
• Chromebook
• Windows 10 nga Microsoft Store
• Telefonat karakteristikë me KaiOS - një pirun nga Firefox OS - aktualisht i disponueshëm për miliona përdorues kryesisht në Indi

Mbështetja po vjen gjithashtu për macOS, Windows dhe Linux përmes Chrome më vonë këtë vit. Availableshtë në dispozicion sot si një flamur eksperimental 'Desktop PWA' nëse doni ta provoni tani. Instalimi në Windows në Edge pa përdorimin e dyqanit po vjen gjithashtu më vonë, edhe pse nuk përcaktohet ndonjë kornizë specifike kohore.

Nëse e lexoni përsëri listën, mund të shihni se çdo platformë ka ose është gati të ketë mbështetje për PWA të instalueshme plotësisht në muajt në vijim. Dhe për shkak se një PWA është thjesht një faqe në internet me karakteristika në krye që do të aktivizohet vetëm në shfletuesit e pajtueshëm, madje mund të themi se është në përputhje me të gjithë shfletuesit nga funksionaliteti i tij themelor.

Gjithashtu, PWA aktualisht po gjenerohet nga shumica e CLI për korniza të ndryshme, duke përfshirë Angular 6+ CLI, React Create App, PWA Starter Kit nga Polymer dhe Preact CLI. Më në fund, ekipi i Framework Ionic doli me idenë e Capacitor, një zëvendësim me burim të hapur Cordova që bën të mundur PWAs vendase në çdo dyqan aplikacionesh.

Instalimi

Një nga aspektet kritike të një PWA është instalimi i aplikacionit. Ky proces bëhet në dy hapa opsionale: shkarkimi dhe ruajtja jashtë linje e skedarëve të aplikacionit dhe instalimi i ikonës në OS. Meqenëse të dy hapat janë opsionale, ju mund të ofroni një përvojë jashtë linje në shfletues ose mund të ofroni një ikonë pa instalim jashtë linje. Por një PWA e vërtetë duhet të përfshijë të dyja: duhet të shërbehet me TLS nën HTTPS dhe përdoruesi do të vendosë nëse do ta përdorë atë në shfletuesin ose brenda ikonës së tij të instaluar.

Offline dhe nisja e menjëhershme

Truri i një PWA është punonjësi i shërbimit, një skedar JavaScript i instaluar në pajisjen e përdoruesit që është përgjegjës për shkarkimin e skedarëve të aplikacionit, ruajtjen e tyre në një memorie memorie dhe më vonë shërbimin e tyre kur është e nevojshme. Pasi të instalohet punonjësi i shërbimit, ai vepron si një përfaqësues i rrjetit për çdo burim që i nevojitet aplikacionit në internet: ai mund të vendosë ta marrë atë nga rrjeti ose ta dorëzojë atë nga memoria e fshehtë lokale, gjë që e bën aplikacionin të disponueshëm jashtë linje dhe gjithashtu të disponueshëm vetëm nja dy milisekonda edhe nëse përdoruesi ka lidhje, duke imituar një lëshim të aplikacionit vendas.

Për të instaluar një punonjës shërbimi, dokumenti juaj HTML do të duhet të përfshijë diçka si:

if ('serviceWorker' në navigator) navigator.serviceWorker.register ("sw.js");

Kjo do të instalojë skedarin "sw.js" në pajisjet e përdoruesve për dosjen aktuale në domenin aktual - një koncept i njohur si fushëveprimi. Pasi të instalohet, vizitat e ardhshme në çdo URL brenda fushës së saj do të menaxhohen nga ai punonjës i shërbimit.

Le të themi se kemi një PWA me katër skedarë: index.html, app.js, app.css dhe logo.png. Gjëja e parë është instalimi i atyre skedarëve në memorien e përkohshme në skedarin sw.js.

burimet e konstitimit = ["index.html", "app.js", "app.css", "logo.png"]; vetvetja. addEventListener ("instalo", ngjarje => {ngjarje. prisni deri sa (caches.open ("myPWAcache"). atëherë (cache => cache.addAll (burimet)));});

Pastaj që PWA të shërbehet gjithmonë nga memoria e fshehtë, ne duhet të dëgjojmë për ngjarjen e marrjes brenda punonjësit të shërbimit dhe të vendosim politikën e memorjes që do të përdorë, të tilla si memoria e parë me fragmentin e mëposhtëm.

self.addEventListener ("marr", e => e. korrespondojnë me (caches.match (e.kërkesë). pastaj (res => res);

Në këtë rast, sa herë që përdoruesi hyn në PWA (të dy nga një shfletues ose nga një ikonë e instaluar), motori do të marrë skedarët nga memoria e fshehtë. Një avantazh i PWA-ve kundrejt aplikacioneve vendase është se pajisjet nuk kanë nevojë të shkarkojnë të gjitha skedarët përsëri kur ka një ndryshim, vetëm skedari që ka ndryshuar me një proces transparent. Gjithashtu, ne ende mund të shkarkojmë pjesë të aplikacionit sipas kërkesës.

Por sfida është se si i dini cilat skedarë janë azhurnuar në server, në mënyrë që t'i zëvendësoni ato në cache? Nëse nuk doni të shkruani një punonjës të nivelit të ulët të shërbimit për të menaxhuar këtë, mund të përdorni bibliotekën me burim të hapur Kutinë e punës, e cila do t'ju ndihmojë me gjenerimin e punonjësit të shërbimit dhe burimet e manifestit për të azhurnuar paketën e instaluar.

Jini të vetëdijshëm se skedarët e PWA tuaj do të fshihen nëse ka presion ruajtjeje në pajisje, përveç nëse kërkoni Ruajtje të Vazhdueshme nëse është e disponueshme:

if ('magazinimi' në navigator && 'vazhdon' në navigatorin. magazinimin) navigatorin. magazinimin.persist ();

Në Chrome dhe shumicën e shfletuesve Android, aplikacioni juaj nuk është në gjendje të përdorë më shumë se pesë përqind të hapësirës në dispozicion; në iOS është 50MiB (afër 50 MB) vetëm për host; në Edge është e ndryshueshme sipas madhësisë totale të kujtesës dhe në Windows Store, është e pakufizuar.

Përvoja e klasit të parë

Ne kemi trurin dhe tani është koha për zemrën: aplikacioni në internet manifestohet. Qëllimi i kthimit të një faqe në internet në një PWA nuk është vetëm për të siguruar që ajo është në dispozicion shpejt ose kur është jashtë linje, por edhe për të mundësuar që ajo të ketë ikonën e vet në OS dhe të ofrojë një përvojë krejtësisht të pavarur si çdo aplikacion tjetër të instaluar.

Manifesti është një skedar JSON që përcakton meta të dhënat për PWA të përdorura nga një shfletues ose një dyqan aplikacionesh në mënyrë që të përcaktojë sjelljen e instalimit.

Skedari përcakton disa veti si meta të dhëna për PWA tuaj. Çdo OS do të lexojë këto veti dhe do të përpiqet më së miri për t'iu përshtatur përvojës që ju preferoni. Për shembull, Android do të lexojë 'ekran: i pavarur' dhe do të krijojë një përvojë normale të aplikacionit. Me shfaqjen 'ekran: minimal-ui' do të krijojë një përvojë me një URL të dukshme dhe certifikatë TLS - e dobishme për aplikacione të ndjeshme ndaj sigurisë. Me 'ekran: ekran të plotë' krijon aplikacione plotësisht të zhytura pa shiritin e statusit ose butonin e dukshëm të kthimit. Një grup ikonash dhe ngjyrash përcakton se si do të duken ekranet spërkatëse ose shiritat e titullit për dritaren e aplikacionit tuaj.

Ekzistojnë disa gjeneratorë manifestues, të tillë si Gjeneratori Manifest i Ueb Aplikacioneve ose Ndërtuesi PWA që gjithashtu do të ndryshojnë madhësinë e ikonës për ju në rezolucione të ndryshme nëse siguroni një me rezolucion të lartë (minimumi 512 piksel).

Kur të keni skedarin manifest të lidhur në dokumentin tuaj HTML, përdoruesit do të jenë në gjendje të instalojnë aplikacionin duke përdorur teknika të ndryshme në varësi të shfletuesit, zakonisht i quajtur Shto në Ekranin Kryesor, Instalo ose thjesht Shto. Nëse PWA juaj mund të kapet nga Bing, Microsoft automatikisht do ta shtojë atë në Dyqanin Microsoft në mënyrë që përdoruesit e Windows 10 të jenë në gjendje ta instalojnë atë nga atje.

Në disa sisteme operative, PWA juaj do të ketë aftësinë për të kapur lidhje. Kjo do të thotë që pasi përdoruesi të ketë instaluar aplikacionin, çdo URL brenda fushës së manifestit tuaj do të hapet brenda kufijve të aplikacionit tuaj dhe jo në shfletuesin, pa marrë parasysh nëse shfaqet në shfletuesin ose në aplikacione të tjera të tilla si WhatsApp, Facebook ose një email.

Nëse i kaloni kërkesat e PWA që po përcaktojmë këtu, disa platforma do të ofrojnë shënjimin e ambientit (një ikonë e vogël zakonisht në shiritin URL që specifikon se faqja në internet është e instalueshme) ose një banderolë të një aplikacioni në internet. Nëse preferoni, mund të shtoni edhe butonin tuaj të instalimit të personalizuar duke përdorur fragmentin e mëposhtëm:

window.addEventListener ("beforeinstalpr ompt", funksioni (e) {e.prompt (); // do të tregojë instalimin promptin vendas})

Nëse PWA është e instaluar, ngjarja e 'instaluar' do të ndizet në objektin e dritares në mënyrë që të mund të gjurmoni statistikat që dëgjojnë për të.

Dyqanet e aplikacioneve

Një nga përfitimet kryesore të instalimit nga një shfletues është të qenit në gjendje të shmangni procesin e miratimit të dyqanit të aplikacioneve ose të keni nevojë të paguani për të qenë botues. Kjo vjen me përparësi të dukshme, të tilla si botimi i menjëhershëm, krijimi i aplikacioneve private për kompanitë ose aplikacionet që nuk duhet të pranohen në dyqane.

Por disa kompani dëshirojnë të jenë në dyqan. Që nga sot, dyqanet e vetme që zyrtarisht pranojnë PWA janë Dyqani Windows dhe Dyqani kaiOS. Për fat të mirë, me mjete si Capacitor (aktualisht në Alpha) ose PWA Builder, ne mund të krijojmë dhe nënshkruajmë paketa vendase edhe për platforma të tjera.

Ka disa PWA të botuara tashmë në Google Play Store, të tilla si Twitter Lite dhe Google Maps Go, aktualisht nën implementime të personalizuara. Chrome do të ofrojë një zgjidhje nga Chrome 68 përmes aktiviteteve të besuara në internet. Nga ajo pikë, ne do të jemi në gjendje të krijojmë një paketë Android (APK) me një lëshues në PWA tonë dhe ta ngarkojmë atë në dyqan. Për Microsoft Store në Windows 10, faqja PWA Builder po ndihmon aktualisht me gjenerimin e një pakete APPX Windows 10. Duke përdorur një pamje në internet, mund të jeni në gjendje të krijoni manualisht një aplikacion iOS për App Store por të jeni jashtëzakonisht të kujdesshëm për rregullat e dyqanit.

Integrimi i platformës

Duke zbatuar teknikat e përmirësimit progresiv, ju do të jeni në gjendje të përdorni shumë karakteristika, duke përfshirë njoftimet e shtypjes, aksesin e kamerës dhe mikrofonit, vendndodhjen gjeologjike, sensorët, pagesat, dialogun e ndarjes dhe hapësirën ruajtëse jashtë linje. Të gjitha këto karakteristika funksionojnë drejtpërdrejt brenda modelit të sigurisë së shfletuesit, duke përfshirë dialogun e lejeve.

Ne gjithashtu mund të komunikojmë me aplikacione të tjera përmes skemave URI, të tilla si hapja e Twitter, YouTube ose WhatsApp përmes URL-ve të tyre ose URI-ve të personalizuara, të tilla si whatsapp: //.

Më në fund, kur krijojmë PWAs vendase që publikohen në dyqan duke përdorur Capacitor ose në Microsoft Store, ne do të jemi në gjendje të kalojmë tek API-të vendase që do të na mundësojnë të ekzekutojnë pothuajse çdo kod vendas. Ky integrim me Windows 10 përfshin aksesin në harduer por edhe integrimin në OS, duke ofruar mundësi të tilla si Pin to Start. Për shembull, Twitter PWA ju lejon të vendosni çdo përdorues në ekranin tuaj fillestar.

Dizajni dhe sfidat UX

Dizajnimi i PWA-ve ka sfida unike, prandaj është e rëndësishme të kaloni ca kohë duke hulumtuar, testuar sa më shumë që të jetë e mundur dhe duke marrë parasysh sa vijon:

• Përdoruesit do të presin përvoja të ngjashme me aplikacionin.
• Procesi i instalimit është ende i ri, prandaj duhet të bëjmë përpjekje shtesë për të shpjeguar se si ta instaloni aplikacionin.
• Përditësimi i aplikacionit në sfond pa ndërveprimin e përdoruesit është i shkëlqyeshëm, por gjithashtu shton disa sfida për UX.
• Në tavolinën e punës, dizenjimi i përgjegjshëm i faqes në internet merr një kufi të ri pasi dritaret PWA mund të jenë të vogla, shumë më të vogla se një pikëpamje mobile. Kjo do të thotë që ne duhet të krijojmë pamje specifike ose widget të vogla për këtë format, siç shihet në Chrome OS sot.
• Njoftimet me push duhet t'i shtojnë vlerë vetëm përdoruesit, kështu që mësoni të kërkoni në momentin e duhur dhe mos e humbni mundësinë duke dërguar mesazhe që nuk janë të dobishme ose interesante.
• Ne kemi nevojë për të hartuar për performancën në internet dhe për qasje jashtë linje.

Viti i PWAs

Me shtimin e iOS dhe desktop këtë vit, PWAs janë kudo sot. Por duhet të kujtojmë se udhëtimi i tyre sapo po fillon, prandaj prisni ndryshime të shpeshta dhe sigurohuni që ta mbani veten të azhurnuar me teknikat dhe idetë më të fundit për të dhënë një përvojë të shkëlqyeshme të përdoruesit ndërsa platforma evoluon.

Ky artikull u botua fillimisht në numrin 308 të neto, revista më e shitur në botë për krijuesit dhe krijuesit e faqeve në internet. Blini numrin 308 këtu ose pajtohuni ketu.