Met het paneel Toepassing kunt u webapp-manifesten, serviceworkers en serviceworkerscaches inspecteren, wijzigen en fouten opsporen.
Progressive Web Apps (PWA's) zijn moderne, hoogwaardige applicaties die gebouwd zijn met behulp van webtechnologie. PWA's bieden vergelijkbare mogelijkheden als iOS-, Android- en desktop-apps. Ze zijn:
- Betrouwbaar, zelfs bij onstabiele netwerkomstandigheden.
- Kan worden geïnstalleerd om oppervlakken van besturingssystemen te starten, zoals de map Programma's op Mac OS X, het Startmenu op Windows en het startscherm op Android en iOS.
- Verschijn in activiteitswisselaars, zoekmachines voor apparaten zoals Spotlight en in bladen voor het delen van inhoud.
Deze handleiding behandelt alleen de functies van de Progressive Web App in het applicatiepaneel . Als u hulp nodig hebt met de andere panelen, raadpleeg dan het laatste deel van deze handleiding, Handleidingen voor andere applicatiepanelen .
Samenvatting
- Gebruik het tabblad Manifest om uw web-app-manifest te inspecteren.
- U kunt het tabblad Service Workers gebruiken voor allerlei taken die met service workers te maken hebben, zoals het afmelden of bijwerken van een service, het emuleren van pushgebeurtenissen, offline gaan of het stoppen van een service worker.
- Bekijk uw service worker-cache via het tabblad Cacheopslag .
- Met één klik op de knop op het tabblad Opslag wissen kunt u de registratie van een service worker ongedaan maken en alle opslagruimte en caches 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 in Windows en het startscherm op Android en iOS, hebt u een webappmanifest nodig. Het manifest definieert hoe de app op het startscherm wordt weergegeven, waar de gebruiker naartoe moet worden geleid bij het starten vanaf het startscherm en hoe de app er bij het starten uitziet.
Zodra u uw manifest hebt ingesteld, kunt u het bekijken via het tabblad Manifest van het paneel Toepassing .
- Om de broncode van het manifest te bekijken, klikt u op de link onder het label App Manifest (
manifest.webmanifest
in de bovenstaande schermafbeelding). - In de secties Identiteit en Presentatie worden velden uit de manifestbron op een gebruiksvriendelijkere manier weergegeven.
- Met de sectie Protocolhandlers kunt u de registratie van de URL-protocolhandler van uw PWA met één klik op de knop testen. Zie Registratie van de URL-protocolhandler testen voor meer informatie.
- In het gedeelte Pictogrammen worden alle pictogrammen weergegeven die u hebt opgegeven. U kunt hier ook de maskers ervan controleren.
- In de sectiereeks Snelkoppeling #N wordt informatie over al uw snelkoppelingobjecten weergegeven.
- In de sectie Screenshot #N worden schermafbeeldingen weergegeven voor een rijkere installatie-UI van uw app.
Als DevTools een fout tegenkomt, bijvoorbeeld een pictogram dat niet kan worden geladen, wordt op het tabblad Manifest een sectie Installeerbaarheid weergegeven waarin de fout wordt beschreven.
Bekijk en controleer maskerbare pictogrammen
In het gedeelte Pictogrammen van het tabblad Manifest worden alle pictogrammen van uw applicatie weergegeven. In dit gedeelte kunt u ook veilige gebieden controleren voor maskerbare pictogrammen , de opmaak van pictogrammen die zich aanpassen aan platforms.
Om de pictogrammen zo bij te snijden dat alleen het minimale veilige gebied zichtbaar is, vinkt u aan Toon alleen het minimale veilige gebied voor maskeerbare pictogrammen .
Als uw volledige logo zichtbaar is in het veilige gebied, bent u klaar.
Triggerinstallatie
Met Chrome kunt u de installatie van uw PWA rechtstreeks vanuit de gebruikersinterface inschakelen en promoten. Leer hoe u uw eigen in-app-installatie-ervaring kunt bieden .
Om de installatie van uw PWA te starten:
- Open de landingspagina van de PWA in Chrome.
Klik rechtsboven in de adresbalk op
Installeren .
Volg de instructies op het scherm.
De functie App installeren kan de workflow voor mobiele apparaten niet simuleren. Let op hoe de Chrome-browser op de desktop de installatieknop in de adresbalk weergeeft, ook al staat DevTools in de apparaatmodus . Als u uw app echter wel succesvol aan uw desktop kunt toevoegen, werkt deze ook op mobiele apparaten.
Als u de echte mobiele ervaring wilt testen, kunt u een echt mobiel apparaat verbinden met DevTools via remote debugging . Om de installatie op het verbonden mobiele apparaat te starten, opent u de menu met drie puntjes en klik
App installeren .
Snelkoppelingen inspecteren
Met app-snelkoppelingen kunt u gebruikers snel toegang geven tot een aantal veelvoorkomende acties die ze vaak nodig hebben.
Om de snelkoppelingen die u in uw manifestbestand hebt gedefinieerd te bekijken, scrolt u naar de sectie Snelkoppeling #N op het tabblad Manifest .
Bekijk screenshots voor een rijkere installatie-UI
Wanneer u een beschrijving en een reeks schermafbeeldingen aan uw manifestbestand toevoegt, krijgt uw app een uitgebreidere installatiedialoog.
Om de schermafbeeldingen te bekijken, scrolt u naar de sectie Schermafbeelding #N van het tabblad Manifest .
Test URL-protocolhandlerregistratie
PWA's kunnen links verwerken die een specifiek protocol gebruiken voor een meer geïntegreerde ervaring. Zie URL-protocolhandlerregistratie voor PWA's voor meer informatie over het aanmaken van een handler.
Om uw handler te testen:
- Open DevTools op de startpagina van je PWA. Bekijk bijvoorbeeld deze demo-PWA .
- Installeer de PWA vanaf de demopagina en laad de app na de installatie opnieuw. De browser heeft de PWA nu geregistreerd als handler voor het
web+coffee
-protocol. - Voer in het gedeelte Toepassing > Manifest > Protocol-handler de URL in die u door de handler wilt laten testen en klik op Testprotocol .
In dit voorbeeld kan de handler
americano
,chai
enlatte-macchiato
verwerken. - Wanneer Chrome vraagt of de app geopend mag worden, bevestigt u dit door op Open Protocol Handler te klikken.
- In het volgende dialoogvenster staat u toe dat de app
web+coffee
koppelingen verwerkt.
Als de handler de koppeling succesvol verwerkt, zie je in de app een afbeelding van een geopend koffiekopje.
Dienstverleners
Service workers vormen een fundamentele technologie in het toekomstige webplatform. Het zijn scripts die de browser op de achtergrond uitvoert, los van een webpagina. Deze scripts geven je toegang tot functies waarvoor geen webpagina of gebruikersinteractie nodig is, zoals pushmeldingen, achtergrondsynchronisatie en offline ervaringen.
Gerelateerde gidsen:
Het tabblad Service Workers in het toepassingspaneel is de belangrijkste plek in DevTools om service workers te inspecteren en debuggen.
- Als er een service worker is geïnstalleerd op de momenteel geopende pagina, wordt deze op dit tabblad weergegeven. In de bovenstaande schermafbeelding is bijvoorbeeld een service worker geïnstalleerd voor de scope
https://airhorner.com/
. - De
Met het selectievakje Offline schakelt u DevTools in de offlinemodus. Dit is gelijk aan de offlinemodus die beschikbaar is via het paneel Netwerk of de optie
Go offline
in het menu Opdrachten . - De
Als u het selectievakje Bijwerken bij opnieuw laden inschakelt , wordt de service worker gedwongen de pagina bij te werken telkens wanneer de pagina wordt geladen.
- De
Als u het selectievakje Bypass voor netwerk inschakelt, wordt de service worker omzeild en wordt de browser gedwongen om voor de aangevraagde bronnen naar het netwerk te gaan.
- Via de koppeling Netwerkaanvragen gaat u naar het paneel Netwerk , met een lijst van onderschepte aanvragen die betrekking hebben op de service worker (filter
is:service-worker-intercepted
). - Met de koppeling Bijwerken voert u een eenmalige update van de opgegeven service worker uit.
- De Push- knop emuleert een pushmelding zonder payload (ook wel tickle genoemd).
- De knop Synchroniseren emuleert een achtergrondsynchronisatiegebeurtenis.
- Met de link 'Ontregistreren' wordt de registratie van de opgegeven service worker ongedaan gemaakt. Zie 'Opslag wissen' voor een manier om een service worker te deregistreren en de opslag en caches met één klik op de knop te wissen.
- De bronregel geeft aan wanneer de momenteel actieve service worker is geïnstalleerd. De link is de naam van het bronbestand van de service worker. Als u op de link klikt, wordt u doorgestuurd naar de bron van de service worker.
- De statusregel geeft de status van de service worker weer. Het nummer op deze regel (
#16
in de schermafbeelding) geeft aan hoe vaak de service worker is bijgewerkt. Als u deAls u het selectievakje 'Bijwerken bij opnieuw laden' selecteert, ziet u dat het nummer bij elke paginalading toeneemt. Naast de status ziet u een startlink (als de service worker is gestopt) of een stoplink (als de service worker actief is). Service workers zijn ontworpen om op elk moment door de browser te worden gestopt en gestart. Door uw service worker expliciet te stoppen met behulp van de stoplink kunt u dit simuleren. Het stoppen van uw service worker is een uitstekende manier om te testen hoe uw code zich gedraagt wanneer de service worker opnieuw wordt opgestart. Het brengt vaak bugs aan het licht die te wijten zijn aan onjuiste aannames over de persistente globale status.
- De regel 'Clients' geeft de oorsprong aan waar de service worker zich op richt. De focusknop is vooral handig wanneer u meerdere geregistreerde service workers hebt. Als u op de focusknop naast een service worker klikt die op een ander tabblad actief is, focust Chrome op dat tabblad.
De tabel Updatecyclus toont de activiteiten van de service worker en de verstreken tijden, zoals installatie, wachten en activeren. Om het exacte tijdstempel van elke activiteit te zien, klikt u op
Knoppen uitvouwen .
Zie De levenscyclus van service workers voor meer informatie.
Als de service worker fouten veroorzaakt, wordt op het tabblad Service Workers een melding weergegeven. Foutpictogram met het aantal fouten naast de bronregel . De link met het nummer brengt u naar de console met alle geregistreerde fouten.
Om informatie over alle serviceworkers te bekijken, klikt u onderaan het tabblad Serviceworkers op 'Alle registraties bekijken '. Deze link leidt naar chrome://serviceworker-internals/?devtools
waar u uw serviceworkers verder kunt debuggen.
Service worker-caches
Op het tabblad Cacheopslag vindt u een alleen-lezenlijst met bronnen die in de cache zijn opgeslagen met behulp van de (service worker) Cache API .
Houd er rekening mee dat DevTools de wijziging mogelijk niet detecteert wanneer u een cache voor het eerst opent en er een resource aan toevoegt. Laad de pagina opnieuw en u zou de cache moeten zien.
Als u twee of meer caches open hebt staan, worden deze weergegeven onder de vervolgkeuzelijst Cacheopslag .
Quotagebruik
Sommige reacties op het tabblad Cacheopslag kunnen als ' ondoorzichtig ' worden gemarkeerd. Dit verwijst naar een reactie die is opgehaald uit een andere bron, zoals een CDN of externe API, wanneer CORS niet is ingeschakeld.
Om te voorkomen dat er informatie tussen domeinen lekt, wordt er een aanzienlijke vulling toegevoegd aan de grootte van een ondoorzichtig antwoord dat wordt gebruikt voor het berekenen van opslagquotumlimieten (bijvoorbeeld of er een QuotaExceeded
uitzondering wordt gegenereerd) en dat wordt gerapporteerd door de navigator.storage
API .
De details van deze opvulling variëren per browser, maar voor Google Chrome betekent dit dat de minimale grootte van een enkele gecachede ondoorzichtige respons aan het totale opslaggebruik ongeveer 7 megabyte bedraagt. Houd hier rekening mee bij het bepalen van het aantal ondoorzichtige responsen dat u wilt cachen, aangezien u de opslagquota al snel veel eerder kunt overschrijden dan u op basis van de werkelijke grootte van de ondoorzichtige resources zou verwachten.
Gerelateerde gidsen:
- Stack Overflow: Welke beperkingen gelden voor ondoorzichtige reacties?
- Workbox: Opslagquota begrijpen
Duidelijke opslag
Het tabblad Opslag wissen is een zeer nuttige functie bij het ontwikkelen van progressieve webapps. Met dit tabblad kunt u serviceworkers afmelden en alle caches en opslag wissen met één druk op de knop. Lees het onderstaande gedeelte voor meer informatie.
Gerelateerde gidsen:
Andere handleidingen voor toepassingspanelen
Bekijk de onderstaande handleidingen voor meer hulp bij de andere deelvensters van het toepassingspaneel .
Gerelateerde gidsen: