Diskutera om PWA: varför behöver företag progressiva webbapps och hur man använder den här tekniken just nu?

PWA eller progressiv webbapplikation. progressiv webbapp) - En hybrid av webbplatsen och applikationer för mobila enheter. I den här artikeln kommer du att lära dig vad PWA är och varför det är en bra sak för verksamheten. Du kan också lägga till progressiv webbapplikationsfunktionalitet till din befintliga webbplats om 5 minuter eller skapa en hybrid webbplats och program från början.

Vad är PWA

Detta är en teknik som lägger till funktionalitet för webbplatsen. I skrivbordswebbläsaren är den progressiva webappen en vanlig webbplats. Och när en besökare öppnar den i en mobil webbläsare, blir PWA en hybrid av en webbplats och en applikation.

Låt oss se hur det fungerar. Användaren går in på webbplatsen och får ett erbjudande att lägga till på huvudskärmen.

Om användaren accepterar erbjudandet visas webbplatsikonet direkt på mobilenhetens skärm.

Viktig punkt: PWA snuckar på användarens enhet i två klick. Detta hände kringgå Play Store, och även i strid med förbudet mot att installera program från okända källor. Antivirusprogram svärde inte.

Efter installationen skapar PWA en webbplatscache. Detta löser två problem: det ökar nedladdningshastigheten och gör webbplatsen tillgänglig offline. Det är, tack vare PWA-tekniken, webbplatsen kan användas även utan internetanslutning.

En mycket viktig punkt: Chrome, inklusive Chrome för mobil, har i början av april 2019 fullt ut stöd för PWA. Andra webbläsare stöder några eller alla.

Det innebär att vid implementering av PWA-funktionalitet fungerar det för besökare som använder Chrome. I andra webbläsare fungerar din webbplats som vanligt, men funktionaliteten i en progressiv webbapplikation kommer att förbli otillgänglig eller delvis tillgänglig.

Snabba testresultat:

  • I Firefox är PWA fullt fungerande.
  • I Samsung Internet PWA-webbläsaren fungerar inte, bloggen är tillgänglig som en vanlig webbplats.
  • I Opera är webbplatsen tillgänglig utan PWA-funktionalitet.
  • Microsoft Edge for Android PWA fungerar fullt ut.

PWA-tekniken stöds sålunda i minst 80% av webbläsarna (det här är andelen Chrome, Firefox och Edge).

Subtotal: PWA gör fyra häftiga saker:

  • Installerad på enheten i ett klick utan appbutiker.
  • Snabbt laddad tack vare en förprogrammerad sidcache.
  • Fungerar offline tack vare samma cache.
  • Skickar push-meddelanden till användare.

Varför ska företag använda progressiva webbapps

Alla svar på frågan från undertexten finns i föregående avsnitt. Vi upprepar de viktigaste punkterna för konsolidering. PWA hjälper företag:

  • Smyga på din mobila enhet Användaren kringgår Google Play och andra appbutiker.
  • Gör webbplatsen tillgänglig offline. Detta fungerar även för nätbutiker, men information om genomförda transaktioner "flyger" in i affären när användaren har en Internetanslutning.
  • Öka webbplatsens laddningshastighet på mobila enheter.
  • Skicka meddelanden till användare.

Genomförandet av PWA ger mätbara resultat. Här är några exempel:

  • Tack vare tekniken har Tinder minskat sidlastningstiderna från 11,9 sekunder till 4,69 sekunder. PWA Tinder är 90% lättare än sin ursprungliga applikation.
  • PWA Uber väger nästan ingenting och laddas på 3 sekunder även i 2G-nätverk.
  • OLX tack vare PWA ökade annonsens klickfrekvens med 146% och reducerade antalet fel med 80%.

Viktigt: Funktionen hos en progressiv webbapplikation påverkar inte användningen av webbplatsen på vanligt sätt. Lika viktigt: sätt webbplatsen till PWA snabbare och billigare än att göra en inbyggd applikation.

Med hjälp av instruktionerna nedan kommer du att implementera den progressiva webappfunktionaliteten på din webbplats på 5 minuter. Gratis. Sant, inte alla kommer att ha tur, men bara de som väljer normala motorer för webbplatsen. Resten måste betala för fel val i bokstavlig mening: att anställa utvecklare och betala för införandet av PWA.

Så här implementerar du PWA-funktionalitet på webbplatsen

För att genomföra PWA måste en befintlig webbplats uppfylla följande krav:

  • Åtkomst via https.
  • Anpassningsbarhet eller lyhördhet.
  • Separat URL för varje sida (viktig punkt, om din webbplats är SPA).

Rekommendation för nybörjare: innan du genomför PWA, gör en säkerhetskopia av webbplatsen. Säkerhetskopiering måste ske före eventuella förändringar.

Tänk på två sätt att implementera PWA i ordning från enkel till komplex.

Så här byter du en webbplats till PWA med ett par klick med färdiga plugins

Ägarna av populära CMS har tur: de kan göra webbplatsen till en progressiv applikation med hjälp av plug-ins.

I slutet av 2018 har WordPress en tredjedel av det totala antalet webbplatser eller nästan två tredjedelar av webbplatser på CMS. Därför skrivs instruktionen på exemplet på denna motor. Efter det kommer det att vara användbar information för dem som arbetar med andra CMS.

Installera gratis PWA för WP-plugin på webbplatsen. Jag testade flera moduler från den officiella WordPress-katalogen och avgjorde den här lösningen. Resultaten av hans arbete kan ses i början av artikeln. Om du vill kan du prova andra plugins.

Ange allmänna inställningar. Välj ikonen för skrivbordet (App Icon) och ikonens preloader (App Splash Screen Icon). I inställningarna kan du välja orientering av programmet (stående eller liggande), men den här funktionen fungerar inte. Applikationen visas i läget "Porträtt", oavsett inställningarna.

För att skicka meddelanden till användare, registrera projektet på Firebase, skaffa API-nyckeln och ange den på fliken Push Notifications.

I avancerade inställningar aktivera offline-spårning med hjälp av Google Analytics. Alternativt aktivera PWA-meddelandestöd på skrivbordskärmar.

I cache-inställningarna väljer du automatisk cacheskapning. Ange antal inlägg som ska cachas. Det maximala värdet är 50.

Spara ändringarna och öppna webbplatsen på din mobila enhet i Chrome-webbläsaren. PWA arbetar redan, du såg resultatet av genomförandet i början av artikeln.

Vad händer om webbplatsen inte fungerar på WordPress? Fånga lösningen:

  • Joomla!: PWA från WebKul ($ 59).
  • Drupal: Progressive Web App (fungerar med Drupal 7, Drupal 8 versionen är i utveckling).
  • OpenCart: OpenCart PWA ($ 99).
  • Magento: PWA Studio (behöver utvecklarhjälp).
  • CS-Cart: CS-Cart PWA ($ 99).
  • Prestashop: PWA och push-meddelanden och Advance PWA (90 respektive 150 euro).
  • WooCommerce: PWACommerce.

Jag hittade inte färdiga lösningar för andra motorer, men du kan söka själv.

Subtotal: WordPress har gratis moduler för implementering av PWA, inklusive WooCommerce och Drupal. För moduler för Joomla!, OpenCart, CS-Cart och Prestashop måste du betala. För att implementera en progressiv webbapplikation på andra motorer måste utvecklarna betala.

Om du inte har en webbplats ännu eller vill du prova en progressiv webbapplikation innan du distribuerar den på huvudwebbplatsen, fortsätt till nästa steg.

Ett snabbt och gratis sätt att skapa en PWA-funktionalitetssida med Gatsby.

Gatsby är en statisk webbplatsgenerator som skrivs av React (det här är ett JavaScript-bibliotek). Gatsby sysselsätter stora resurser, inklusive e-handelsprojekt, målsidor, företagswebbplatser. För professionell användning av Gatsby på seriösa projekt måste du förstå koden.

Men du kan skapa ett litet visitkort, portfölj eller blogg på Gatsby utan teknisk kunskap. För att göra detta, använd biblioteket med färdiga enheter för nybörjare. Tänk på skapandet av PWA på exemplet på en minimal sammansättning för bloggen från skaparen av Gatsby Kyle Matthews.

Installera Node.js på din dator. Detta behövs för att köra en lokal server på din dator, vilket är nödvändigt för att arbeta med Gatsby. Både LTS och Current Node.js kommer att göra. Efter installationen, öppna en kommandotolk och ange två kommandon: nod - version och npm - version. Om du vill köra kommandotolken i Windows skriver du "cmd" i aktivitetsfältet.

Om allt är gjort korrekt så kommer du att se något så här (versioner kan skilja sig):

Installera git. Detta versionsstyrningssystem, det är nödvändigt att arbeta med Gatsby. Skapa ett konto efter installationen. För att göra detta anger du dina data i kommandoraden:

  • git config - global användarnamn "Vasya Pupkin".
  • git config - global användare.email "[email protected]".

Installera Gatsby CLI med kommandot npm install-g gatsby-cli.

Nu kan du installera enheten Gatsby. Vid kommandotolken väljer du enhet D eller annan icke-systemdrivenhet på datorn. För att göra detta anger du kommandot D:.

Gatsby fungerar inte om det finns kyrilliska tecken i mappnamnet eller i filvägen.

Installera Gatsby-enheten med hjälp av gatsby nya kommandot mittloggstarter //github.com/gatsbyjs/gatsby-starter-blog. I det här fallet är my-blog-starteren namnet på webbplatsen. Du kan ersätta den med någon annan.

När installationen är klar navigerar du till projektmappen med kommandot cd-kommandot My Blog. Starta PWA på en lokal server med kommandot gatsby develop. Om allt är gjort korrekt kommer den lokala versionen av webbplatsen att finnas tillgänglig på // localhost: 8000.

Att köra Gatsby på en lokal server visas i bilden nedan, processen tar mindre än en minut.

Redigera PWA och skapa inlägg kommer att finnas i projektmappen.

Om du vill ändra dina blogginställningar öppnar du gatsby-config.js i Anteckningar eller en annan textredigerare. Ange lämpliga metadata: bloggnamn, författarnamn, beskrivning. Som en URL, ange något som //basil-pupkin.surhe.sh, bara i stället för "basil-pupkin" skriv det önskade alternativet. Observera att du måste ange https-anslutningsprotokollet. Lite senare publicerar vi en webbplats gratis på Surge hosting.

Spara ändringarna till filen. Efter det kommer den lokala servern att uppdatera PWAs framtid.

Byt ut avataren i mappen Content - Assets. Namn filen med ditt foto på samma sätt som standardaveln heter. Om du vill redigera informationen om författaren öppnar du bio.js-filen i mappen Src - Components. Ange data och spara ändringarna.

Vi kommer att skapa publikationer i mappen Content - Blog. Ange den här katalogen och granska innehållet. Varje post i testenheten ligger i en separat mapp. Mappnamnet bildar postadressen till posten. Inne i mappen är en textfil index.md och eventuellt foton.

För att skicka ett nytt inlägg, fortsätt enligt följande:

  • Skapa en mapp med ett lämpligt namn.
  • Inne i mappen skapar du filen index.md.
  • Öppna filen i en textredigerare.

Inlägg måste skapas med Markdown. Detta är ett mycket enkelt märkningsspråk som är lätt att förstå på egen hand. Bilden visar hur posten ser ut.

Spara ändringarna. Gatsby uppdaterar bloggen och lägger upp den.

Ta bort alla mappar utom din från Blog-katalogen. Sidan kommer bara att publiceras. Jag gör inte detta för att ytterligare visa PWA: s arbete.

Flytta nu bloggen från den lokala servern till Internet. Låt oss distribuera PWA på villkorligt gratis hosting av statiska Surge-sidor, men om du vill kan du använda andra plattformar, till exempel GitHub Pages, Netlify, och så vidare.

Installera överskott. För att göra detta anger du kommandot npm install - globalt överskott i terminalen. Skapa en statisk webbplats: Ange kommandot gatsby build i projektmappen. Gatsby kommer att förbereda statiska HTML- och JavaScript-filer i en minut, som senare kommer att publiceras online.

Ange överskottets offentliga / kommando.

Systemet kommer att föreslå ett slumpmässigt domännamn.

Byt ut det här namnet manuellt med önskat.

Tryck på Enter och vänta på meddelandet om webbplatspublicering.

Kontrollera tillgängligheten av webbplatsen i webbläsaren. Observera att resursen är tillgänglig via http och https-protokollen. Omdirigering kan anpassas om du köper ett betalt överskottskonto. För att titta på PWA: s arbete, använd en säker anslutning, eftersom progressiva webbapplikationer bara fungerar fullt ut via https.

Kolla in PWA-arbetet. Öppna en blogg på din mobila enhet i Chrome-webbläsaren. Efter några sekunder kommer du att bli ombedd att installera programmet.

Lägg till en ansökan, vänta några minuter och stäng av Internet. Kör ansökan.

Kontrollera om interna sidor är tillgängliga när de inte är anslutna.

Observera att på vissa enheter när du först startar PWA krävs en internetanslutning.

För att publicera ett nytt inlägg, upprepa stegen beskrivna: Kör bloggen på en lokal server, skapa ett inlägg i projektmappen, se till att du är nöjd med innehållet och utseendet, generera statiska filer och publicera bloggen på Surge.

En viktig punkt: Till skillnad från Google kan Yandex ännu inte indexera innehållet som genereras med hjälp av JavaScript. För att hjälpa sökmotorn måste du konfigurera serverns sida i Gatsby. Vi kommer att prata om detta i följande publikationer.

Subtotal: Vi ansåg två sätt att implementera PWA. Det här är introduktionen av PWA-funktionalitet till en befintlig webbplats med färdiga plug-ins eller skapa PWA från början med hjälp av den statiska generatorn Gatsby. Det finns givetvis ett tredje sätt: du kan alltid kontakta professionella utvecklare och be dem att implementera en progressiv webbapplikation.

"Många anser att PWA är framtida teknik, och jag håller med dem": Nikolai Ilichev, programmerare på Texterras webbplatsutvecklingsavdelning

Programmerare "Texterra" Nikolai Ilichev delade med läsarna sin åsikt om progressiva webbapplikationer.

Dmitry Dementiy: God eftermiddag, Nikolai. Hur viktigt är det att använda PWA? Behöver företagsägare lägga till progressiv applikationsfunktionalitet till företagswebbplatser eller online-shopping-webbplatser?

Nikolay Ilyichev: Hälsningar till läsarna! Mer än relevant. Användbarhet, vilket ökar hastigheten för att få information från webbplatsen, och detta är en av de viktigaste indikatorerna på resurskvalitet, förmågan att arbeta med applikationen offline, push-notifieringar och mycket mer - allt detta har en positiv inverkan på närvaro och konvertering samtidigt som andelen misslyckanden minskar. Vilket förresten växer i proportion till ökningen av sidladdningstiden.

Tekniken utvecklas, vilket innebär att möjligheterna bara kommer att växa. Om du behöver implementera eller inte - det beror helt på de mål som verksamheten ställer sig. Om målen överensstämmer med de fördelar som PWA ger, är spelet värt ljuset.

DD: En av PWA-chipsen är möjligheten att använda webbplatsen offline. Det betyder att även om användaren inte har en Internetanslutning kan han använda cachade sidor. Detta gäller för innehållsprojekt, bloggar, media. Kommer användare att få problem på grund av caching? PWA i bakgrunden laddar någonting när man använder Internet, hur kritiskt är det?

N.I.: Oavsett om det finns problem eller inte beror det på utvecklaren som ställer reglerna för att ladda och cache data. Om det finns mycket video på webbplatsen och hela den här videon hämtas - i slutet kommer det utrymme som allokeras för cachen helt enkelt att sluta. Det räknas vanligtvis som en procentandel av gratis enhetens minne. Ideellt kommer användaren att få några fördelar - samma hastighet och möjligheten att arbeta utan internet. Så snart Internet visas på klientenheten börjar PWA uppdatera cacheminnet. Detta är för att säkerställa att enheten alltid har den aktuella versionen av webbplatsen. Så det är inte kritiskt för ägare av mobila enheter.

DD: Du kan implementera PWA-funktionalitet på webbplatsen med ett par klick utan teknisk kunskap. Varför tror du att PWA inte används mycket ofta?

N.I.: Tekniken är ganska ny - det är hela anledningen. Google tillkännagav det 2015, och mer eller mindre visade normalt webbläsarsupport även senare. Många har inte ens hört talas om denna teknik, och som har hört, förstår inte vilka fördelar den har. Även om det är värt att notera att situationen ständigt förbättras. Många stora företag använder redan denna teknik. Och det finns fler och fler utvecklare som kan implementera denna funktionalitet. Många tror att denna teknik har en framtid, och jag håller med dem.

DD: För att implementera PWA måste en webbplats ursprungligen ha ett antal egenskaper: anpassningsbarhet, hög nedladdningshastighet och tillgänglighet över ett säkert anslutningsprotokoll. Betyder detta att genomförandet av PWA kommer att göra webbplatsen ägaren "pull tails" och förbättra webbplatsen?

N.I.: Så det är det. Men det är naturligtvis önskvärt att dessa svansar stramas som standard, eller uppstår inte alls. Anpassningsbarhet är ingenstans utan den. Vi söker oftast något på Internet via en smartphone, och en webbplats utan adaptiv design kommer helt enkelt inte att överleva: användaren kan helt enkelt inte använda den. Hastighetshastighet - en av de viktigaste indikatorerna på webbplatsen, vilket påverkar positionen i sökresultaten. Det verkar som om det är värt att använda PWA att inte stänga svansar, men för att öka webbplatsens övergripande prestanda och användbarheten.

JJ: Tror du att det faktum att detta format aktivt marknadsför Google kommer att påverka populariteten hos PWA?

N.I.: Jag tror det. Google är allmänt känt och tekniken som den främjar blir vanligtvis ganska populär. Företaget har imponerande resurser som gör det möjligt att kontinuerligt förbättra den teknik som den anser vara lovande.

Vad är nästa?

PWA är en lovande teknik som expanderar möjligheterna att interagera med mobila användare. Från artikeln lärde du dig hur man gör en befintlig webbplats till PWA, om den fungerar på en populär motor. Införandet av progressiva applikationsfunktioner åtminstone inte skadar webbplatsen. Попробуйте сделать PWA с помощью Gatsby. Благодаря инструкции из статьи вы быстро сделаете современный блог, портфолио или сайт-визитку с функциональностью PWA. Если захотите реализовать прогрессивное приложение в интернет-магазине или на корпоративном сайте, обратитесь к профессиональным разработчикам.

Если во время работы с PWA на WordPRess или Gatsby будут вопросы, пишите в комментариях, будем разбираться.

Loading...

Lämna Din Kommentar