9 hämmästyttävää PWA-salaisuutta

Progressiiviset verkkosovellukset (PWA) ovat uusi raja vuonna 2002 reagoiva web-suunnittelu , ja niiden suosio kasvaa. PWA-tuki alkoi Chrome-selaimella Androidilla, ja se on nyt saatavana useimmissa muissa Android-selaimissa, kuten Opera, Firefox, Samsung Internet ja UCWeb, sekä iOS 11.3: n iPhone- ja iPad-laitteissa sekä Edge for Windows- ja Chrome-käyttöjärjestelmissä.

paras muistikortti Canon 80d: lle

Auttaa sinua luomaan hyvä käyttäjäkokemus tälle kasvavalle yleisölle aiomme jakaa joitain tärkeitä temppuja ja ideoita. Jos haluat lisätietoja, tutustu artikkeliin miten luoda sovellus .



01. WebAPK vs. Android-pikakuvake

Vuonna 2017 Chrome otti käyttöön uuden ominaisuuden Android-käyttäjille: WebAPK. Kun käyttäjät asentavat PWA: n (jos se täyttää vaatimukset), Google Play -palvelin luo APK: n (Android-paketti, natiivi sovelluskontti) lennossa ja asentaa sen laitteeseen ikään kuin se olisi tulossa Play Kaupasta. . Käyttäjän ei tarvitse ottaa käyttöön suojaamattomia lähteitä tai koskettaa muita asetuksia.



Kun PWA on asennettu, se näkyy aloitusnäytössä, sovellusten käynnistysohjelmassa, Asetuksissa ja kuten mikä tahansa muu käyttöjärjestelmän ensiluokkainen kansalaissovellus, mukaan lukien tiedot akusta ja järjestelmässä käytetystä tilasta.

Jos PWA-laitteesi ei täytä kaikkia vaatimuksia, Play-palvelu on poissa käytöstä, yhteysongelma on tai jos käytetään jotain muuta Android-selainta, kuten Firefox tai Samsung Internet, luodaan tavallinen pikakuvake aloitusnäyttöön. Tämä kuvake on selainmerkitty Android 8+: sta.



WebAPK mahdollistaa myös mukavan mutta vaarallisen ominaisuuden, jonka on oltava tietoinen: PWA omistaa verkkotunnuksen ja polun Android-käyttöjärjestelmän rajoissa. Web App Manifest -sovelluksen määritteen perusteella jokainen käyttäjän saama linkki kyseiseen laajuuteen välitetään koko näytön sovelluksellesi eikä selaimeen, mikä tarkoittaa, että sinun on kiinnitettävä huomiota käyttämiisi URL-osoitteisiin.

Oletetaan, että sinulla on mobiilikäyttäjiä palveleva PWA ja se on verkkotunnuksesi juurikansiossa. Kun sovellus asennetaan WebAPK: n kautta, koko verkkotunnus on nyt PWA: n omistuksessa. Jos sinulla on kysely / kysely, jonka jaat Facebookin kautta, tai PDF-tiedosto, jossa on ehdot ja ehdot, jotka lähetät käyttäjillesi osoitteessa /terms.pdf, käyttöjärjestelmä avaa PWA: n eikä selainta napsauttamalla näitä linkkejä. On välttämätöntä tarkistaa, tietääkö PWA-reititysjärjestelmäsi kyseisistä URL-osoitteista ja miten niitä voidaan palvella, ja jos ei, avaa ne selaimella eri laajuudessa.

02. Luo mukautettu verkkosovelluksen asennuspalkki

Me voimme



Emme voi muokata selaimen verkkosovelluksen asennusbanneria, mutta voimme lykätä niitä, kun näytämme käyttäjälle lisätietoja

Useat selaimet kutsuvat käyttäjää asentamaan PWA-laitteesi, jos tietyt ehdot täyttyvät, mukaan lukien kyseisen käyttäjän toistuvat vierailut PWA-laitteellesi. Tällä hetkellä banneri ei sisällä tarpeeksi tietoja siitä, miksi käyttäjän tulisi hyväksyä. Voimme kuitenkin käyttää tapahtumia bannerin välttämiseksi ja, mikä tärkeintä, lykätä sitä jollekin todennäköisemmälle hyväksynnälle, kuten asennuskuvake.

Ensimmäinen vaihe on peruuttaa bannerin ulkonäkö ja tallentaa tapahtumaobjekti myöhempää käyttöä varten:

// global variable for the event object var installPromptEvent; window.addEventListener('beforeinstallprompt', function(event) { event.preventDefault(); installPromptEvent = event; });

Seuraava vaihe on tarjota käyttöliittymä, jossa selitetään asennuksen edut, tai Asenna-painike. Tämä käyttöliittymä kutsuu seuraavaa toimintoamme:

function callInstallPrompt() { // We can't fire the dialog before preventing default browser dialog if (installPromptEvent !== undefined) { installPromptEvent.prompt(); } }

03. Jaa sisältöä PWA: lta

Yhteensopivissa selaimissa Web Share -sovellusliittymä käynnistää tunnetun jakamisikkunan käyttöjärjestelmästä

Yhteensopivissa selaimissa Web Share -sovellusliittymä käynnistää tunnetun jakamisikkunan käyttöjärjestelmästä

Kun PWA on koko näytön tilassa, selaimella ei ole URL-palkkia tai Jaa-toimintoa, jotta käyttäjä voi jakaa sisältöä sosiaalisten verkostojen kanssa. Voimme hyödyntää Web Share -sovellusliittymää ja meillä on mahdollisuus avata alkuperäisiä sosiaalisia sovelluksia.

function share() { var text = 'Add text to share with the URL'; if ('share' in navigator) { navigator.share({ title: document.title, text: text, url: location.href, }) } else { // Here we use the WhatsApp API as fallback; remember to encode your text for URI location.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(text + ' - ') + location.href } }

04. Analytics-seuranta

Kun sinulla on PWA, haluat seurata mahdollisimman monta tapahtumaa, joten katsotaanpa kaikki mitä voimme tällä hetkellä mitata. Voit seurata näitä tapahtumia myöhemmin Google Analytics -sovellusliittymien tai muiden analyyttisten työkalujen avulla.

window.addEventListener('appinstalled', function(event) { // Track event: The app was installed (banner or manual installation) }); window.addEventListener('beforeinstallprompt', function(event) { // Track event: The web app banner has appeared event.userChoice.then(function(result) { if (result.outcome === 'accepted') { // Track event: The web app banner was accepted } else { // Track event: The web app banner was dismissed } }); });

Seuraava tärkeä seurantatapahtuma on, kun käyttäjä avaa sovelluksen aloitusnäytöltä. Tämä tarkoittaa, että käyttäjä on napsauttanut sovelluksen kuvaketta tai napsauttanut PWA-laajuuteen osoittavaa linkkiä Android-laitteella, jossa on WebAPK-tuki.

Yksinkertaisin tapa tehdä tämä on luettelon start_url-määritteen avulla lisäämällä seurantatapahtuma URL-osoitteeseen, jota voidaan käyttää automaattisesti alkuperäisenä Analytics-komentosarjalta, kuten:

start_url: '/?utm_source=standalone&utm_medium=pwa'

Seuraava komentosarja jättää meille myös totuusarvon siitä, onko käyttäjä tällä hetkellä selaimessa (true) vai erillisessä sovellustilassa (false):

var isPWAinBrowser = true; // replace standalone with fullscreen or minimal-ui according to your manifest if (matchMedia('(display-mode: standalone)').matches) { // Android and iOS 11.3+ isPWAinBrowser = false; } else if ('standalone' in navigator) { // useful for iOS < 11.3 isPWAinBrowser = !navigator.standalone; }

Jos sitten käytät push-ilmoituksia, voit seurata useita palvelutyöntekijän tapahtumia, kuten:

self.addEventListener('push', function(e) { // Track event: Push Message Received }); self.addEventListener('notificationclick', function(e) { // Track event: Push Message Clicked, you can read e.action.id to track actions }); self.addEventListener('notificationclose', function(e) { // Track event: Push Message Dismissed });

05. Luo yhteensopiva iOS PWA

Kun teet PWA: ta iOS: ssä, tarkista aina, että tarkistat tilarivin määritelmän, mikä luo erilaisia ​​tilarivikokemuksia

Kun teet PWA: ta iOS: ssä, tarkista aina, että tarkistat tilarivin määritelmän, mikä luo erilaisia ​​tilarivikokemuksia

Vaikka monet ajattelevat, että PWA-tuki on tulossa ensimmäistä kertaa iOS 11.3: lla, totuus on, että Steve Jobs esitteli konseptin - vaikkakin eri nimellä - yli kymmenen vuotta sitten WWDC 07: ssä. Siksi iOS tuki kotinäyttöä ja offline-sovelluksia jonkin aikaa, käyttäen vanhoja tekniikoita. Mutta iOS 11.3: sta alkaen se alkaa tukea samoja teknisiä tietoja kuin Android.

Jos haluat silti tarjota asennuskokemuksen ennen iOS 11.3: ta, sinun on lisättävä sisällönkuvauskenttiä tai käytettävä tämän kirjoittajan luomaa polyfill-täyttöä osoitteessa https://github.com/firtman/iWAM

Nyt PWA-laitteesi on offline-yhteensopiva ja asennettavissa iOS: ään, vaikka et valitsisikaan iOS: ää. On tärkeää ymmärtää eroja, jotka voivat vaikuttaa PWA-käyttökokemukseen iOS: ssä:

  1. IOS: n kuvakkeiden on oltava neliön muotoisia ja läpinäkymättömiä käyttöliittymäongelmien välttämiseksi. Älä käytä samaa kuvaketta kuin Androidissa. Käytä iPhone-laitteissa 120x120 ja 180x180.
  2. Jos sinulla on SPA tai linkität muille sivuillesi, ole varovainen navigoinnin suhteen, koska iOS-käyttäjillä ei ole tapaa palata eteenpäin tai eteenpäin, jos et anna navigointilinkkejä käyttöliittymässäsi. Pyyhkäisyeleet eivät toimi koko näytön PWA-laitteissa.
  3. IOS 11.3: n ensimmäisistä versioista lähtien käyttöjärjestelmä lataa PWA: t jokaisella sovelluksen käytöllä, joten jos käyttäjän on poistuttava sovelluksesta palatakseen myöhemmin (esimerkiksi kaksisuuntaisen todennuksen suorittamiseksi), muista sovellus käynnistyy oletusarvoisesti tyhjästä.

06. Tietojen synkronointi taustalla

Palvelutyöntekijöillä on erillinen elinkaari PWA-ikkunasta tai selaimen välilehdestä. Siksi voit tehdä verkkotoimintoja taustalla, vaikka käyttäjä sulkisi PWA: n. Jos vireillä oleva operaatio on käynnissä eikä verkkoyhteyttä ole käytettävissä siinä vaiheessa, moottori antaa meidän käsitellä taustalla, jos yhteys havaitaan myöhemmin.

Background Sync -sovellusliittymä on tällä hetkellä käytettävissä vain joissakin selaimissa, joten sinun on annettava varavara. Ajatuksena on, että PWA asettaa lipun merkkijonolla, joka ilmoittaa, että sen on tehtävä taustasynkronointi.

navigator.serviceWorker.ready.then(function(reg) { reg.sync.register('myTag') });

Sitten kuuntelemme tapahtumaa ServiceWorkerissa, ja jos se on etiketti, odotamme palaavan lupauksen. Jos lupaus täyttyy, operaatio merkitään valmiiksi. Jos ei, se jatkaa yrittämistä myöhemmin taustalla.

self.addEventListener('sync', function(event) { if (event.tag === 'myTag') { event.waitUntil(doAsyncOperationForMyTag()); } });

07. Sosiaaliset verkostot ja näennäisselaimet

Jos käyttäjät jakavat PWA-sisältöäsi sosiaalisissa verkostoissa tai jos he käyttävät näennäisselaimia (selaimet ilman omaa moottoria, mutta käyttävät verkkonäkymiä), sinun on oltava tietoinen joistakin ongelmista.

Esimerkiksi Facebook käyttää WebView-näkymää Android- ja iOS-sovelluksissa tarjotakseen sovelluksen sisäisen selauskokemuksen, kun käyttäjät napsauttavat linkkiä. Androidissa suurin osa WebViewsista ei tue palvelutyöntekijöitä, eivätkä voi asentaa PWA: ta, joten kun käyttäjä avaa sisältösi Facebookista, PWA toimii ikään kuin se olisi yhteensopimaton selain ilman välimuistitiedostoja tai istunnon tietoja .

IOS 11.3: sta alkaen WebView tukee palvelutyöntekijöitä, mutta se on saman PWA: n klooni, jota käyttäjä on käyttänyt Safarissa tai jopa muissa näennäisselaimissa, kuten Chrome tai Firefox iOS: ssä.

Siksi, jos renderöit asennusbanneria tai asennusvihjeiden valintaikkunaa, jossa selitetään sovelluksesi asentamisen arvo, tarkista, oletko WebView-näkymässä, koska käyttäjä ei voi seurata vaiheitasi. Piilota nämä tiedot tai kutsu käyttäjää avaamaan URL-osoite oletusselaimessa. Tämä koskee muun muassa Facebookia Androidissa, Facebookia iOS: ssä, Chromea iOS: ssä ja Firefoxia iOS: ssä. Suoran tarkistuksen tekeminen, jos olet WebView-näkymässä, on hankalaa, mutta on auttaja työkalu saatavana .

08. Testi Android-laitteilla ja emulaattoreilla

Palvelutyöntekijöiden ja Web App Manifestin testaaminen edellyttää https: ää, lukuun ottamatta localhostia. Vaikka paikallinen työpöytätestaus on aluksi hieno, haluamme yhdessä vaiheessa nähdä PWA-laitteemme toiminnassa Android-laitteilla. Kuinka voimme tehdä sen? Kehityspalvelimen käyttö puhelimestamme tai Android-emulaattoristamme ei toimi, koska se ei ole https eikä se ole paikallinen isäntä Android-käyttöjärjestelmän näkökulmasta.

Ratkaisu näkyy Chrome Developer Tools -sovelluksessa. Jos siirrymme chrome: // -tarkastukseen ja avaamme emulaattorin tai todellisen laitteen, johon USB-virheenkorjaus on kytketty, voimme ottaa portin edelleenlähetyksen käyttöön. Sitten http: // localhost Android-laitteellamme edelleenohjataan isäntäkoneemme localhostille tai muulle isännälle. Tämän temppun avulla Android tekee PWA: n oikein suojaamattoman yhteyden kautta. Pidä kuitenkin mielessä, että vaikka WebAPK luo paketin ja asentaa sen, se ei välttämättä toimi erillisessä tilassa.

09. Kustantaminen kauppoihin

PWA Builder on Microsoftin online-työkalu myymälän kanssa yhteensopivien PWA-pakettien luomiseen Windows 10: lle ja muille käyttöjärjestelmille

PWA Builder on Microsoftin online-työkalu myymälän kanssa yhteensopivien PWA-pakettien luomiseen Windows 10: lle ja muille käyttöjärjestelmille

Vaikka PWA-lähestymistapa ei alkanut myymälöitä ajatellen, jotkut tarjoukset, kuten Twitter Lite ja Google Maps Go Play Kaupassa, alkoivat palvella PWA: ita kaupoissa. Jos olet kiinnostunut tästä, voit jakaa PWA-laitteesi pakkaamatta sitä Cordovalla, käytettävissäsi olevat vaihtoehdot ovat:

  • Microsoft Store: Voit luoda PWA: n Windows 10: lle käyttämällä virallista työkalua pwabuilder.com
  • Google Play -kauppa: Kirjoittaessasi Canary Channel -kanavalla käytettävissä olevien luotettujen verkkotoimintojen avulla voit luoda Android-sovelluksen, joka vain avaa omistamasi PWA: n ja jakaa sen kaupassa luomalla samanlaisen ratkaisun kuin WebAPK. Voit oppia lisää tässä .
  • Apple App Store: Tällä hetkellä ei ole virallisia ratkaisuja PWA: iden jakamiseen, mutta WKWebView tukee palvelutyöntekijöitä iOS 11.3: sta, joten ei ole vaikeaa luoda yksinkertaista kääriä PWA: lle. Kysymys kuuluu, hyväksyykö Apple sen kaupassa? Apple ei halua ratkaisuja, jotka ovat vain verkkosivustoja, joissa on kääre.

Tämä artikkeli julkaistiin alun perin 304 - numerossa netto , maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti. Osta numero 304 täältä tai tilaa täällä .

Aiheeseen liittyvät artikkelit: