Web App Manifests zijn in principe JSON documenten die opstartparameters en toepassingsstandaards bevatten voor wanneer een webapplicatie wordt gestart. Ze geven informatie over een toepassing.

Verder bieden Web App Manifests ontwikkelaars een gecentraliseerde plaats voor metadata die aan een webapplicatie zijn gekoppeld, zoals de naam, de auteur, het pictogram en de beschrijving. Het kan ook de voorkeurs-URL bevatten die moet worden geopend wanneer een gebruiker de webapplicatie opstart. Met het manifest kunnen ontwikkelaars verder een standaardoriëntatie voor hun webtoepassing opgeven, en de weergavemodus voor de toepassing instellen (bijvoorbeeld op volledig scherm).

Voor de meer geavanceerde gebruikers kan een ontwikkelaar met het manifest zelfs een webtoepassing tot een URL "uitbreiden". Dit beperkt de URL's waarop het manifest wordt toegepast en biedt de mogelijkheid om vanuit andere toepassingen naar een webtoepassing te "deeplinken".

Met het Web App Manifest kan een website worden geïnstalleerd op het startscherm van een apparaat, waardoor gebruikers snel toegang krijgen en een rijke, native app-achtige ervaring krijgen.

Dus in het kort: met Web App Manifests kunt u uw website de mogelijkheid geven om op het Homescreen van een gebruiker geplaatst te worden. Deze zal zich dan gedragen als een native app na installatie op het Homescreen. Het is geen snelkoppeling naar uw website, want het zal de browser niet openen!

Web App Manifests voorbeelden

Web App Manifests hoeven geen ingewikkelde stukken code te zijn. Je kunt heel eenvoudig beginnen door alleen basisinformatie toe te voegen, bijvoorbeeld:

{ "name": "My Shop App", "description": "This app helps you shop your favorite brand.", "icons": [ { "src": "images/icon.png", "type": "image/png", "sizes": "192x192" } ] }

De velden die nodig zijn voor volledige "Toevoegen aan beginscherm" zijn echter de volgende:

- background_color: Specificeert een achtergrondkleur die moet worden gebruikt in sommige app-contexten. De meest relevante voor Toevoegen aan startscherm is het splash-scherm dat wordt weergegeven wanneer het app-pictogram op het startscherm wordt aangetikt en het voor het eerst begint te laden (dit verschijnt momenteel alleen wanneer apps zijn toegevoegd aan het startscherm door Chrome).

- weergave: Specificeert hoe de app moet worden weergegeven. Om het aan te laten voelen als een aparte app (en niet gewoon een webpagina), moet u een waarde kiezen, zoals fullscreen (er wordt helemaal geen UI getoond) of standalone. Beide lijken erg op elkaar, maar met standalone kunnen UI-elementen op systeemniveau, zoals de statusbalk, zichtbaar zijn.

- pictogrammen: Specificeert pictogrammen voor de browser om te gebruiken wanneer de app op verschillende plaatsen wordt weergegeven. Bijvoorbeeld op de taakwisselaar, of nog belangrijker, op het beginscherm. In onze demo hebben we er slechts één opgenomen, maar er kunnen er veel meer zijn.

- name/short_name: Deze velden geven een app-naam die moet worden weergegeven wanneer de app op verschillende plaatsen wordt weergegeven. Name geeft de volledige naam van de app en short_name geeft een verkorte naam die wordt gebruikt wanneer er onvoldoende ruimte is om de volledige naam weer te geven. U wordt geadviseerd beide velden op te geven als de naam van uw app bijzonder lang is.

- start_url: Geeft een pad naar het asset dat moet worden geladen wanneer de aan het Homescreen toegevoegde app wordt gestart. Merk op dat dit een relatieve URL moet zijn die verwijst naar de site-index, ten opzichte van de url van het manifest. Merk ook op dat Chrome dit vereist voordat het de installatiebanner toont, terwijl Firefox dit niet vereist voor het tonen van het home-met-een-plus-pictogram.

Het meer typische Web App Manifest ziet er dan ongeveer zo uit:

{ "short_name": "Shop", "name": "My Shop App", "description": "This app helps you shop your favorite brand.", "icons": [ { "src": "images/icon.png", "type": "image/png", "sizes": "192x192" } ], "start_url": "/my-shop/", "background_color": "#FFFFFF", "theme_color": "#FFFFFF", "display": "standalone" } 

Passend pictogram

Zoals te zien is in de bovenstaande manifest listing, voegen we een 192 x 192 px icoon toe voor gebruik in onze app. U kunt meer maten opnemen als u dat wilt. Android zal de meest geschikte grootte kiezen voor elk verschillend gebruik.

U kunt ook besluiten om verschillende soorten pictogrammen op te nemen, zodat apparaten het pictogram kunnen gebruiken dat het beste bij hen past (Chrome ondersteunt bijvoorbeeld al het WebP-formaat).

Merk op dat het typelid in het object van elk icoontje het mime-type van het icoontje specificeert. Zo kan de browser snel lezen welk type het icoontje is, het negeren en naar een ander icoontje gaan als het dat niet ondersteunt.

Wat betreft het ontwerp van het pictogram, moet u dezelfde best practices volgen die u zou volgen voor elk Android-pictogram (zie de richtlijnen voor Android-pictogramontwerp).

Koppel de HTML aan het Web App Manifest

Om het opstellen van je manifest te voltooien, moet je ernaar verwijzen in de HTML van de startpagina van je applicatie:

<link rel="manifest" href="manifest.webmanifest">

Browsers die "Toevoegen aan Homescreen" ondersteunen, zullen weten waar ze uw manifest moeten zoeken zodra dit er is.

Spatschermen

In Chrome 47 en later wordt een splash screen weergegeven voor sites die worden gestart vanaf een startscherm. Dit splash-scherm wordt automatisch gegenereerd op basis van eigenschappen in het Web App Manifest, met name:

naam

achtergrondkleur

Het pictogram in de pictogrammenreeks dat het dichtst bij 128dpi ligt voor het apparaat.

Installeerbare webtoepassingen

Wat we uiteindelijk allemaal willen, is samen met onze website verschijnen op het startscherm van de gebruiker. We willen niet alleen een bladwijzer zijn, een korte link naar een website, maar we willen de gebruiker de volledige 'native app-ervaring' bieden.

Technisch betekent dit dat "een user agent een webtoepassing installeert waarbij de user agent de eindgebruiker een middel verschaft om een nieuwe top-level browsercontext te instantiëren waarop de leden van het manifest worden toegepast.Dat wilzeggen dat de leden van het manifest, of hun standaardwaarden, van kracht zijn in de bovenste browsecontext."

Door bij de installatie de juiste informatie te verstrekken, zal het apparaat een geïnstalleerde webtoepassing onderscheiden van een traditionele bladwijzer en de volledige native app-ervaring bieden. Dit betekent dat een webapplicatie kan worden gepresenteerd en gestart op een manier die voor de eindgebruiker niet te onderscheiden is van native applicaties. Bijvoorbeeld als een gelabeld pictogram op het startscherm, de launcher of het startmenu.

Bij het opstarten wordt het manifest door het apparaat van de gebruiker toegepast op de bovenste browsecontext voordat de start-URL wordt geladen. Dit geeft de gebruikersagent de gelegenheid om de relevante waarden van het manifest toe te passen, en eventueel de weergavestand en de schermoriëntatie van de webtoepassing te wijzigen. Als alternatief, en opnieuw als voorbeeld, zou de gebruikersagent de webtoepassing kunnen installeren in een lijst van bladwijzers in de gebruikersagent zelf.