9 fantastiske PWA-hemmeligheder

Progressive webapps (PWA'er) er en ny grænse i responsivt webdesign , og de vokser i popularitet. PWA-support startede med Chrome på Android og er nu tilgængelig på de fleste andre Android-browsere, såsom Opera, Firefox, Samsung Internet og UCWeb samt iPhones og iPads fra iOS 11.3 og Edge til Windows og Chrome på stationære operativsystemer.

grafisk design til nonprofitorganisationer

For at hjælpe dig med at skabe et gode brugererfaring for dette voksende publikum vil vi dele nogle vigtige tricks og ideer. For flere råd, se vores artikel om hvordan man opretter en app .



01. WebAPK vs Android genvej

I 2017 rullede Chrome en ny funktion ud til Android-brugere: WebAPK. Når dine brugere nu installerer din PWA (hvis den opfylder kravene), opretter en Google Play-server en APK (Android-pakke, en indbygget app-container) i farten og installerer den på enheden, som om den kommer fra Play Butik . Din bruger behøver ikke at aktivere usikre kilder eller berøre andre indstillinger.



Når PWA er installeret, vises det på startskærmen, i appstarteren, i Indstillinger og som enhver anden førsteklasses borger-app i operativsystemet, herunder oplysninger om batteri og plads, der bruges i systemet.

Hvis din PWA ikke opfylder alle kravene, er Play-tjenesten nede, der er et forbindelsesproblem, eller hvis en anden Android-browser som Firefox eller Samsung Internet bruges, oprettes en standardgenvej til startskærmen. Dette ikon vil være browser-mærket fra Android 8+.



WebAPK muliggør også en dejlig, men farlig funktion, du skal være opmærksom på: PWA vil eje domænet og stien inden for grænserne for Android OS. Baseret på omfangsattributten til din Web App Manifest videresendes hvert link, som brugeren modtager til det omfang, til din app i fuld skærm og ikke til browseren, hvilket betyder, at du skal være opmærksom på de webadresser, du bruger.

Lad os sige, at du har en PWA, der betjener mobile brugere, og at den er i rodmappen på dit domæne. Når appen installeres via WebAPK, ejes hele domænet nu af PWA. Hvis du har en undersøgelse på / undersøgelse, som du deler via Facebook, eller en PDF-fil med vilkår og betingelser, som du e-mailer til dine brugere på /terms.pdf, åbner operativsystemet PWA og ikke browseren, når du klikker på disse links. Det er vigtigt at kontrollere, om dit PWA-routing-system kender til disse URL'er, og hvordan de skal betjenes, og hvis ikke, at åbne dem i en browser i et andet omfang.

02. Opret et brugerdefineret webapp-installationsbanner

Vi kan



Vi kan ikke tilpasse en browsers webapp-installationsbanner, men vi kan udsætte dem, når vi viser mere information til brugeren

Flere browsere inviterer brugeren til at installere din PWA, hvis visse betingelser er opfyldt, herunder tilbagevendende besøg fra den pågældende bruger til din PWA. I øjeblikket indeholder banneret ikke nok information til, hvorfor en bruger skal acceptere. Vi kan dog bruge begivenheder til at undgå banneret og, vigtigere, at udsætte det for noget, der mere sandsynligt genererer accept, såsom et installationsikon.

Det første trin er at annullere udseendet af banneret og gemme begivenhedsobjektet til senere brug:

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

Det næste trin er at give en brugergrænseflade til at forklare fordelene ved installation eller en installationsknap. Denne brugergrænseflade kalder vores næste funktion:

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

03. Del indhold fra din PWA

På kompatible browsere vil Web Share API udløse den velkendte delingsdialog fra operativsystemet

På kompatible browsere vil Web Share API udløse den velkendte delingsdialog fra operativsystemet

Når din PWA er i fuldskærmstilstand, er der ingen URL-bjælke eller Del handling fra browseren, som brugeren kan dele indhold med sociale netværk. Vi kan drage fordel af Web Share API og have en reserve til at åbne native sociale apps.

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-sporing

Når du har en PWA, vil du spore så mange begivenheder som muligt, så lad os se på alt, hvad vi i øjeblikket kan måle. Du kan bruge Google Analytics API'er eller andre analytiske værktøjer til at spore disse begivenheder senere.

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 } }); });

Den næste vigtige sporingshændelse er, når brugeren åbner appen fra startskærmen. Det betyder, at brugeren har klikket på appens ikon eller på Android med WebAPK-support også klikket på et link, der peger på PWA-omfanget.

Den enkleste måde at gøre dette på er ved hjælp af manifestets start_url-attribut ved at tilføje en sporingshændelse i URL'en, der automatisk kan bruges som en oprindelse fra et Analytics-script, såsom:

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

Også det følgende script efterlader os en boolsk, der angiver, om brugeren i øjeblikket er i en browser (sand) eller en uafhængig apptilstand (falsk):

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; }

Derefter, hvis du bruger push-underretninger, kan du spore flere begivenheder i servicearbejderen, såsom:

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. Opret en kompatibel iOS PWA

Når du laver PWA

Når du laver PWA'er på iOS, skal du altid sørge for at kontrollere din statuslinjedefinition, hvilket vil skabe forskellige statuslinjeoplevelser

Mens mange tror, ​​at PWA-support er ved at lande for første gang på iOS 11.3, er sandheden, at konceptet - om end med et andet navn - blev præsenteret af Steve Jobs for mere end ti år siden på WWDC 07. Derfor understøttede iOS startskærmen og offline apps i et stykke tid ved hjælp af ældre teknikker. Men fra iOS 11.3 begynder det at understøtte de samme specifikationer som Android.

Hvis du stadig vil tilbyde en installationsoplevelse før iOS 11.3, skal du tilføje metatags eller bruge en polyfyldning, som denne forfatter oprettede på https://github.com/firtman/iWAM

Nu vil din PWA være offline-kompatibel og installeres på iOS, selvom du ikke tilvælger iOS. Det er vigtigt at forstå nogle forskelle, der kan påvirke din PWA-brugeroplevelse på iOS:

  1. Ikoner på iOS skal være firkantede og ikke gennemsigtige for at undgå UI-problemer. Brug ikke det samme ikon, du har på Android. Brug 120x120 og 180x180 til iPhones.
  2. Hvis du har en SPA, eller du linker til andre sider i dit anvendelsesområde, skal du være forsigtig med navigation, da iOS-brugere ikke har en måde at gå tilbage eller fremad, hvis du ikke leverer navigationslinks i dit brugergrænseflade. Strygebevægelser fungerer ikke på PWA'er i fuld skærm.
  3. Fra de første versioner af iOS 11.3 genindlæser operativsystemet PWA'er for hver adgang til appen, så hvis brugeren skal komme ud af appen for at komme tilbage senere (for eksempel til en tovejsgodkendelsesproces), skal du huske din app starter fra bunden som standard.

06. Synkronisering af data i baggrunden

Servicearbejdere har en separat livscyklus fra PWA-vinduet eller browserens fane. Derfor kan du foretage netværkshandlinger i baggrunden, selv efter at brugeren lukker PWA. Hvis der er en ventende handling, og der ikke er nogen tilgængelig netværksadgang på det tidspunkt, vil motoren lade os behandle, mens vi er i baggrunden, hvis en forbindelse registreres senere.

Background Sync API er i øjeblikket kun tilgængelig i nogle browsere, så du skal give et tilbagefald. Ideen er, at din PWA vil indstille et flag med et strengmærke og angive, at det skal udføre baggrundssynkroniseringshandling.

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

Derefter på ServiceWorker lytter vi til begivenheden, og hvis det er etiketten, forventer vi, at vi returnerer et løfte. Hvis løftet er opfyldt, markeres operationen som afsluttet. Hvis ikke, fortsætter den med at prøve senere i baggrunden.

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

07. Sociale netværk og pseudobrowsere

Hvis dine brugere deler dit PWA-indhold på sociale netværk, eller hvis de bruger pseudo-browsere (browsere uden deres egen motor, men bruger webvisninger), skal du være opmærksom på nogle problemer.

For eksempel bruger Facebook en WebView inde i Android- og iOS-apps til at tilbyde en browsingoplevelse i appen, når brugerne klikker på et link. På Android understøtter de fleste WebViews ikke servicearbejdere og kan ikke installere din PWA, så når brugeren åbner dit indhold fra Facebook, fungerer din PWA som om det er en ikke-kompatibel browser uden cachelagrede filer eller sessionsoplysninger .

Fra iOS 11.3 understøtter WebView servicearbejdere, men det vil være en klon af den samme PWA, som brugeren har brugt i Safari eller endda i andre pseudo-browsere, såsom Chrome eller Firefox på iOS.

Derfor, hvis du gengiver et installationsbanner eller en dialogboks om installationstip, der forklarer værdien af ​​at installere din app, skal du kontrollere, om du er inden for et WebView, fordi brugeren ikke kan følge dine trin. Skjul disse oplysninger, eller opfordre brugeren til at åbne URL'en i standardbrowseren. Dette gælder blandt andet Facebook på Android, Facebook på iOS, Chrome på iOS og Firefox på iOS. At lave en live check, om du er på en WebView eller ikke, er vanskelig, men der er en hjælperedskab til rådighed .

08. Test på Android-enheder og emulatorer

Test af servicearbejdere og Web App Manifest kræver https, med undtagelse af localhost. Mens lokale desktop-test i første omgang er fine, vil vi på et tidspunkt se vores PWA'er i aktion på Android-enheder. Hvordan kan vi gøre det? Adgang til en dev-server fra vores telefon eller Android-emulator fungerer ikke, fordi den ikke er https, og den ikke er lokal vært fra et Android OS-synspunkt.

Løsningen vises med Chrome Developer Tools. Hvis vi går til chrome: // inspicerer og åbner en emulator eller en rigtig enhed med USB-debugging tilsluttet, vil vi være i stand til at aktivere portvideresendelse. Så videresendes http: // localhost på vores Android-enhed til vores værtscomputers localhost eller enhver anden vært. Med dette trick gengiver Android PWA korrekt over en ikke-sikker forbindelse. Husk dog, at mens WebAPK opretter pakken og installerer den, fungerer den muligvis ikke i standalone-tilstand.

09. Udgivelse i butikker

PWA Builder er et Microsoft-onlineværktøj til at oprette butikskompatible PWA-pakker til Windows 10 og andre operativsystemer

PWA Builder er et Microsoft-onlineværktøj til at oprette butikskompatible PWA-pakker til Windows 10 og andre operativsystemer

Mens PWA-tilgangen ikke startede med butikkerne i tankerne, begyndte nogle tilbud, herunder Twitter Lite og Google Maps Go i Play Butik, at servere PWA'er i butikkerne. Hvis dette er noget, du er interesseret i, for at distribuere din PWA uden at pakke den med Cordova, er dine tilgængelige muligheder:

  • Microsoft Store: Du kan oprette en PWA til Windows 10 ved hjælp af det officielle værktøj fra pwabuilder.com
  • Google Play Butik: På tidspunktet for skrivningen giver Trusted Web Aktiviteter, der er tilgængelige på Canary Channel, dig mulighed for at oprette en Android-app, der lige åbner en PWA, du ejer, og distribuerer den i butikken, hvilket skaber en lignende løsning til WebAPK. Du kan lære mere her .
  • Apple App Store: I øjeblikket er der ingen officielle løsninger til distribution af PWA'er, men WKWebView understøtter servicearbejdere fra iOS 11.3, så det vil ikke være svært at oprette en simpel indpakning til en PWA. Spørgsmålet er, vil Apple godkende det i butikken? Apple ønsker ikke løsninger, der kun er websteder med en indpakning på.

Denne artikel blev oprindeligt offentliggjort i nummer 304 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb nummer 304 her eller abonner her .

Relaterede artikler: