Various Categories in Application Tool

The various features related to web apps are categorized under different categories in the sidebar. There are 5 categories which are Application, Storage, Background services, Preloading, and Frames.

1. Application Category:

This category includes panes related to features of the web app.

• Manifest: The manifest is a JSON file providing information about the PWA which will be used when the app is installed. Some of that information includes the Identity, Presentation, Protocol Handlers, Icons, and Window Controls Overlay.

• Service workers: Service workers are scripts running in the background by the user to improve the offline experience of the site and also allow push notifications and background sync. The Service workers provide various buttons which are:
  • Offline: If checked then the DevTools behave as same as the site going offline.
  • Update on reload: If checked then the service workers get updated in every page load.
  • Bypass for network: If checked then the browser is forced to look for requested resources.
  • Network requests: If checked then the network tab is opened in the drawer of DevTools.
  • Update: Click it to update the service worker.
  • Unregister: Click it to remove the service worker from the webpage.
  • Source: Mentions the service worker file if you click it you will brought to the Sources tab with that file opened.
  • Status: Mentions the ID of the service worker and the status of the service worker. You also get a start/stop button to enable/disable the service worker.
  • Clients: Mentions the origin that the service worker is working on. You also get the focus button if there are multiple service workers then on clicking it the tab gets open where the service worker belongs.
  • Push: The button emulates a push notification.
  • Sync: The button emulates a background sync service.
  • Periodic Sync: The button allows periodic background sync service without your interaction.
  • Update Cycle: Displays the update information of the service worker along with the start and end time under the expandable ID.
  • See all registrations: Click it to view all the service workers in the browser.

• Storage: The pane provides a summary of the storage usage of the web page. The various options provided under it are:
  • Simulate custom storage quota: If checked you can type your own custom limit of memory usage.
  • Clear site data: Click this button to clear the webpage storage.
  • including third-party cookies: if checked then when you Click clear site data then 3rd party cookies also get removed.
  • Unregister service workers: If checked then the service worker is disabled for the site.
  • Local Session Storage, IndexedDB, Web SQL, Cookies, Cache storage: If checked then the Clear site data option clears the checked storage.

2. Storage Category:

This category includes the various types of storage used by the web app.

• Local Storage: This pane displays various data stored by the web page in the user’s system which are just key-value pairs with no expiry date. This is one of the commonly used storage for basic use cases.

• Session Storage: This pane displays session data which persists until the browser is closed. The storage method is used by the sites to prevent saving of the data thus protecting any leaks or misuse of the data.

• IndexedDB: This pane displays the indexed DB used by the site. IndexedDB is just like key-value pairs like local storage but allows transactions. This storage method allows developers to query the data and handle large amounts of complex data sets.

• Web SQL: If a site is using a web page API for storing or managing the data in databases using SQL then this database information is displayed under this pane.

• Cookies: These are meant to be used to provide different experiences for different users by storing some user-related information in the user’s own system by the server. It is used by most browsers to provide a better user experience by storing various values on the server.

• Private state tokens: Provide information about the various cryptic tokens that the web page share with the browser to validate that the user is human and not a bot.

• Interest groups: Displays the various websites that web pages find important to use. This can be used to auction ads on the web page and the information is stored in the browser and not shared with anyone.

• Shared Storage: This pane displays information that is being shared between multiple users or systems where the webpage is being run. If the site supports multi-user capability from the same account then some key-value pairs are stored in the shared storage.

• Cache Storage: This pane displays the cache storage which is just the network requests and response information that if required frequently. Used to save download time and fast response which requests the same resource multiple times.

3. Background Services Category:

The various services working in the background are displayed in this category.

• Back/forward cache: The browser saves the pages that the user navigates around the website so that when you press the backward or forward navigation button in Edge the pages instantly appear.

• Background fetch: The various resources whose sizes are huge and require time to download can be downloaded before their use using the Background fetch API.

• Background sync: The various data that service workers send to the server after the user system comes online are under this pane. This data is used to sync the web page to the server.

• Bounce tracking mitigations: Provides cross-site tracking information about the site and you can not only view but delete them.

• Notifications: The service worker displays data to the user using the notification API when the server uses a push message.

• Payment handler: The API which handles payment requests on behalf of the user helps to handle multiple payment services.

• Periodic background sync: The service worker can be made to update information periodically to update the site with the latest information.

• Push messaging: The server user pushes messaging informing the service worker to display it as a notification. The service worker uses the Notifications API to display the message.

• Reporting API: There are many problems that can only be found in the production environment such as deprecated API or security violations. This reporting API is used to monitor and display these kinds of errors for the developers to debug.

4. Preloading Category:

The resources or pages which are loaded before it’s used in a web app are called preloading and this category provides information related to preloading.

• Speculation Rules: Provide rules set which will be used to prefetch or pre-render URL.

• Preloads: This pane provides a list of all the prefetched URLs or pre-rendered URLs from the speculation rule.

• This Page: This page provides information regarding the pre-rendered status of the current web page.

5. Frames Category:

The various frames and their resources are displayed under this category. The information that it displays is about the document, security, Isolation, API availability, Origin Trials, and Permission Policy. The expandable menu also provides panes related to various resources and assets used by the site such as images, fonts, scripts, etc.

The application tool provides all kinds of information about a web app, which helps the developers get an idea related to the web app. Some of this information is manifest, service workers, storage, etc., which you can use to check for background processes and test for PWA. The application tool provides information under various categories, which are application, storage, background services, preloading, and frames.