Vertroude webaktiwiteit

Hoe u u webprogram kan bekragtig - en 'n Android-app daaruit kan skep

Vertrou jy my?

Vir 'n geruime tyd kan webtoepassings met min moeite na 'n native app omgeskakel word, afhangend van die kompleksiteit van die app. Raamwerke soos Capacitor.js of Cordova bied byvoorbeeld sulke funksies en is ook open source sagteware. Om 'n webtoepassing as 'n oorspronklike een aan te bied, moet u die webtoepassing plaaslik opstel, die raamwerk vertel waar hierdie bouuitset geleë is en basies wag totdat die programme geskep word. Die kernkonsep is dat u webwerf net in 'n ingeboude webaansig loop. Nou, dinge gaan nou weer verander deur 'Trusted Web Activity' deur Google bekend te stel.

PWA ++

Wat is 'Trusted Web Activity' (TWA)? Hier is die kern:

  • 'N "Vertroude webaktiwiteit" word gebruik in die konteks van Google Play Store en 'n inheemse Android-app wat gegenereer word uit 'n PWA
  • U kan die eienaarskap van u PWA vir die Android-app verifieer deur 'n referensie met die naam "assetlinks" te skep - dit is waar Google Play nodig is
  • deur hierdie "assetlinks" -bestand op te laai na die publieke gids van u web-app, kan Google die eienaarskap van die PWA verifieer as die oorspronklike Android-app niemand anders as u kan skep nie

Goed, dit was 'n kort oorsig van die konsep agter TWA. Ter samevatting het die "trust" -deel betrekking op die verifiëring van eienaarskap van u PWA.

Een nuwe TWA, asseblief!

Ok, maar hoe werk dit eintlik? Die opstel is eintlik baie eenvoudig en duur nie langer as 'n uur nie. Hier is hoe dit gedoen word:

Maak eers seker dat u PWA korrek ingestel is:

  • manifest.json is beskikbaar en bekragtig
  • ikoon + naam is korrek
  • u kan hierdie veranderinge vinnig in DevTools nagaan

Die hoofbiblioteek wat al die swaar werk sal neem, word 'bubblewrap' genoem, 'n Node.js-pakket wat 'n CLI lewer, wat deur die hele handleiding gebruik sal word.

Skep eers 'n nuwe gids vir die TWA genaamd 'twa'. Binne 'twee' skep ons nog 'n gids met die naam 'android'. "Twee" self sal die node_modules bevat en "android" die werklike native Android-app.

Maak seker dat u nou 'twee' is om 'n nuwe npm-projek te begin:

npm init -y

Laat ons nou die CLI byvoeg as 'n afhanklikheid van die dev:

npm i -D @bubblewrap/cli

Dit is nou al wat ons nodig het. Kom ons begin dan die "bubblewrap" -projek. Vervang net die domein deur die uwe en kyk waar die “manifest.json” geleë is. U sal gevra word vir die Java SDK + Android SDK-liggings, wat u kan hergebruik as dit reeds geïnstalleer is:

npx bubblewrap init --manifest=https://your-pwa.com/manifest.json

As u verder gaan, is dit tyd om 'n paar vrae en antwoorde deur te gaan met die "bubblewrap" CLI. Afhangend van die beskikbare metadata in u PWA, is die meeste velde reeds ingevul:

npx bubblewrap build

Noudat u PWA geïdentifiseer is en die Android-app geskep is, is dit tyd vir 'n vinnige rooktoets. Begin 'n emulator of gebruik u regte toetstoets:

npx bubblewrap install

As alles reg uitwerk, sal u u webprogram as 'n werkende Android-app sien. Groot, die moeilikste deel is al klaar!

Wat oorbly, is die skep van die verifikasie-lêer genaamd "assetlinks.json". Aangesien ek aanvaar dat u die appbundel na Google Play wil oplaai, is dit belangrik om daarop te let hoe die ondertekening werklik bestuur word:

  • Google Play sal die ondertekeningsleutels vir u bestuur, wat beteken dat ons die ooreenstemmende SHA-256-waarde in Google Play Console moet naslaan
  • 'Bubblewrap' het miskien al 'n "assetlinks" -bestand met een item, wat 'n ander SHA-256-hash bevat, gemaak - geen probleem nie, ons gebruik beide sleutels van Google Play en die gegenereerde een

As daar geen "assetlinks" -lêer geskep is nie, was die manier waarop ek te werk gegaan het om die "Asset Links Tool" (deur Google aanbeveel, skakel in addendum) op my toetsapparaat af te laai en die SHA-256 voor te lees van die geïnstalleerde getekende toets-app wat geskep is en geïnstalleer deur "bubblewrap". Hierdie json kan dan deur u gebruik word. Maak net seker dat u die eerste inskrywing dupliseer en die SHA-256 vervang deur die een van Google Play, wat lei tot 'n "assetlinks" -lêer met 2 inskrywings, wat slegs verskil in hul ondertekeningsleutels.

Byna klaar, u moet nou net 'n nuwe gids in u bestaande PWA se openbare vouer skep en die app een keer oplaai:

.well-known/assetlinks.json

Nou kan Google dit lees en eienaarskap verifieer.

Een ... meer ... stap ...

Al wat nou oorbly, is om die vrystellingsbundel na Google Play op te laai en vry te stel! Ja, dit is eintlik so eenvoudig. Google beywer regtig wat op die internet moontlik is en is nie bang om nuwe dinge uit te probeer nie. 'Vertroude webaktiwiteit' is 'n nuwe manier om die gaping tussen web en native nog verder te oorbrug, hoewel dit tans tot Android beperk is.

O, en ja: hierdie web-app is natuurlik 'n PWA en 'n TWA. U kan die Android-app in Google Play bekyk. Die skakel is hieronder in die addendum.

  • Tom