Gebruik het paneel Toepassing om web-app-manifesten, servicemedewerkers en caches van servicemedewerkers te inspecteren, wijzigen en fouten op te sporen.
Progressive Web Apps (PWA's) zijn moderne, hoogwaardige applicaties die zijn gebouwd met behulp van webtechnologie. PWA's bieden vergelijkbare mogelijkheden als iOS-, Android- en desktop-apps. Zij zijn:
- Betrouwbaar, zelfs in onstabiele netwerkomstandigheden.
- Installeerbaar om oppervlakken van besturingssystemen te starten, zoals de map Programma's op Mac OS X, het Start- menu op Windows en het startscherm op Android en iOS.
- Verschijnt in activiteitenwisselaars, apparaatzoekmachines zoals Spotlight en in werkbladen voor het delen van inhoud.
In deze handleiding worden alleen de Progressive Web App-functies van het Applicatiepaneel besproken. Als u hulp zoekt bij de andere vensters, raadpleeg dan het laatste gedeelte van deze handleiding, Gidsen van het paneel Andere toepassingen .
Samenvatting
- Gebruik het tabblad Manifest om uw web-app-manifest te inspecteren.
- Gebruik het tabblad Servicemedewerkers voor een hele reeks taken die met servicemedewerkers te maken hebben, zoals het afmelden of bijwerken van een service, het emuleren van pushgebeurtenissen, offline gaan of het stoppen van een servicemedewerker.
- Bekijk de cache van uw servicemedewerker op het tabblad Cacheopslag .
- Maak de registratie van een servicemedewerker ongedaan en wis alle opslagruimte en caches met één klik op de knop Opslag wissen.
Web-app-manifest
Als u wilt dat uw gebruikers uw app kunnen toevoegen aan de map Programma's op Mac OS X, het Start- menu op Windows en het startscherm op Android en iOS, heeft u een webapp-manifest nodig. Het manifest definieert hoe de app op het startscherm verschijnt, waar de gebruiker naartoe moet worden geleid bij het starten vanaf het startscherm en hoe de app eruit ziet bij het opstarten.
Zodra u uw manifest heeft ingesteld, kunt u het tabblad Manifest van het paneel Toepassing gebruiken om het te inspecteren.
- Als u de bron van het manifest wilt bekijken, klikt u op de link onder het app- manifestlabel (
manifest.webmanifestin de schermafbeelding hierboven). - In de secties Identiteit en Presentatie worden velden uit de manifestbron op een gebruiksvriendelijkere manier weergegeven.
- In het gedeelte Protocolhandlers kunt u met één klik op de knop de URL-protocolhandlerregistratie van uw PWA testen. Zie Registratie van URL-protocolhandler testen voor meer informatie.
- In het gedeelte Pictogrammen wordt elk pictogram weergegeven dat u hebt opgegeven en kunt u de maskers ervan controleren.
- De reeks secties Snelkoppeling #N geeft informatie weer over al uw snelkoppelingsobjecten.
- In de sectie Screenshot #N worden de schermafbeeldingen weergegeven voor een rijkere installatie-UI van uw app.
Als DevTools een fout tegenkomt, zoals een pictogram dat niet kan worden geladen, wordt op het tabblad Manifest bovendien een sectie Installeerbaarheid weergegeven waarin de fout wordt beschreven.
Bekijk en controleer maskeerbare pictogrammen
In het gedeelte Pictogrammen van het tabblad Manifest worden alle pictogrammen van uw toepassing weergegeven. In dit gedeelte kunt u ook veilige gebieden controleren op maskeerbare pictogrammen , het formaat van pictogrammen die zich aanpassen aan platforms.
Als u de pictogrammen zo wilt inkorten dat alleen het minimale veilige gebied zichtbaar is, vinkt u dit aan 
Toon alleen het minimaal veilige gebied voor maskeerbare pictogrammen .
Als uw volledige logo zichtbaar is in het veilige gebied, bent u klaar om te gaan.
Trigger-installatie
Chrome maakt het voor u mogelijk om de installatie van uw PWA rechtstreeks binnen de gebruikersinterface in te schakelen en te promoten. Leer hoe u uw eigen in-app-installatie-ervaring kunt bieden .
Om de installatiestroom van uw PWA te activeren:
- Open de landingspagina van de PWA in Chrome.
Klik rechts in de adresbalk bovenaan op
Installeer . 
Volg de instructies op het scherm.
De functie App installeren kan de workflow voor mobiele apparaten niet simuleren. Merk op hoe de Chrome-desktopbrowser de installatieknop in de adresbalk weergeeft, ook al staat DevTools in Apparaatmodus . Als u uw app echter met succes aan uw desktop kunt toevoegen, werkt deze ook voor mobiel.
Als u de echte mobiele ervaring wilt testen, kunt u een echt mobiel apparaat verbinden met DevTools via foutopsporing op afstand . Om de installatie op het verbonden mobiele apparaat te activeren, opent u de 
menu met drie stippen en klik 
Installeer app .
Inspecteer snelkoppelingen
Met app-snelkoppelingen kunt u snel toegang bieden tot een handvol veelvoorkomende acties die gebruikers vaak nodig hebben.
Om de snelkoppelingen te inspecteren die u in uw manifestbestand hebt gedefinieerd, bladert u naar de secties Snelkoppeling #N van het tabblad Manifest .
Bekijk schermafbeeldingen voor een rijkere installatie-UI
Wanneer u een beschrijving en een reeks schermafbeeldingen aan uw manifestbestand toevoegt, krijgt uw app een rijker installatiedialoogvenster.
Om de schermafbeeldingen te bekijken, scrollt u naar de secties Screenshot #N van het tabblad Manifest .
Test de registratie van de URL-protocolhandler
PWA's kunnen koppelingen verwerken die een specifiek protocol gebruiken voor een meer geïntegreerde ervaring. Zie URL-protocolhandlerregistratie voor PWA's voor meer informatie over het maken van een handler.
Om uw handler te testen:
- Open DevTools op de landingspagina van uw PWA. Bekijk bijvoorbeeld deze demo PWA .
- Installeer vanaf de demopagina de PWA en laad de app opnieuw na de installatie. De browser heeft de PWA nu geregistreerd als handler voor het
web+coffee-protocol. - Voer in de sectie Toepassing > Manifest > Protocolhandler de URL in die u door de handler wilt laten testen en klik op Testprotocol .
In dit voorbeeld kan de handler americano,chaienlatte-macchiatoverwerken. - Wanneer Chrome u vraagt of de app kan worden geopend, bevestigt u dit door op Open Protocol Handler te klikken.
- Geef in het volgende dialoogvenster de app toestemming om
web+coffeete verwerken.
Als de behandelaar de link succesvol verwerkt, zie je in de app een afbeelding van een geopend koffiekopje.
Servicemedewerkers
Servicemedewerkers vormen een fundamentele technologie in het toekomstige webplatform. Het zijn scripts die de browser op de achtergrond uitvoert, los van een webpagina. Met deze scripts krijgt u toegang tot functies waarvoor geen webpagina of gebruikersinteractie nodig is, zoals pushmeldingen, synchronisatie op de achtergrond en offline ervaringen.
Gerelateerde gidsen:
Het tabblad Servicewerkers in het paneel Applicaties is de belangrijkste plaats in DevTools voor het inspecteren en debuggen van servicemedewerkers.
- Als er een servicemedewerker is geïnstalleerd op de momenteel geopende pagina, ziet u deze op dit tabblad staan. In de bovenstaande schermafbeelding is bijvoorbeeld een servicemedewerker geïnstalleerd voor het bereik van
https://airhorner.com/. - De
Het selectievakje Offline zet DevTools in de offlinemodus. Dit komt overeen met de offlinemodus die beschikbaar is via het netwerkpaneel , of de optie Go offlinein het Commandomenu . - De
Het selectievakje Update bij opnieuw laden dwingt de servicemedewerker om bij elke geladen pagina een update uit te voeren. - De
Het selectievakje Bypass voor netwerk omzeilt de servicemedewerker en dwingt de browser om naar het netwerk te gaan voor de aangevraagde bronnen. - Via de koppeling Netwerkverzoeken gaat u naar het netwerkpaneel met een lijst met onderschepte verzoeken die betrekking hebben op de servicemedewerker (
is:service-worker-interceptedfilter). - De link Update voert een eenmalige update uit van de opgegeven servicemedewerker.
- De drukknop emuleert een pushmelding zonder een payload (ook wel kietel genoemd).
- De knop Synchroniseren emuleert een achtergrondsynchronisatiegebeurtenis.
- Met de link Afmelden wordt de registratie van de opgegeven servicemedewerker afgemeld. Bekijk Opslag wissen voor een manier om de registratie van een servicemedewerker ongedaan te maken en opslag en caches met één klik op de knop te wissen.
- De bronregel geeft aan wanneer de momenteel actieve servicemedewerker is geïnstalleerd. De link is de naam van het bronbestand van de servicemedewerker. Als u op de link klikt, wordt u naar de bron van de servicemedewerker gestuurd.
- Op de statusregel ziet u de status van de servicemedewerker. Het getal op deze regel (
#16in de schermafbeelding) geeft aan hoe vaak de servicemedewerker is bijgewerkt. Als u de
Update bij het selectievakje voor opnieuw laden. U zult merken dat het aantal toeneemt bij elke pagina die wordt geladen. Naast de status ziet u een startlink (als de servicemedewerker gestopt is) of een stoplink (als de servicemedewerker actief is). Servicemedewerkers zijn zo ontworpen dat ze op elk moment door de browser kunnen worden gestopt en gestart. Het expliciet tegenhouden van uw servicemedewerker via de stoplink kan dat simuleren. Het stoppen van uw servicemedewerker is een goede manier om te testen hoe uw code zich gedraagt wanneer de servicemedewerker weer opstart. Het brengt vaak bugs aan het licht die het gevolg zijn van onjuiste aannames over de aanhoudende mondiale toestand. - Op de regel Clients ziet u de oorsprong waar de servicemedewerker zich op richt. De focusknop is vooral handig als u meerdere geregistreerde servicemedewerkers heeft. Als u op de focusknop klikt naast een servicemedewerker die op een ander tabblad actief is, richt Chrome zich op dat tabblad.
In de tabel Updatecyclus ziet u de activiteiten van de servicemedewerker en de verstreken tijden, zoals installeren, wachten en activeren. Om de exacte tijdstempel van elke activiteit te zien, klikt u op de
Knoppen uitvouwen . 
Zie De levenscyclus van de servicemedewerker voor meer informatie.
Als de servicemedewerker fouten veroorzaakt, wordt op het tabblad Servicemedewerkers een 
Foutpictogram met het aantal fouten naast de bronregel . De link met het nummer brengt u naar de console met alle geregistreerde fouten.
Als u informatie over alle servicemedewerkers wilt zien, klikt u op Alle registraties weergeven onder aan het tabblad Servicemedewerkers . Deze link gaat naar chrome://serviceworker-internals/?devtools waar u verdere fouten in uw servicewerknemers kunt opsporen.
Caches voor servicemedewerkers
Het tabblad Cache-opslag biedt een alleen-lezen lijst met bronnen die in de cache zijn opgeslagen met behulp van de (servicemedewerker) Cache API .
Houd er rekening mee dat DevTools de wijziging mogelijk niet detecteert als u voor de eerste keer een cache opent en er een bron aan toevoegt. Laad de pagina opnieuw en je zou de cache moeten zien.
Als u twee of meer caches geopend heeft, ziet u deze vermeld onder de vervolgkeuzelijst Cacheopslag .
Quotumgebruik
Sommige reacties op het tabblad Cache-opslag kunnen als ' ondoorzichtig ' worden gemarkeerd. Dit verwijst naar een antwoord dat is opgehaald van een andere oorsprong, zoals van een CDN of externe API, wanneer CORS niet is ingeschakeld.
Om het lekken van informatie over meerdere domeinen te voorkomen, is er aanzienlijke opvulling toegevoegd aan de grootte van een ondoorzichtig antwoord dat wordt gebruikt voor het berekenen van opslagquotumlimieten (dat wil zeggen of er een QuotaExceeded uitzondering wordt gegenereerd) en gerapporteerd door de navigator.storage API .
De details van deze opvulling variëren van browser tot browser, maar voor Google Chrome betekent dit dat de minimale grootte die een enkele in de cache opgeslagen ondoorzichtige reactie bijdraagt aan het totale opslaggebruik ongeveer 7 megabytes is. U moet hier rekening mee houden wanneer u bepaalt hoeveel ondoorzichtige reacties u in de cache wilt opslaan, omdat u de opslaglimieten gemakkelijk veel eerder kunt overschrijden dan u anders zou verwachten op basis van de werkelijke grootte van de ondoorzichtige bronnen.
Gerelateerde gidsen:
- Stack Overflow: welke beperkingen zijn van toepassing op ondoorzichtige reacties?
- Workbox: opslagquota begrijpen
Duidelijke opslag
Het tabblad Opslag wissen is een zeer nuttige functie bij het ontwikkelen van progressieve web-apps. Op dit tabblad kunt u met één klik op de knop servicemedewerkers afmelden en alle caches en opslag wissen. Bekijk het onderstaande gedeelte voor meer informatie.
Gerelateerde gidsen:
Andere applicatiepaneelgidsen
Bekijk de onderstaande handleidingen voor meer hulp bij de andere deelvensters van het toepassingspaneel .
Gerelateerde gidsen: