Debug progressieve webapps

Kayce Basques

Sofia Emelianova

Gebruik het toepassingspaneel om web-app-manifesten, service workers en service worker-caches te inspecteren, te wijzigen en te debuggen.

Progressive Web Apps (PWA's) zijn moderne, hoogwaardige applicaties die gebouwd zijn met webtechnologie. PWA's bieden vergelijkbare mogelijkheden als iOS-, Android- en desktop-apps. Ze zijn:

• Betrouwbaar, zelfs bij instabiele netwerkomstandigheden.
• Kan worden geïnstalleerd op verschillende interfaces van besturingssystemen, zoals de map 'Programma's' op Mac OS X, het Startmenu op Windows en het startscherm op Android en iOS.
• Verschijn in activiteitenwisselaars, zoekmachines van apparaten zoals Spotlight en in menu's voor het delen van content.

Deze handleiding behandelt alleen de Progressive Web App-functies van het toepassingspaneel . Als u hulp zoekt voor de andere panelen, raadpleeg dan het laatste gedeelte van deze handleiding, 'Andere handleidingen voor het toepassingspaneel' .

Samenvatting

• Gebruik het tabblad Manifest om het manifest van uw webapplicatie te bekijken.
• Gebruik het tabblad Service Workers voor een breed scala aan taken die te maken hebben met service workers, zoals het uitschrijven of bijwerken van een service, het emuleren van push-events, offline gaan of het stoppen van een service worker.
• Bekijk de cache van uw service worker via het tabblad Cacheopslag .
• Een service worker uitschrijven en alle opslag en caches wissen met één muisklik op het tabblad 'Opslag wissen' .

Webapp-manifest

Als je wilt dat je gebruikers je app kunnen toevoegen aan de map 'Programma's ' op Mac OS X, het Startmenu op Windows en het startscherm op Android en iOS, heb je een web-appmanifest nodig. Het manifest definieert hoe de app op het startscherm verschijnt, waar de gebruiker naartoe wordt geleid wanneer de app vanaf het startscherm wordt gestart, en hoe de app eruitziet bij het opstarten.

Zodra je je manifest hebt ingesteld, kun je het bekijken via het tabblad Manifest in het toepassingspaneel .

• Om de broncode van het manifest te bekijken, klikt u op de link onder het label 'App Manifest' ( manifest.webmanifest in de bovenstaande schermafbeelding).
• De secties 'Identiteit' en 'Presentatie' tonen simpelweg velden uit de manifestbron op een gebruiksvriendelijkere manier.
• In het gedeelte Protocol Handlers kunt u met één druk op de knop de registratie van de URL-protocolhandler van uw PWA testen. Zie Test URL-protocolhandlerregistratie voor meer informatie.
• In het gedeelte 'Pictogrammen ' worden alle pictogrammen weergegeven die u hebt opgegeven en kunt u hun maskers bekijken.
• De sectie 'Snelkoppeling #N' toont informatie over al uw snelkoppelingsobjecten.
• In de sectie 'Schermafbeelding #N' worden schermafbeeldingen weergegeven voor een rijkere installatie-interface van uw app.

Als DevTools een fout tegenkomt, bijvoorbeeld een pictogram dat niet kan worden geladen, toont het tabblad Manifest een sectie 'Installeerbaarheid ' met een beschrijving van de fout.

Maskeerbare pictogrammen bekijken en controleren

In het gedeelte 'Pictogrammen' van het tabblad 'Manifest' worden alle pictogrammen van uw applicatie weergegeven. In dit gedeelte kunt u ook de veilige gebieden voor maskeerbare pictogrammen controleren, het formaat van pictogrammen dat zich aanpast aan verschillende platformen.

Om de pictogrammen bij te snijden zodat alleen het minimale veilige gebied zichtbaar is, vinkt u het vakje aan. Toon alleen het minimale veilige gebied voor maskeerbare pictogrammen .

Als uw volledige logo zichtbaar is binnen het veilige gebied, zit u goed.

Installatie van de trigger

Chrome biedt je de mogelijkheid om de installatie van je PWA rechtstreeks vanuit de gebruikersinterface in te schakelen en te promoten. Lees hoe je je eigen installatie-ervaring binnen de app kunt aanbieden .

Om het installatieproces van uw PWA te starten:

1. Open de landingspagina van de PWA in Chrome.

2. Klik rechtsboven in de adresbalk. Installeren .

   

3. Volg de instructies op het scherm.

De functie 'App installeren' (of 'Toevoegen aan startscherm ' op sommige apparaten) kan de workflow voor mobiele apparaten niet simuleren. Let op hoe de Chrome-browser op desktops de installatieknop in de adresbalk weergeeft, zelfs als DevTools in de apparaatmodus staat. Als je je app echter succesvol aan je desktop kunt toevoegen, werkt het ook op mobiele apparaten.

Als u de echte mobiele ervaring wilt testen, kunt u een echt mobiel apparaat via debuggen op afstand met DevTools verbinden. Om de installatie op het verbonden mobiele apparaat te starten, opent u de drie puntjes en klik Installeer de app (of voeg toe aan het startscherm ).

Snelkoppelingen controleren

Met app-snelkoppelingen kunt u gebruikers snel toegang geven tot een aantal veelgebruikte acties die ze vaak nodig hebben.

Om de snelkoppelingen te bekijken die u in uw manifestbestand hebt gedefinieerd, scrolt u naar de sectie Snelkoppeling #N op het tabblad Manifest .

Bekijk de schermafbeeldingen voor een uitgebreidere installatie-interface.

Als je een beschrijving en een set schermafbeeldingen toevoegt aan je manifestbestand , krijgt je app een uitgebreider installatiedialoogvenster.

Om de schermafbeeldingen te bekijken, scrolt u naar het gedeelte 'Schermafbeelding #N' in het tabblad 'Manifest' .

Test de registratie van de URL-protocolhandler

PWA's kunnen links verwerken die een specifiek protocol gebruiken voor een meer geïntegreerde gebruikerservaring. Zie URL-protocolhandlerregistratie voor PWA's voor meer informatie over het aanmaken van een handler.

Om je handler te testen:

1. Open de ontwikkelaarstools op de landingspagina van je PWA. Bekijk bijvoorbeeld deze demo-PWA .
2. Installeer de PWA via de demopagina en herlaad de app na de installatie. De browser heeft de PWA nu geregistreerd als handler voor het web+coffee protocol.
3. In het gedeelte Toepassing > Manifest > Protocolhandler voert u de URL in die u door de handler wilt laten testen en klikt u op Protocol testen . In dit voorbeeld kan de handler americano , chai en latte-macchiato verwerken.
4. Wanneer Chrome vraagt ​​of de app geopend mag worden, bevestig dit dan door op 'Open Protocol Handler' te klikken.
5. In het volgende dialoogvenster geeft u de app toestemming om web+coffee -links te verwerken.

Als de handler de link succesvol verwerkt, zie je in de app een afbeelding van een geopende koffiekop.

Dienstverlenende werknemers

Service workers zijn een fundamentele technologie voor het webplatform van de toekomst. Het zijn scripts die de browser op de achtergrond uitvoert, los van een webpagina. Deze scripts stellen je in staat om toegang te krijgen tot functies die geen webpagina of gebruikersinteractie vereisen, zoals pushmeldingen, synchronisatie op de achtergrond en offline-ervaringen.

Gerelateerde handleidingen:

• Inleiding tot dienstverlenend personeel
• Pushmeldingen: tijdig, relevant en nauwkeurig

Het tabblad Service Workers in het paneel Toepassing is de belangrijkste plek in DevTools om service workers te inspecteren en te debuggen.

• Als er een service worker is geïnstalleerd voor de momenteel geopende pagina, wordt deze op dit tabblad weergegeven. In de bovenstaande schermafbeelding is bijvoorbeeld een service worker geïnstalleerd voor de pagina https://airhorner.com/ .
• De Het selectievakje 'Offline' zet DevTools in de offline modus. Dit is gelijk aan de offline modus die beschikbaar is via het paneel 'Netwerk' of de optie Go offline in het menu 'Opdrachten' .
• De Door het selectievakje 'Update on reload' wordt de service worker gedwongen om bij elke paginalading een update uit te voeren.
• De Door het selectievakje 'Netwerk overslaan' wordt de service worker omzeild en wordt de browser gedwongen om via het netwerk de gevraagde bronnen op te halen.
• De link 'Netwerkverzoeken' brengt u naar het netwerkpaneel met een lijst van onderschepte verzoeken die betrekking hebben op de service worker (filter is:service-worker-intercepted ).
• De link 'Update' voert een eenmalige update uit van de opgegeven service worker.
• De Push- knop simuleert een pushmelding zonder inhoud (ook wel een ' tickle ' genoemd).
• De synchronisatieknop simuleert een synchronisatiegebeurtenis op de achtergrond.
• Met de link 'Registratie ongedaan maken' wordt de betreffende service worker uitgeschreven. Raadpleeg 'Opslag wissen' voor een manier om een ​​service worker uit te schrijven en de opslag en caches met één muisklik te wissen.
• De regel 'Source' geeft aan wanneer de momenteel actieve service worker is geïnstalleerd. De link is de naam van het bronbestand van de service worker. Door op de link te klikken, wordt u naar de broncode van de service worker geleid.
• 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 de service worker inschakelt... Als u het selectievakje 'Update on reload' aanvinkt, ziet u dat het nummer bij elke paginalading met één 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 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 gestart. Het brengt vaak bugs aan het licht die voortkomen uit onjuiste aannames over de persistente globale status.
• De regel 'Clients' geeft aan tot welke oorsprong de service worker is beperkt. De focusknop is vooral handig wanneer je meerdere geregistreerde service workers hebt. Als je op de focusknop klikt naast een service worker die in een ander tabblad draait, focust Chrome op dat tabblad.

• De tabel Updatecyclus toont de activiteiten van de service worker en de bijbehorende tijdsduur, zoals installeren, wachten en activeren. Klik op de betreffende activiteit om de exacte tijdstempel te bekijken. Knoppen uitklappen .

  

  Voor meer informatie, zie De levenscyclus van de servicemedewerker .

Als de service worker fouten veroorzaakt, wordt dit weergegeven op het tabblad Service Workers . 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 service workers te bekijken, klikt u op ' Alle registraties bekijken' onderaan het tabblad ' Service Workers' . Deze link leidt naar chrome://serviceworker-internals/?devtools waar u uw service workers verder kunt debuggen.

Service worker caches

Het tabblad Cache Storage biedt een alleen-lezen lijst van resources 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 de cache voor het eerst opent en er een bron aan toevoegt. Vernieuw de pagina en u zou de cache moeten zien.

Als je twee of meer caches hebt geopend, zie je deze onder het vervolgkeuzemenu 'Cacheopslag' staan.

Quota-gebruik

Sommige reacties in het tabblad Cacheopslag kunnen als ' ondoorzichtig ' worden gemarkeerd. Dit verwijst naar een reactie die afkomstig is van een andere bron, zoals een CDN of externe API, wanneer CORS niet is ingeschakeld.

Om te voorkomen dat informatie tussen domeinen uitlekt, wordt er aanzienlijk extra ruimte toegevoegd aan de grootte van een ondoorzichtige respons die wordt gebruikt voor het berekenen van opslagquotumlimieten (d.w.z. of er een QuotaExceeded uitzondering wordt gegenereerd) en die 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 die een enkele gecachede ondoorzichtige respons bijdraagt ​​aan het totale opslaggebruik ongeveer 7 megabytes is. Houd hier rekening mee bij het bepalen hoeveel ondoorzichtige responsen u wilt cachen, aangezien u de opslaglimieten veel sneller kunt overschrijden dan u op basis van de werkelijke grootte van de ondoorzichtige bronnen zou verwachten.

Gerelateerde handleidingen:

• Stack Overflow: Welke beperkingen gelden voor ondoorzichtige antwoorden?
• Workbox: Inzicht in opslagquota

Ruime opbergruimte

Het tabblad 'Opslag wissen' is een zeer handige functie bij het ontwikkelen van progressieve webapps. Met dit tabblad kunt u service workers uitschrijven en alle caches en opslag wissen met één muisklik. Lees het onderstaande gedeelte voor meer informatie.

Gerelateerde handleidingen:

• Opruimen van de opslag

Overige handleidingen voor toepassingspanelen

Raadpleeg de onderstaande handleidingen voor meer informatie over de andere onderdelen van het toepassingspaneel .

Gerelateerde handleidingen:

• Bekijk de paginabronnen
• Lokale opslag en caches inspecteren en beheren.