Het ontwerpen van native-achtige progressieve web-apps voor iOS

Een van de belangrijkste kenmerken van een Progressive Web App (PWA) is app-gelijkenis. Hoewel uw app technisch wordt uitgevoerd in de webbrowser, moet u ernaar streven om deze er net zo goed uit te laten zien als een native applicatie. Dat houdt in dat het op het startscherm kan worden geïnstalleerd, een aangepast pictogram toevoegen, de adresbalk uitschakelen, enzovoort. In tegenstelling tot Android, waarvoor veel native functies automatisch worden gegenereerd door de Web App Manifest, vereist iOS enkele extra HTML- en CSS-trucs. Hier zijn zeven suggesties om uw PWA native-achtiger te maken op iOS.

1. Maak het zelfstandig

Er zijn twee manieren om uw PWA te laten draaien als een zelfstandige toepassing (dat wil zeggen in een nieuw venster zonder de gebruikersinterface van de webbrowser) op iOS. De eerste manier is om de metatag met Apple-mobile-web-app te gebruiken in het head-element van uw HTML-code met de volgende code.

De tweede manier is om de weergave-eigenschap van uw Web App Manifest op stand-alone te zetten. Een voorbeeld van een Web App Manifest kan er als volgt uitzien.

{
   "name": "Appscope",
   "display": "standalone",
   "pictogrammen": [{
      "src": "icons / icon-192.png",
      "maten": "192x192"},
   {
      "src": "icons / icon-512.png",
      "maten": "512x512"}
   ]
}

2. Voeg een aangepast pictogram toe

Helaas gebruikt iOS niet de pictogrammen die zijn gespecificeerd in de Web App Manifest. Als u in plaats daarvan een aangepast pictogram voor alle pagina's van uw app wilt gebruiken, moet u uw pictogram in PNG-indeling en met de naam apple-touch-icon.png in de hoofdmap van uw PWA opgeven.

Als u een specifiek pictogram voor een enkele pagina van uw app wilt toevoegen, gebruikt u de volgende regel in het head-element van uw HTML-code.

Verschillende iOS-apparaten gebruiken verschillende formaten voor de pictogrammen op het startscherm. Gebruik het kenmerk size van het link-element om een ​​pictogram voor een bepaalde grootte op te geven. Als er geen pictogram is opgegeven voor de aanbevolen pictogramgrootte voor het apparaat, wordt in plaats daarvan het pictogram gebruikt met de kleinste grootte die groter is dan de aanbevolen.

Het volgende voorbeeld, dat formaten voor de meest voorkomende iOS-apparaten specificeert, komt uit de Safari Web Content Guide van Apple.




Bedenk dat iOS ondoorzichtige pictogrammen vereist. Transparante delen van het pictogram worden zwart gekleurd.

3. Voeg een aangepast splash-scherm toe

Splash-scherm voor Appscope

De volgende stap om uw Progressive Web-app meer native-achtig te maken, is het saaie, witte startscherm te vervangen door uw eigen afbeelding. Gebruik het volgende koppelingselement om een ​​aangepast splash-scherm toe te voegen.

Om deze afbeelding weer te geven, is het belangrijk dat de afmetingen dezelfde zijn als die van het apparaat waarop de app wordt uitgevoerd. Als u bijvoorbeeld op een iPhone X wilt werken, moet launch.png de grootte 1125 bij 2436 pixels hebben. Het probleem dat zich hier voordoet, is dat er meerdere iOS-apparaten zijn met verschillende resoluties, en helaas kunnen we deze code niet gewoon meerdere keren herhalen voor afbeeldingen van verschillende formaten. In plaats daarvan moeten we het mediakenmerk gebruiken om aan te geven welke startafbeelding voor welk apparaat is bedoeld.

Voeg de volgende code toe aan het head-element van uw PWA om aangepaste splash-schermen voor de verschillende iOS-apparaten te ondersteunen.










Als u hulp nodig hebt bij het instellen van splash-schermen voor uw PWA, bekijk dan de Splash Screen Generator op Appscope.

4. Wijzig de statusbalk

Statusbalken met instellingen zwart-doorschijnend, zwart en standaard

U kunt ook de iOS-statusbalk (het gebied langs de bovenkant van het scherm met de tijd en batterijstatus) van uw PWA aanpassen. Om dit te doen, moet u de metatag van Apple-mobile-web-app-status-bar-stijl gebruiken in het head-element van uw code.

Helaas is het aantal manieren om de statusbalk aan te passen vrij beperkt, maar Apple biedt drie verschillende instellingen voor het inhoudsattribuut.

  • standaard resulteert in een witte statusbalk met zwarte tekst en symbolen.
  • zwart resulteert in een zwarte statusbalk en zwarte tekst en symbolen, waardoor het geheel zwart lijkt. Als u de metatag van de statusbalk niet gebruikt, ziet deze er zo uit.
  • zwart-doorschijnend resulteert in witte tekst en symbolen, en de statusbalk krijgt dezelfde achtergrondkleur als het body-element van uw web-app.

5. Geef het een korte naam

De titel van uw PWA wordt onder het startpictogram op het startscherm weergegeven. Om afkapping te voorkomen, mag deze titel niet langer zijn dan 12 tekens, hoewel het uiteindelijk neerkomt op de breedte van de gebruikte tekens (de letter w is bijvoorbeeld breder dan de letter i.) Als de oorspronkelijke naam van uw PWA niet past onder het pictogram, kunt u een korte versie van de naam toewijzen.

Een manier om een ​​korte naam voor uw PWA op te geven, is door de metatag apple-mobile-web-app-title te gebruiken met de volgende regel in het head-element van uw code.

Een andere manier is om de eigenschap short_name te gebruiken in uw Web App Manifest. Een voorbeeld van een Web App Manifest kan er als volgt uitzien.

{
   "name": "Little Alchemy 2",
   "short_name": "Alchemy 2",
   "pictogrammen": [{
      "src": "/public/icons/icon-192x192.png",
      "maten": "192x192"},
    {
      "src": "/public/icons/icon-512x512.png",
      "maten": "512x512"}
   ]
}

6. Schakel selectie, markeren en toelichtingen uit

Standaard voegt de iOS-webbrowser bepaalde interactieve effecten toe voor teksten en links die native applicaties niet hebben. Om uw PWA meer native-achtig te laten lijken - en minder als een website of document - kunt u deze effecten uitschakelen (of op zijn minst gedeeltelijk uitschakelen). De volgende paragrafen richten zich op de drie meest voorkomende soorten effecten.

6.1 Tekstselectie uitschakelen

Tekstselectie op New York Times

Net zoals de meeste native iOS-toepassingen geen tekstselectie toestaan, kunt u deze functie in uw PWA uitschakelen. Stel hiertoe de eigenschap -webkit-user-select CSS in op none voor de elementen die u niet selecteerbaar wilt maken. Om de tekstselectie volledig uit te schakelen, wijst u de eigenschap toe aan uw hoofdelement.

lichaam {
   -webkit-user-select: geen;
}

6.2 Markering uitschakelen

Markering van links op New York Times

Wanneer u op een koppeling in de iOS-webbrowser tikt, verschijnt een grijs vak rond het element. Hoewel er geen eenvoudige manier is om dit effect uit te schakelen, kunt u de markeerkleur transparant maken en deze dus effectief laten verdwijnen. Om dit voor uw PWA te doen, stelt u de eigenschap -webkit-tap-highlight-color in op transparant voor de gewenste elementen (of wijst u deze toe aan het body-element om linkmarkering voor alle elementen uit te schakelen.)

lichaam {
   -webkit-tik-markeer-kleur: transparant;
}

6.3 Callouts uitschakelen

Link callout op New York Times

Als u op een element in de iOS-browser tikt en dit vasthoudt, wordt een callout-menu geopend (zoals hierboven). Om dit effect op iOS uit te schakelen, stelt u de eigenschap -webkit-touch-callout in op none voor de gewenste elementen. Nogmaals, om het effect voor alle elementen uit te schakelen, wijst u de eigenschap toe aan uw lichaamselement.

lichaam {
   -webkit-touch-callout: geen;
}

7. Schakel tikeffecten in

Tikeffect (: actief) op Little Alchemy 2

In plaats van de standaard grijze markering te gebruiken bij het tikken op een link, kunt u uw eigen effecten op de tik toevoegen. Door het ontouchstart-attribuut op te nemen in de body-tag van uw code en de waarde ervan leeg te houden, zullen links en andere elementen hun: hover en: actieve effecten weergeven wanneer u erop tikt. Gebruik de volgende code en speel met verschillende: hover en: actieve stijlen om de effecten te vinden die het beste werken voor uw PWA.


   
      ...
   
   
      ...
   

Appscope is de toonaangevende directory voor progressieve web-apps en biedt een verzameling van de beste web-gebaseerde applicaties die compatibel zijn met alle apparaten.