Publicarea PWA în magazinele majore de aplicații: de ce și cum

Începând cu Magazinul Google Play, unul după altul piața de aplicații a sărit pe valul de a primi Progressive Web Apps (Ce este Progressive Web App?) în magazinul lor, făcându-l noua abordare pentru livrarea de software. Cu toate acestea în joc, ar fi o risipă să nu profitați de această tehnologie nouă pentru a extinde mai bine acoperirea aplicației dvs.

Pentru a vă oferi o perspectivă mai clară asupra întregii mișcări Progressive Web App, în special asupra procesului de publicare, astăzi vom analiza starea actuală a PWA-urilor pe piețele majore de aplicații, precum și modul de publicare a PWA în magazinele menționate.

De ce ar trebui să publicați aplicația dvs. Progressive Web în magazinele de aplicații majore?

În trecut, aplicațiile web progresive erau limitate doar la instalări web (Adăugați la ecranul de pornire). Cu toate acestea, cu timpul, piețele de aplicații precum Google și Microsoft au început să recunoască potențialul PWA și au făcut inițiative pentru a avansa adoptările acestei tehnologii a viitorului.

Dacă aveți capacități și fonduri, opinia noastră profesională este că ar trebui să mergeți pentru asta - faceți-vă PWA omni-platformă. La urma urmei, mărcile mari precum Twitter, Uber și Spotify au urcat cu toții și au fost întâmpinate cu rezultate excelente, demonstrând că această tehnologie nu este într-adevăr marketing și merită luată în considerare. Microsoft înșiși a făcut un pas mai departe planificând să facă din Progressive Web Apps experiența principală în Windows.

 Lectură recomandată : 12 cele mai bune exemple de aplicații web progresive.

Cum să vă publicați PWA în magazinele de aplicații majore

Magazin Google Play

Fiind precursorul mișcării PWA, nu ar fi surprinzător să vedem Google Play Store ținând brațele deschise pentru Progressive Web Apps. Cu TWA (Activități Web de încredere) în vigoare, toate secvențele de publicare au fost mult mai ușoare și ar trebui să se termine în cel mai scurt timp.

Cerințe

• Android Studio instalat
• Un cont de dezvoltator Google
• O aplicație web progresivă funcțională și verificată de calitate.

Pasul 1 : Faceți o clonă a aplicației Android TWA Starter și modificați

• Clonează proiectul svgomg-twa cu următoarea comandă:

 clona git https://github.com/GoogleChromeLabs/svgomg-twa.git

• Importați proiectul în Android Studio folosind Fișier > Nou > Import proiect .

În /app/build.gradle , modificați twaManifest în funcție de scopul dvs. Specificațiile referitoare la ce și cum să se schimbe pot fi găsite în fișierul build.gradle.

Notă: applicationId ar trebui să urmeze un format de <com>.<your-brand>.<your-app>

După modificări, /app/build.gradle ar trebui să arate cam așa:

 def twaManifest = [
    applicationId: „com.simicart.app”,
    hostName: 'simicart.com', // Domeniul fiind deschis în TWA.
    launchUrl: '/', // Calea de pornire pentru TWA. Trebuie să fie relativ la domeniu.
    nume: „SimiCart PWA”, // Numele afișat în Lansatorul Android.
    themeColor: „#ED8A19”, // Culoarea folosită pentru bara de stare.
    navigationColor: „#303F9F”, // Culoarea folosită pentru bara de navigare.
    backgroundColor: „#bababa”, // Culoarea folosită pentru fundalul ecranului de introducere.
    enableNotifications: false, // Setați la true pentru a activa delegarea notificărilor.
    // Adăugați aici comenzi rapide pentru aplicația dvs. Fiecare comandă rapidă trebuie să includă următoarele câmpuri:
    // - nume: șir care va apărea în comanda rapidă.
    // - nume_scurt: șir mai scurt folosit dacă |nume| este prea lung.
    // - url: calea absolută a adresei URL pentru a lansa aplicația (de exemplu, „/create”).
    // - pictogramă: numele resursei din folderul desenabil pentru a fi folosit ca pictogramă.
    comenzi rapide: [
        nume: „Deschide SimiCart”, 
        short_name: „Deschis”, 
        url: „/deschide”, 
        pictogramă: „splash”
    ]
,
    // Durata animației de dispariție în milisecunde care va fi redată la eliminarea ecranului de splash.
    SplashScreenFadeOutDuration: 300
]

Pasul 2 : creați un magazin de chei și verificați APK-ul

Stocarele de chei sau cheile de încărcare sunt necesare pentru verificarea APK-ului dvs. Pentru a crea un magazin de chei, lansați Android Studio și navigați la Build → Generate Signed Bundle/APK și completați câmpurile necesare.

După ce ați creat un Magazin de chei, va trebui să extrageți amprenta SHA256 din acesta folosind următoarele comenzi:

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 Tip de intrare: PrivateKeyEntry
...
Amprentele digitale ale certificatului:
         SHA1:...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: ? copiați această linie

Pasul 3 : Configurați Digital Asset Link

Este necesar un link pentru bunuri digitale pentru verificarea proprietății conținutului dvs. web, care poate fi folosit ulterior pentru a conecta la APK-ul dvs.

Generați un fișier de declarații

Utilizați amprenta digitală SHA256 pe care ați extras-o mai devreme și generați un fișier de declarație cu Generatorul și Testerul de liste de declarații.

Odată ce ați generat un fișier de declarație, următorul pas este să creați un fișier accesibil public care conține informații din Instrumentul pentru active digitale. Fișierul ar trebui să fie plasat în gazda dvs. web și în această locație:

 .well-known/assetlinks.json

Locația acestui fișier depinde de procesul de construire al aplicației dvs. web, dar în mod normal ar trebui să fie în directoarele implementate, și anume directoarele „publice” sau „dist”.

Când totul este gata, următorul și ultimul pas pe care trebuie să-l faci este să-ți implementezi aplicația.

Pasul 4 : Creați și lansați aplicația pe Google Play

Cu Google Play Console la setările implicite, accesați Toate aplicațiile → Creare aplicație .

Creați un test intern

Navigați la Versiuni de aplicație → Pista de testare internă → Creare versiune pentru a crea o pistă de testare internă a aplicației dvs.

Creați un APK semnat

În Android Studio, navigați la Build → Generate Signed Bundle/APK și utilizați magazinul de chei SHA256 pe care l-am extras mai devreme. Asigurați-vă că bifați ambele casete pentru versiunea semnăturii.

Încărcați APK-ul

Acum sunteți la sfârșitul acestui proces. Pentru a încărca apk-ul, accesați Magazinul Google Play, Lansări de aplicații → Pista de testare internă → Editați versiunea .

Nu uitați să completați Înregistrarea în magazin

Toate câmpurile obligatorii trebuie completate înainte ca aplicația dvs. să poată fi listată pentru procesul de examinare. Aceste câmpuri sunt necesare pentru informații esențiale, cum ar fi detaliile prețurilor, lista de magazin, evaluarea conținutului etc. Când acest proces este finalizat, ar trebui să vedeți patru bife verzi ️ care indică faptul că toate câmpurile obligatorii sunt completate.

Si asta e. PWA este acum gata pentru examinare și va fi gata pentru descărcare publică în câteva ore.

Apple App Store

Dintre toate piețele majore de aplicații, Apple App Store ar putea fi doar cea care este cel mai puțin primitoare sau chiar ostilă față de PWA, ceea ce este un fel de ironic având în vedere că Steve Jobs a fost primul care a vizionat un viitor plin de Progressive Web Apps.

Motorul complet Safari este în interiorul iPhone. Și astfel, puteți scrie aplicații uimitoare Web 2.0 și Ajax care arată și se comportă exact ca aplicațiile de pe iPhone. Și aceste aplicații se pot integra perfect cu serviciile iPhone. Pot efectua un apel, pot trimite un e-mail, pot căuta o locație pe Google Maps.

Steve Jobs, 2007

În iOS, PWA-urile sunt foarte limitate în ceea ce privește caracteristicile. Nu există suport pentru notificările push, manifestul aplicației web este acceptat doar parțial, iar funcțiile noi, cum ar fi Galeria nouă de aplicații, ignoră adesea PWA-urile. Și din această cauză, are sens doar ca PWA să nu fie binevenit în Apple App Store, conform Ghidurilor Apple de revizuire a App Store:

Aplicația dvs. ar trebui să includă funcții, conținut și interfață de utilizare care o ridică dincolo de un site web reambalat . Dacă aplicația dvs. nu este deosebit de utilă, unică sau „asemănătoare unei aplicații”, aceasta nu aparține App Store.

Funcționalitate minimă, Ghid de revizuire a App Store

Deoarece Apple încearcă din răsputeri să distrugă toate capacitățile PWA, orice efort de a publica un PWA — chiar și atunci când are un wrapper de aplicație nativ precum Cordova — este zadarnic. Deocamdată, putem doar să sperăm că viitoarele versiuni iOS vor aduce un suport mai bun pentru PWA, dar de acum, publicarea PWA în Apple App Store nu este posibilă , motiv pentru care ar trebui să luați în considerare o abordare a aplicației native dacă majoritatea publicului dvs. țintă utilizează dispozitive bazate pe iOS.

 Citiți mai multe: PWA-uri pe iOS 14 Beta: Modificări subtile

Magazin Microsoft

După cum se menționează în articolul nostru Windows 10 și PWA: Viitorul livrării de software, Microsoft a pus bazele unui magazin Progressive Web App de ceva vreme și devine pas cu pas o realitate. PWA de la mărci mai populare populează deja peste tot pe piețele de aplicații și cu rezultate nu mai puțin exemplare pe care alții să le urmărească.

La fel ca Google, Microsoft salută PWA și, în plus, ei chiar intenționează să popularizeze și să înlocuiască aplicațiile native UWP cu aplicații hibride – un fel de aplicații web progresive învelite în shell native.

În teorie, publicarea aplicației dvs. Progressive Web în Microsoft Store nu ar trebui să vă ia deloc efort, deoarece inițial a fost planificat să fie un proces automat care folosește Bing ca mecanism de accesare cu crawlere pentru PWA-uri de calitate. Cu toate acestea, totul este încă într-o etapă experimentală și nu funcționează atât de eficient cum a fost planificat, motiv pentru care ar trebui să trimiteți manual PWA ca pachet de aplicație Windows (.appx). Dar nu vă faceți griji, procesul nu este la fel de tulburător ca un anumit magazin de aplicații.

Cerințe

• Un cont Windows Dev Center
• PWABuilder
• O aplicație web progresivă funcțională și verificată de calitate, care respectă politicile magazinului

Pasul 1 : Rezervați un nume pentru aplicația dvs

Primul pas în publicarea unei aplicații în Microsoft Store este rezervarea unui nume. În cazul în care vă întrebați ce s-ar întâmpla dacă un băiat nebun ar decide să rezerve fiecare nume existent: nu vă faceți griji, rezervarea numelui va expira după 3 luni.

Completați câmpurile obligatorii și notați-le undeva, deoarece aceste informații vor fi solicitate mai târziu.

Pasul 2: Generați un AppX folosind PWABuilder

După cum am menționat mai sus, PWABuilder este o modalitate excelentă de a genera un pachet funcțional care poate fi publicat pe piețele majore de aplicații. Este unul dintre primele instrumente de pe piață care a fost dezvoltat de Microsoft exclusiv cu scopul de a promova adoptarea PWA.

Generați manifest

Pe PWABuilder, introduceți adresa URL a PWA și faceți clic pe Începeți . Rețineți că acest pas este crucial, deoarece identifică și/sau completează automat informațiile lipsă din manifest.json , care este adesea necesar pentru PWA-urile care nu sunt create special pentru Microsoft Store.

 Lectură recomandată: Manifest PWA: Crearea manifestului aplicației dvs. web în mod simplu

Următorul pas este construirea lucrătorilor de service pentru PWA, dar presupunând că a dvs. este o aplicație web progresivă tipică în care lucrătorii de service sunt deja integrați, acest pas va fi omis și vom trece la pasul final - obținerea pachetului dvs. .appx.

Generați AppX

După ce faceți clic pe generați AppX, ar trebui să vedeți ceva de genul acesta pop-up:

Aici pot fi utile informațiile anterioare. Completați câmpurile și va fi afișată o casetă de descărcare care conține pachetul .appx. Descărcați-l și acum veți fi gata să vă publicați PWA în Microsoft Store.

În cazul în care doriți să testați PWA înainte de a-l publica în magazin, există întotdeauna opțiunea de a-l testa pe Windows activând Modul dezvoltator → Faceți clic dreapta pe test_install.ps1 → Executați cu PowerShell . Făcând acest lucru, va adăuga automat PWA pe desktop și pe meniul Start, din care poate fi lansat și testat pentru a vedea dacă totul funcționează corect.

Pasul 3: trimiteți pachetul aplicației în Microsoft Store

Pentru a publica PWA în Microsoft Store, va trebui să navigați la folderul pachetului din .zip pe care l-ați descărcat mai devreme. În acest folder se află tot ce ai nevoie pentru a publica în Microsoft Store. Pentru clarificări, acest folder nu conține codul dvs., deoarece servește doar ca mecanism de direcționare către PWA pe web și alte metadate din Magazin care nu au legătură.

După ce ați localizat windows.appx, mergeți la pagina de trimitere din Centrul dvs. de dezvoltare și completați informațiile necesare:

După parcurgerea tuturor pașilor și completarea tuturor câmpurilor obligatorii, butonul „ Trimite în magazin ” ar trebui să se aprindă, indicând faptul că PWA este acum gata pentru procesul de revizuire. Va dura de la o oră până la câteva zile pentru ca acest proces să se finalizeze; odată ce se termină, PWA va fi certificat și disponibil pentru descărcări publice/private (în funcție de setările de disponibilitate din Dev Center).

Concluzie

După toate acestea, poate că încă vă întrebați de ce ar trebui să construiți o aplicație web progresivă – cu atât mai puțin să treceți prin toate aceste probleme pentru a publica una. Și ai dreptate să pui întrebări atât de fundamentale.

Progressive Web App se dovedește pas cu pas a fi viitorul livrării de software și următorul pas natural în evoluția tehnologiei web. Începând de acum, este deja utilizat pe scară largă peste tot în lumea comerțului electronic, unde experiența unificată și captivantă pe toate dispozitivele este cheia pentru conversii ridicate.

Fiind o tehnologie nouă, este deja destul de greu să construiți o aplicație web progresivă așa cum este. Cu SimiCart, nu mai trebuie să vă faceți griji cu privire la fazele de dezvoltare a lui Magento PWA , deoarece vă oferim o soluție completă și cea mai rentabilă de pe piață.