Una aplicació web progressiva (PWA) és un tipus de programari d'aplicació subministrat a través del web, construït mitjançant tecnologies web habituals, inclosos HTML, CSS i JavaScript. Està destinat a treballar en qualsevol plataforma que utilitzi un navegador que compleixi els estàndards. La funcionalitat inclou treballar fora de línia, notificacions automàtiques i accés al maquinari del dispositiu, cosa que permet crear experiències d’usuari similars a les aplicacions natives de dispositius mòbils i d’escriptori.
Ara és fàcil penjar un PWA a sistemes de distribució digital com Google Play Store, Apple App Store, Microsoft Store o Samsung Galaxy Store. Els usuaris poden descarregar la vostra PWA igual que qualsevol altra aplicació. Google us permet publicar la vostra PWA com a aplicació nativa a Google Play Store mitjançant una activitat web de confiança (TWA). Les activitats web de confiança són una nova manera d’integrar el contingut de les vostres aplicacions web, com ara el vostre PWA, amb la vostra aplicació per a Android mitjançant un protocol basat en pestanyes personalitzades.
1. Baixeu i instal·leu Android Studio
Per configurar una activitat web de confiança (TWA) no cal que els desenvolupadors autorin codi Java, però Android Studio es requereix. En primer lloc, descarregueu Android Studio i instal·leu-lo al dispositiu de desenvolupament.
2. Creeu un projecte d’Activitat web de confiança
Aquesta secció us orientarà a configurar un nou projecte a Android Studio.
- Obriu Android Studio i feu clic a "Inicia un nou projecte d'Android Studio".
- Android Studio us demanarà que escolliu un tipus d'activitat. Com que els TWA utilitzen una activitat proporcionada per la biblioteca de suport, trieu "Afegeix cap activitat" i feu clic a "Següent".
- El pas següent, l'assistent sol·licitarà configuracions per al projecte. Aquí teniu una breu descripció de cada camp:
- Nom: el nom que s'utilitzarà per a la vostra aplicació a l'Android Launcher.
- Nom del paquet: un identificador únic per a les aplicacions d'Android a Play Store i als dispositius Android.
- Desa la ubicació: on Android Studio crearà el projecte al sistema de fitxers.
- Llenguatge: El projecte no requereix escriure cap codi Java o Kotlin. Seleccioneu Java, com a predeterminat.
- Nivell mínim d’API: La biblioteca d'assistència requereix com a mínim el nivell 16 d'API. Seleccioneu l'API 16 qualsevol versió anterior.
- Deixeu les caselles de selecció restants desmarcades, ja que no farem servir aplicacions instantànies ni artefactes d'AndroidX, i feu clic a "Finalitza".
3. Obteniu la biblioteca d'assistència TWA
Per configurar la biblioteca TWA en el projecte, haureu d’editar el fitxer de creació d’aplicacions. Cerqueu el Guions de Gradle secció a la secció Navegador de projectes. Hi ha dos fitxers anomenats construir.gradle, que pot ser una mica confús i les descripcions del parèntesi ajuden a identificar-ne la correcta. El fitxer que estem buscant és el que trobem Mòduls al costat del seu nom. La biblioteca d'activitats web de confiança utilitza Java 8 funcions i el primer canvi permet Java 8. Afegir a compileOptions a la part inferior de la secció d'Android, com es mostra a continuació:
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
El següent pas afegirà la biblioteca de suport TWA al projecte. Afegeix una nova dependència a la secció dependències secció:
dependencies {
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:1.0.0'
}
Android Studio mostrarà de forma immediata la sol·licitud de sincronització del projecte. Feu clic a l'enllaç "Sincronitza ara" i sincronitzeu-lo.
4. Afegiu l’activitat TWA
La configuració de l’activitat TWA s’aconsegueix mitjançant l’edició de l’aplicació Android Manifest.
- Per Navegador de projectes, amplieu la secció d’aplicacions, seguida dels manifestos i feu doble clic a AndroidManifest.xml per obrir el fitxer.
- Com que vam demanar a Android Studio que no afegís cap activitat al nostre projecte en crear-lo, el manifest és buit i només conté l’etiqueta d’aplicació. Afegiu l’activitat TWA inserint un activitat etiqueta a la secció aplicació tag.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example.twa.myapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
tools:ignore="GoogleAppIndexingWarning">
<activity
android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
<meta-data
android:name="android.support.customtabs.trusted.DEFAULT_URL"
android:value="https://yourwebsite.com" />
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE"/>
<data
android:scheme="https"
android:host="yourwebsite.com"/>
Les etiquetes afegides a XML són el manifest d'Android App estàndard. Hi ha dues dades rellevants sobre el context de les activitats web de confiança:
- El meta-dades l'etiqueta indica a l'Activitat TWA quin URL hauria d'obrir. Canvia el androide: valor atribut amb l’URL del PWA que voleu obrir. En aquest exemple, ho és https://seu lloc web.com.
- El segon intenció-filtre l'etiqueta permet a la TWA interceptar els intencions d'Android que s'obren https://seu lloc web.com. La Android: amfitrió atribut dins del dades L'etiqueta ha d'apuntar al domini que està obert pel TWA.
5. Elimineu la barra d’URL
Les activitats web de confiança requereixen que s’hagi establert una associació entre l’aplicació d’Android i el lloc web per eliminar la barra d’URL. Aquesta associació es crea mitjançant Digital Asset Links i l’associació s’ha d’establir de les dues maneres, enllaçant des de l’aplicació al lloc web i des del lloc web a l’aplicació. És possible configurar l’aplicació a la validació del lloc web i configurar Chrome per saltar el lloc web a la validació de l’aplicació amb finalitats de depuració.
a. Establiu una associació de l'aplicació al vostre lloc web
Obre el fitxer de recursos de cadena aplicació> res> valors> strings.xml i afegiu la instrucció Digital AssetLinks a continuació:
<string name="app_name">My App
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://yourwebsite.com\"}
}]
Canvieu el contingut de la secció lloc atribut que coincideixi amb l'esquema i el domini oberts per la TWA. Torna al fitxer Manifest de l'aplicació per a Android, AndroidManifest.xml, enllaça a la declaració afegint-ne una de nova meta-dades però, en aquesta ocasió, com a fill de aplicació etiqueta:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.twa.myapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<meta-data
android:name="asset_statements"
android:resource="@string/asset_statements" />
...
b. Mode de depuració
Després d'establir una relació des de l'aplicació Android amb el lloc web. És útil depurar aquesta part de la relació sense crear el lloc web per a la validació d’aplicacions. A continuació, es mostra com podeu provar-ho en un dispositiu de desenvolupament:
- Obriu Chrome al dispositiu de desenvolupament i aneu a chrome: // banderes, cerqueu un element anomenat Habilita la línia d'ordres en dispositius no arrelats i canvieu-lo per HABILITAT i reinicieu el navegador.
- A continuació, a l’aplicació Terminal del vostre sistema operatiu, utilitzeu Android Debug Bridge (instal·lat amb Android Studio) i executeu l’ordre següent:
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://yourwebsite.com\"' > /data/local/tmp/chrome-command-line"
Tanqueu Chrome i torneu a llançar la vostra aplicació des d'Android Studio. L’aplicació ara s’hauria de mostrar a pantalla completa.
c. Establiu una associació des del vostre lloc web amb l’aplicació
Hi ha dues dades que el desenvolupador necessita recopilar de l'aplicació per crear l'associació:
- Nom del paquet: La primera informació és el nom del paquet de l'aplicació. Aquest és el mateix nom de paquet generat al crear l'aplicació. També es pot trobar dins del mòdul construir.gradle, a Gradle Scripts> build.gradle (Mòdul: app), i és el valor de identificador de l'aplicació atribut.
- Empremta digital SHA-256: les aplicacions d'Android han d'estar signades per poder pujar a Play Store. La mateixa signatura s'utilitza per establir la connexió entre el lloc web i l'aplicació mitjançant l'empremta digital SHA-256 de la clau de càrrega. Necessitareu l'eina clau per extreure l'empremta digital SHA-256.
Com generar una clau de càrrega i una botiga de claus mitjançant Android studio
Podeu generar una clau de càrrega mitjançant Android Studio de la manera següent:
- A la barra de menús, feu clic a Compila> Compila> Genera paquet / APK signat.
- Al diàleg "Genera un paquet signat o APK", seleccioneu "Android App Bundle o APK" i feu clic a "Següent".
- A sota del camp del camí del magatzem de claus, feu clic a "Crea nou".
- A la finestra New Key Store, proporcioneu la informació següent per al vostre magatzem de claus i clau:
- Ruta del magatzem de claus: seleccioneu la ubicació on s'ha de crear el vostre magatzem de claus.
- Contrasenya: creeu i confirmeu una contrasenya segura per al vostre magatzem de claus.
- àlies: introduïu un nom identificatiu per a la vostra clau.
- Contrasenya: creeu i confirmeu una contrasenya segura per a la vostra clau. Hauria de ser diferent de la contrasenya que heu triat per al vostre magatzem de claus.
- Validesa (anys): establiu el període de temps en anys que la vostra clau serà vàlida. La vostra clau ha de ser vàlida com a mínim durant 25 anys, de manera que podeu signar actualitzacions de l'aplicació amb la mateixa clau durant tota la vida útil de l'aplicació.
- Certificat: introduïu informació sobre vosaltres mateixos per al vostre certificat. Aquesta informació no es mostra a la vostra aplicació, però s'inclou al vostre certificat com a part de l'APK.
- Un cop emplenat el formulari, feu clic a "D'acord".
- El següent quadre de diàleg tracta de signar la vostra aplicació, feu clic a "Cancel·la", ja que encara estem creant l'aplicació.
Com utilitzar el keytool a Microsoft Windows
Heu d’instal·lar Java al vostre PC Windows. Per situar el keytool;
- Anar a Unitat C:
- Obriu la carpeta "Fitxers de programes/Fitxers de programes (x86)".
- Obriu la carpeta "Java".
- L'eina clau es troba a la carpeta "bin".
- Copieu la ubicació de la carpeta Java bin. Per exemple: C: Fitxers de programa (x86) Javajre1.8.0_60bin
- Aneu al menú Inici i cerqueu el símbol del sistema, només escrivint "cmd".
- Obriu el símbol del sistema.
- Escriviu "cd" i enganxeu la ubicació de la carpeta Java bin i premeu Intro. Per exemple: cd C: fitxers de programa (x86) Javajre1.8.0_60bin
- Ara hauríeu de poder utilitzar l'eina clau per extreure l'empremta digital SHA-256.
Assegureu-vos de prendre nota ruta, àlies i contrasenyes per a la botiga de claus, ja que ho necessitareu per al següent pas. Extreu l'empremta digital SHA-256 mitjançant el keytool, amb l'ordre següent:
keytool -list -v -keystore -alias -storepass -keypass
Si l'ordre anterior no funciona. Només cal que copieu el fitxer del magatzem de claus a la carpeta d’usuari administrador de l’ordinador. Per exemple; C: usuarisVictor Mochere. Canvieu el nom del fitxer del magatzem de claus per simplement "botiga .key'i, a continuació, escriviu l'ordre següent:
keytool -list -v
El valor per a Empremta digital SHA-256 està imprès a la secció certificate secció d’empremtes dactilars. A continuació, es mostra un resultat de sortida:
keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password
Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3
Amb les dues dades disponibles, dirigiu-vos a la secció generador d’asslinks, ompliu els camps i premeu "Genera declaració". Copieu la declaració generada i publiqueu-la des del vostre domini, des de l'URL /.well-known/assetlinks.json. A continuació, podeu prémer "Declaració de prova" per veure si l'associació s'ha establert correctament.
Com crear i carregar un fitxer .json a l’arrel del vostre domini
A continuació, es mostra una manera senzilla de crear i carregar un fitxer .json al vostre lloc web.
- Després de copiar la declaració generada.
- Aneu a la ubicació on voleu crear el fitxer al vostre ordinador.
- Feu clic amb el botó dret sobre un espai negre.
- A continuació, aneu a Nou> Document de text.
- Enganxeu la declaració i tanqueu el document de text.
- Se us demanarà que deseu els canvis.
- Canvieu el nom d'aquest document a "assetlinks.json".
- Aneu al cPanel del vostre lloc web, feu clic a Gestor de fitxers> Gestor de fitxers> public_html> .molt conegut.
- A continuació, podeu carregar el assetlinks.json arxiu al fitxer .ben conegut carpeta.
Nota:
Si heu optat per Google Play signant els llançaments de l'aplicació. A continuació, per eliminar la barra d’URL, haureu d’utilitzar l’empremta digital SHA-256 generada per Google Play per a la vostra fitxer assetlinks.json. Anar a Google Play Console> Gestió de versions> Signatura d'aplicacionsi després copieu l’empremta digital del certificat de signatura de l’aplicació SHA-256 i enganxeu-la a la vostra assetlinks.json arxiu.
6. Creació d’una icona
Quan Android Studio crei un nou projecte, tindrà una icona predeterminada. Com a desenvolupador, voldreu crear la vostra pròpia icona i diferenciar la vostra aplicació de la resta a Android Launcher. Android Studio conté Image Asset Studio, que proporciona les eines necessàries per crear les icones correctes, per a qualsevol resolució i forma de les vostres necessitats d'aplicació. Dins d'Android Studio, navegueu a Fitxer> Nou> Recurs d'imatge, Seleccioneu Icones de llançament (adaptatives i heretades) i seguiu els passos de l'assistent per crear una icona personalitzada per a l'aplicació.
7. Afegint una pantalla esquitxada
Android Studio conté Vector Asset Studio, que proporciona les eines per ajudar els desenvolupadors a transformar SVG en Android Vector Drawables. Dins d'Android Studio, navegueu a Fitxer> Nou> Recurs vectorial per començar. Els dispositius Android poden tenir diferents mides de pantalla i densitats de píxels.
Per assegurar-vos que la pantalla de presentació es veu bé en tots els dispositius, haureu de generar la imatge per a cada densitat de píxels. A continuació es mostra una llista amb les densitats de píxels, el multiplicador aplicat a la mida base (320x320dp), la mida resultant en píxels i la ubicació on s'ha d'afegir la imatge al projecte Android Studio.
Densitat | Multiplicador | mida | Ubicació del projecte |
mdpi (línia base) | 1.0x | 320 × 320 px | / res / drawable-mdpi / |
ldpi | 0.75x | 240 × 240 px | / res / drawable-ldpi / |
HDP | 1.5x | 480 × 480 px | / res / drawable-hdpi / |
xhdpi | 2.0x | 640 × 640 px | / res / drawable-xhdpi / |
xxhdpi | 3.0x | 960 × 960 px | / res / drawable-xxhdpi / |
xxxhdpi | 4.0x | 1280 × 1280 px | / res / drawable-xxxhdpi / |
8. Actualització de l'aplicació
Amb les imatges de la icona i la pantalla d'inici generades, és hora d'afegir les configuracions necessàries al projecte. En primer lloc, afegiu un proveïdor de contingut al Manifest d’Android (AndroidManifest.xml).
...
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="com.example.twa.myapplication.fileprovider"
android:grantUriPermissions="true"
android:exported="false">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/filepaths" />
Assegureu-vos de canviar la funció androide: autoritats atribut quan es crea el proveïdor, ja que dues aplicacions no poden tenir la mateixa autoritat en un dispositiu. A continuació, afegiu res / xml / filepaths.xml recurs i especifiqueu la ruta a la pantalla de splash de twa:
<files-path path="twa_splash/" name="twa_splash" />
Finalment, afegiu metaetiquetes al Manifest d'Android per personalitzar LauncherActivity:
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
...
<meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
android:resource="@drawable/splash"/>
<meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
android:resource="@color/colorPrimary"/>
<meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
android:value="300"/>
<meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
android:value="com.example.twa.myapplication.fileprovider"/>
...
Assegureu-vos que el valor de android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY etiqueta coincideix amb el valor definit de androide: autoritats atribut dins de l'etiqueta del proveïdor.
9. Transparentant el LauncherActivity
A més, assegureu-vos que LauncherActivity és transparent per evitar que es mostri una pantalla blanca abans de la publicació. Afegeix un tema nou a res / styles.xml:
<style name="Theme.LauncherActivity" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowAnimationStyle">@null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
A continuació, afegiu una referència al nou estil al manifest d'Android:
...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
android:theme="@style/Theme.LauncherActivity">
...
10. Construcció d'un paquet d'aplicacions
Construir un paquet d'aplicacions en lloc d'APK per penjar-lo a Google Play Store té els avantatges següents.
- Mida de descàrrega més petita.
- Funcions de l'aplicació sota demanda.
- Mòduls només d'actius.
Per crear la vostra aplicació a punt per signar-la; a la barra de menús, feu clic a Build> Build Bundle (s) / APK (s)> Build Bundle (s).
11. Generar un paquet d’aplicacions signat
Aquí es mostra com generar un paquet d'aplicacions signades.
- A la barra de menús, feu clic a Compila> Genera paquet / APK signat.
- Al quadre de diàleg Generar paquet signat o APK, seleccioneu Android App Bundle o APK i feu clic a "Següent".
- Seleccioneu un mòdul del menú desplegable.
- Especifiqueu el camí al vostre magatzem de claus, l'àlies de la vostra clau i introduïu les contrasenyes d'ambdós.
- Si esteu signant un paquet d'aplicacions amb una clau de signatura d'aplicacions existent i més tard voleu activar la signatura d'aplicacions de Google Play, marqueu la casella que hi ha al costat d'Exporta la clau xifrada i especifiqueu un camí per desar la clau de signatura com a un xifrat *.pek dossier. A continuació, podeu utilitzar la vostra clau de signatura d'aplicacions xifrada per activar una aplicació existent a la signatura d'aplicacions de Google Play.
- Feu clic a "Següent".
- A la finestra següent, seleccioneu una carpeta de destinació per al vostre paquet d'aplicacions signades, seleccioneu el tipus de compilació i, si escau, trieu els sabors del producte. Si el vostre projecte utilitza sabors de producte, podeu seleccionar diversos sabors de producte mentre manteniu premuda la tecla Control a Windows/Linux o la tecla Command a Mac OSX. Android Studio generarà un APK o un paquet d'aplicacions independent per a cada producte que seleccioneu.
- Seleccioneu quines versions de signatura voleu que admeti la vostra aplicació.
- Feu clic a "Finalitzar".
12. Carregueu el paquet d’aplicacions a Google Play Store
Després de crear i signar la versió de llançament de l'aplicació, el següent pas és pujar-la a Google Play Store. I recordeu que Google Play admet descàrregues d'aplicacions comprimides de només 150 MB o menys.
- Anar a Google Play Console.
- Pagueu els 25 dòlars obligatoris per al vostre compte de desenvolupador.
- Ompliu les dades requerides.
- Fer clic a Totes les aplicacions> Crea aplicació.
- Seleccioneu l'idioma de la vostra aplicació i introduïu el nom/títol de la vostra aplicació.
- Inscriu-te a la signatura d'aplicacions de Google Play, que és la manera recomanada de pujar i signar la teva aplicació. Si creeu i pengeu un Android App Bundle, us heu d'inscriure a la signatura d'aplicacions de Google Play. Pots fer-ho a Firma d'aplicacions a Play Console.
- Heu d'omplir tota la informació necessària per a la fitxa de la botiga, la classificació del contingut, el contingut de l'aplicació i els preus i la distribució. Hauríeu de veure quatre marques de verificació verdes a la barra lateral quan finalitzi aquest procés.
- navegui fins Versions d'aplicacions> Producció> Crea una versió. A continuació, carregueu el vostre Android App Bundle i reviseu-lo. Quan estiguis preparat per enviar l'aplicació perquè Google la revisi, fes clic a "Producció de llançament" i "Confirma el llançament".
- La teva aplicació estarà en estat de publicació pendent, només has d'esperar unes hores perquè s'aprovi.