Add To Home Screen (A2HS).

Vanaf Angular 6 verloopt A2HS volledig automatisch. In principe is deze optie vooral bedoeld voor mobiele devices, maar je kan dit evenzeer testen in de webbrowser van de PC/laptop.

Om een website als web-app te "installeren" verwacht de browser dat je wel aan enkele criteria voldoet. Verder zijn er ook nog kleine verschillen tussen de verschillende browsers en op verschillende platformen. Wij werken hoofdzakelijk met Chrome en daar gaan we ons dan ook op concentreren.

Een handig overzicht vind je op de Google developer pagina. De criteria voor Chrome (mobile) zijn:

• De web-app is nog niet geïnstalleerd.
• De service worker heeft een fetch-eventhandler.
• manifest.json bevat een naam, een 192px en een 512px icoon, een start URL en een display-waarde.
• De website wordt secure (via https) gehost.
  Via localhost kan het ook (lokaal debuggen).
• De gebruiker moet minstens 30sec op de site vertoeven.

Zijn aan al deze voorwaarden voldaan, dan kan je de site als web-app installeren. Afhankelijk van de configuratie in je app, zal Chrome zelf een pop-up tonen of er verschijnt binnen de site een link waarmee je de app kan installeren.

Voor we onze eigen app aanpassen, gaan we best enkele online website bekijken en installeren. Even Googelen en je vindt tal van sites die volledig PWA en A2HS ondersteunen. Enkele voorbeelden:
Nase, Twitter mobile, Trivago, Hacker News Reader, Pwa Rocks, ...

Open één van bovenstaande sites en kijk wat er gebeurt op je smartphone en op je laptop. Ziehier het voorbeeld van Trivago.

A2HS op Chrome voor Android

Zodra aan alle voorwaarden voldaan zijn, verschijnt binnen het browservenster een melding dat je de site kan toevoegen aan het startscherm. Klik vervolgens op Toevoegen. De site verschijnt even later als opstart-icoon tussen alle andere native applicaties. Klik je op Annuleren, dan hoef je geen drie maanden te wachten om alsnog te installeren. Klik, bovenaan links, op het menu-icoon ( ⋮ ) en kies Toevoegen aan startscherm.

Een web-app verwijderen doe je op dezelfde manier zoals native apps verwijderen.

A2HS op Chrome voor desktop/laptop

• Open een nieuw tabblad in Chrome en ga naar chrome://flags.
• Sluit alle overige tabbladen.
• Enable Bypass user engagement checks en Desktop PWAs.
  
  
• Herstart Chrome.

Open nu https://www.trivago.be/.
Je kan een web-app op drie manieren installeren.

1. Via de banner binnen de site. (indien aanwezig)
   Afhankelijk van hoe de site is opgebouwd, krijg je soms wel, maar soms ook niet, een banner of link binnen de site te zien. De installatie gebeurt dan analoog met de installatie op een mobiel toestel.
2. Via de console. (eenmalig)
   Open de console, klik op het tabblad Application en vervolgens op Manifest. Hier zie je een link Add to homescreen. Let op: deze link kan je maar eenmaal gebruiken. Daarna moet je opnieuw drie maanden wachten voor deze link terug werkt.
   
   
3. Via het Chrome-menu ( ⋮ ) (werkt altijd)
   Hier zie je een link <appname> Installeren. In tegenstelling tot de eerste twee methodes, werkt deze methode altijd, zelfs nadat je de app terug verwijderd hebt. Let op: het kan soms wel enkele minuten duren voordat de link in het menu zichtbaar wordt.
   
   

Op je bureaublad verschijnt een snelkoppeling naar de app. Als je hierop klikt, opent de app in een eigen (browser)venster.

Om de app te verwijderen, volstaat het NIET om deze snelkoppeling te verwijderen. De app zelf blijft namelijk geïnstalleerd!

• Open een nieuw tabblad in Chrome en ga naar chrome://apps.
• Rechts-klik op de app en kies Verwijderen uit Chrome uit het snelmenu.
  
  

Persoonlijke site optimaliseren

Nu we weten hoe de installatie op verschillende toestellen verloopt, kunnen we onze eigen toepassing verder personaliseren en zowel mobiel, als in een browser installeren.
Eerst gaan we onze icoontjes updaten. Daarna de configuratie aanpassen en vervolgens onze lokale copy testen in de browser.
Als alles naar wens verloopt kan je de site uploaden naar de hosting en mobiel testen.

Nieuwe web-icons genereren

Binnen de map src/assets/icons staan de acht icoontjes die de app gebruikt. Je kan deze via een node-script snel vervangen.

• Installeer ngx-pwa-icons globaal.
• Maak een nieuw (transparant) png-icoon van minimaal 512px op 512px. (Of download dit voorbeeld-icoon)
• Noem het icoon icon.png en plaats dit in de ROOT van het project.
• Open een nieuw terminal venster en voer volgend commando uit om de originele icoontjes te overschrijven:
  

  $ ngx-pwa-icons

Manifest.json aanpassen

• Open src/manifest.json en pas enkele eigenschappen aan. Wat elke eigenschap betekent, wordt hier verduidelijkt.
• Bijvoorbeeld:
  

Homepage aanpassen

Het head-gedeelte van de indexpagina is op dit moment nog vrij beperkt. Afhankelijk van de browser en het platform waarmee je de site bekijkt, voeg je best nog enkele meta-tags toe. Gelukkig hoef je dit niet allemaal te onthouden. Er bestaat namelijk een script dat voor ons alle info die een browser/platform nodig heeft, automatisch binnen de head-tag injecteert.
Je kan zelf een aantal meta-tags, die nu op de index-pagina staan, verwijderen. Het script zal deze tijdens het laden van de pagina automatisch terug toevoegen.

Meer info op: PWACompat: the Web App Manifest for all browsers

• Open src/index.html.
• Verwijder het favicon en de meta-tag theme-color.
• Voeg NET ACHTER de manifest-file het PWACompat-script toe.
• Ziehier het resultaat:
  

Installatiebanner toevoegen

Sinds Chrome 68 is de automatisch geïntegreerde "Add to Home Screen" banner verdwenen. Vanaf nu heeft de programmeur alles zelf in handen. De eerste maal dat een gebruiker de site bezoekt, wordt het beforeinstallprompt-event getriggerd. Dit event kunnen we dus makkelijk detecteren en vervolgens een eigen banner in onze applicatie tonen/verbergen.

Meer info vind je hier: App install banners

De code die we in ons project verwerken, komt grotendeels uit deze site, maar dan omgevormd naar Angular.

Open src/app/app.component.html en voeg onderaan een footer toe.

• De variabele showBanner (lijn 1) bepaalt of de footer al dan niet zichtbaar is.
• Het klik-event op de button (lijn 2) activeert de functie addToHomescreen(). Deze functie zal de ingebouwde installatie-prompt van Chrome openen.
  Hier kan de gebruiker dan aangeven of hij de app al dan niet wil installeren.

Open src/app/app.component.ts en voeg volgende code toe:

• De variabele showBanner bepaalt of de banner bij de opstart al dan niet zichtbaar wordt.
• De variabele deferredPrompt bevat het event zelf. Dit hebben we nodig om de banner te openen en de keuze van de gebruiker te verwerken.
• De eventlistener beforeinstallprompt (lijn 12) wordt enkel actief indien de gebruiker nog NIET op de banner geklikt heeft. Als het event actief wordt, zet je showBanner op true.
  Klikt de gebruiker op de banner en annuleert hij daarna de installatie, dan komt dit event pas na drie maanden terug actief.
  (Omdat wij de optie Bypass user engagement checks geactiveerd hebben, zal de wachttijd omzeild worden, en komt de banner bij een volgende reload al terug tevoorschijn.)
• De functie addToHomeschreen() opent de ingebouwde installatie-prompt (lijn 25). Merk op dat we, afhankelijk van de keuze, enkel wat tekst wegschrijven naar de console. De installatie zelf, gebeurt volledig in de achtergrond. Daar hoef je zelf geen extra code voor te schrijven.

App lokaal testen

• Maak een nieuwe productie-build en test de installatie in Chrome.
  

  $ ng build --prod
  $ http-server -c-1 dist/projectTMK

• Upload de site en test de online versie.
  

  $ firebase deploy