Vad Progressive Web Apps Àr och hur man installerar och anvÀnder dem pÄ iPhone och iPad

Starbucks has one of the best progressive web apps on the market

Tack vare modern webbteknik som HTML5, kör Progressive Web Apps i en webblÀsare, krÀver ingen separat distribution, kombinerar funktioner i inbyggda appar med fördelarna med en mobilupplevelse och lÄter dig hÄlla dem pÄ startskÀrmen utan besvÀret med en app Lagra.
Tricket med Progressive Web Apps (PWA) Àr i deras utseende: för anvÀndaren ser de ut som alla traditionella inbyggda appar med inte alltför olika interaktions- och navigationsmodeller.

PWA erbjuder vanligtvis en webbplats lÀttviktsversion med vissa utökade funktioner.

Med Safari pÄ iOS 11.3 och macOS 10.13.4 senare kan du dra nytta av PWA. PWA pÄ iOS-plattformen krÀver HTML5-funktioner som Web App Manifest-specifikationen och servicearbetare sÄ att de kan anvÀnda viktiga bakgrundsskript.

Mobil webbutvecklare Maximiliano Firtman har en detaljerad översikt av PWA och deras stöd i Safari över Apples plattformar, om du Àr intresserad.

Hur man installerar Progressive Web Apps pÄ iPhone

Du kan öppna en PWA pĂ„ din iPhone, iPad eller iPod touch med iOS 11.3 genom att helt enkelt besöka dess URL i Safari. TĂ€nk pĂ„ att mobil Safari inte startar PWA-enheter ordentligt om du inte aktiverar det Servicearbetare under Experimentella WebKit-funktioner i InstĂ€llningar → Safari (faktiskt aktivera alla experimentella funktioner i Safari).

För att placera en PWA-genvÀg pÄ din startskÀrm gör du följande:

1) Tryck pÄ Dela med sig -knappen i Safari för den PWA du anvÀnder.

2) Tryck pÄ ikonen mÀrkt LÀgg till pÄ hemskÀrmen.

3) Knacka LÀgg till i det övre högra hörnet.

4) Nu namnge din PWA sÄ att den kan sÀrskiljas frÄn sin ursprungliga motsvarighet pÄ hemskÀrmen och i Sök, tryck sedan pÄ LÀgg till i det övre högra hörnet.

Du kan nu starta PWA frÄn din startskÀrm genom att trycka pÄ dess ikon.

Namnge dina progressiva webbappar nÀr du lÀgger till dem pÄ startskÀrmen

Observera att webblĂ€sare frĂ„n tredje part som Ă€r tillgĂ€ngliga i App Store (inklusive Chrome, Firefox, Brave och Edge) inte har tillĂ„telse att “installera” PWA och vissa av dem stöder inte servicearbetare.

Progressiva genvÀgar för webbappar pÄ skÀrmen Hone kan raderas precis som inbyggda appar

PĂ„ grund av Apples begrĂ€nsningar startar en PWA i Safari. PWA: er kan raderas pĂ„ samma sĂ€tt som alla inbyggda appar tas bort frĂ„n startskĂ€rmen: tryck och hĂ„ll ned tills ikonerna börjar jiggla som om de dansar och tryck sedan pĂ„ det lilla “x” i ikonens övre vĂ€nstra hörn.

AnvÀnd Safaris delningsmeny för att lÀgga till en progressiv webbapp pÄ din startskÀrm

Slutligen bekrÀfta ÄtgÀrden genom att knacka pÄ Radera knapp.

Kolla in dessa Progressive Web Apps

Eftersom PWAs inte distribueras via Apps Store och inte krÀver nÄgon form av förpackning eller specialdistribution Àr det viktigt att veta PWA: s URL.

För att prova PWA i helskÀrm, lÀgg till dessa pÄ din startskÀrm:

Eller kolla in andra PWA för din inspiration.

Var noga med att trycka manuellt pÄ en lÀnk med en iPhone eller iPad med iOS 11.3 eller senare. Besök, sÀg, Twitter.com i Safari eller följa en lÀnk i Googles sökresultat kan istÀllet ladda en webbplats mobilversion snarare Àn PWA.

Om du inte anvÀnder en PWA pÄ nÄgra veckor eller sÄ kommer iOS att försöka frigöra lagring som tas upp av filerna. Om det hÀnder kommer ikonen att förbli pÄ din startskÀrm men PWA laddas ner igen nÀr den startas eftersom iOS inte lÀngre har den i cachen.

Fördelar med progressiva webbappar

PWA kan köras i offline-lÀge och ser nÀstan oskiljbara ut frÄn inbyggda appar. SkÀrmdumpens övre del av inlÀgget visar en offline-kompatibel PWA som kör fullskÀrm pÄ en iPad.

En skÀrmdump som jÀmför Twitters inbyggda och progressiva webbappar

FörmÄgan hos PWA pÄ iOS inkluderar följande:

Och eftersom PWA kan vara vĂ€rd var som helst, kan deras skapare kringgĂ„ App Store och kunder kan “installera” dem utan Apples godkĂ€nnande, direkt frĂ„n Safari-webblĂ€saren (detta kan vara ett tveeggat svĂ€rd eftersom inga PWA har nĂ„gonsin passerat nĂ„gon App Store-kvalitet testa).

Det bÀsta med PWA Àr att de liknar inbyggda appar och startar i en Safari-helskÀrmsprocess utan krom. PWAs visas i appomkopplaren och Dock pÄ din iPad som en vanlig inbyggd app frÄn App Store.

Progressiva webbappar kan ha anpassade ikoner

Ibland har en inbyggd app och dess PWA-motsvarighet samma ikon

BegrÀnsningar av progressiva webbappar pÄ iOS

PWA Àr fortfarande i ett mycket framvÀxande skede och Apples implementering Àr inte heller toppklass. För att illustrera min poÀng, hÀr Àr de problem och hinder du kan stöta pÄ nÀr du anvÀnder PWA: er:

Ingen Siri-integration Ă€r en besvikelse, sĂ€rskilt i samband med iOS 12s genvĂ€gsfunktion. Även om det finns en ikon för en PWA pĂ„ din startskĂ€rm Ă€r Siri omedveten om det och kan inte bli ombedd att starta appen för dina rĂ€kning.

Det största problemet Àr att PWA inte lagrar tillstÄnd mellan sessioner. Utan ett korrekt sparat tillstÄnd kan en anvÀndare som kommer ut ur en PWA troligtvis se den startas om nÀr han kommer tillbaka.

Detta gör vanliga PWA-funktioner som att be anvÀndaren att validera en e-postadress eller utföra en tvÄfaktorautentisering via SMS som inte stöds pÄ iOS. Utöver det öppnar mÄnga OAuth-baserade inloggnings omdirigeringar en annan Safari-instans och kommer aldrig tillbaka till PWA.

En skÀrmdump som jÀmför Ubers inhemska och progressiva webbappar

Ännu en frĂ„ga som Ă€r vĂ€rt att nĂ€mna: PWAs kommer inte att köras i bakgrunden, vilket förhindrar att mĂ„nga multimediafokuserade PWAs strömmar eller spelar upp ljud i bakgrunden. Beroende pĂ„ din version av iOS kanske du mĂ€rker andra konstiga beteenden och buggar med PWA, som att ladda om nĂ€r du byter app.

NÄgra av de ovannÀmnda begrÀnsningarna kommer sannolikt att ordnas nÀr webbplattformen har kommit in pÄ rena inbyggda funktioner, till exempel Face ID-skanning eller förstÀrkt verklighet via ARKit.

Progressiva webbappar ≠ inbyggda appar

HÀr Àr lite PWA-historia.

Efter att den ursprungliga iPhone debuterade 2007, tog entusiaster jailbreaking. Den första App Store med inbyggda tredjepartsappar anlÀnde inte förrÀn Äret efter, sÄ Steve föreslog utvecklare att omfamna webbappar eftersom Safari pÄ iPhone hade krÀvt stöd.

Spola fram till idag och nu har vi Progressive Web Apps (tack, Steve!).

Vissa progressiva webbappar har ett annat namn Àn deras ursprungliga motsvarighet

Naturligtvis, Google har helt tagit emot PWA och vem ska verkligen skylla pÄ dem? NÀr allt kommer omkring Àr webbaserat innehÄll mycket lÀttare att genomsöka och indexera Àn innehÄll i appen.

PWA pĂ„ iOS – inte redo för bĂ€sta tid Ă€nnu

Det finns inga tvÄ sÀtt om det, PWA pÄ iOS-plattformen Àr helt enkelt inte redo för bÀsta tid Ànnu, speciellt om du tar hÀnsyn till begrÀnsningar som inte finns pÄ Android.

Eftersom det inte finns nÄgra uppmaningar eller inbjudningar frÄn Safari, mÄste anvÀndaren upptÀcka en PWA och besöka dess URL i Safari, klicka sedan pÄ ikonen Dela och vÀlj ÄtgÀrden LÀgg till pÄ startskÀrmen.

Starbucks har en av de bÀsta progressiva webbapparna pÄ marknaden

Det Àr för mycket arbete, sÀrskilt utan en indikation pÄ att en webbplats du besöker Àr en PWA.

Som jÀmförelse Àr det mycket lÀttare att trycka pÄ appbannrar högst upp pÄ en webbplats och hÀmta sin inbyggda app frÄn App Store. Tills Apple fördubblar PWA-stöd, vilket jag tvivlar pÄ att de kommer att göra med App Store-pengarna, kommer det att bli lite engagemang frÄn iPhone-anvÀndare.

Enkelt uttryckt erbjuder PWA pÄ iOS för nÀrvarande dÄligt affÀrsvÀrde jÀmfört med inbyggda appar.

Sammanfattningsvis

Konsekvenserna av PWAs för iOS-anvÀndare Àr inte uppenbara eftersom Apple inte precis gör det uppenbart hur man anvÀnder dem. Det tar inte ett geni att rÀkna ut att Apple hellre vill att du laddar ner inbyggda appar frÄn App Store. Att PWA pÄ iOS har mer begrÀnsade funktioner pÄ grund av Apples sandboxmiljö Àn pÄ Android hjÀlper inte heller.

Och pÄ grund av allt detta tar PWA antagligen inte över inbyggda appar nÀr som helst snart.

Om du Àr missnöjd med det aktuella lÀget nÀr det gÀller iOSs stöd för PWA, Àr du alltid vÀlkommen att skicka filförbÀttringsförfrÄgningar pÄ bugreport.apple.com.

Analys?

Om du gillar den hÀr instruktionen, skicka den vidare till dina supportmedlemmar och lÀmna en kommentar nedan.

Fastnade? Är du inte sĂ€ker pĂ„ hur du gör vissa saker pĂ„ din Apple-enhet? LĂ„t oss veta via [email protected] och en framtida handledning kan ge en lösning.

Skicka in dina egna instruktionsförslag via [email protected].