PWA Learning and Practice series articles have been compiled into gitbook-PWA Learning Handbook, and the text has been synchronized to learning-PWA-ebook. Please indicate the author and source of reprint.

This is the sixth article in the PWA Learning & Practice series.

PWA, as one of the hottest technology concepts at present, has great significance for improving the security, performance and experience of Web applications, and is worth our understanding and learning. If you are interested in PWA, please pay attention to the PWA Learning and Practice series.

The previous articles introduced some of the functionality in PWA and the technology behind it. To do a good job, he must sharpen his tools. This article describes how to debug our PWA.

Service Worker

The Service Worker debugger is integrated with the new Chrome debugger.

Open the Chrome debugging tool and select the Application TAB. Select Application –> Service Worker from the list on the left, and the Service Worker under the current site will be displayed.

There are three checkboxes under the Service Worker:

  • Offline: Switches to a netless environment. You can select this option to view application performance in a netless environment.
  • Update on reload: Updates the Service Worker each time it is reload. Generally speaking, when visiting a site and finding Service Worker updates, in order to ensure this visit, the new Service Worker will not be activated immediately, but will only enter the wait state after installation and be activated at the next visit. Check this option to reinstall and activate the Service Worker after each Reload.
  • Bypass for network: uses network requests. We know that the Service Worker can intercept client requests and all requests will go directly to the network if this option is checked.

The Upadte button in the upper right corner of the panel can manually trigger Service Worker updates. Unregister is similar to Unregister in the code, which is used to Unregister the current Service Worker.

From “Service Workers from Other Domain” below, you can view all Service workers registered on the client:

The Service Worker main panel area includes five projects: Source, Status, Clients, Push, and Sync.

  • Source: Displays the Service Worker script (sw.js) used for the current registration. Click to view the content of the script. It also shows the installation time of the Service Worker.
  • Status: Shows the life cycle of the Service Worker. You can pause the Service Worker by clicking the Stop button. Among them,# 1201Represents the version of the Service Worker. When the sw.js file is unchanged, the number on the reload site does not increase; However, when Update on reload is checked, the number increases because each reload triggers the Service Worker to be reinstalled.
  • Clients: Displays the root of the current Service Worker. The Focus button is used to help you quickly switch to the corresponding TAB of the Service Worker (when you open multiple site tabs, click to quickly switch).
  • Push: Used to simulate pushing.
  • Sync: used to simulate background synchronization.

The console.log information in the Service Worker is also displayed on the console. In addition, since the Reload page clears the console by default, to save some log information, you can open the Preserve Log to Preserve the console information.

Manifest

In Application, click on the Manifest to see the Manifest configuration used by the current Application:

Also, click the manifest.json link to view the manifest file. Click “Add to Homescreen” to Add your app to your desktop. Instead of clicking “Add to Homescreen,” you can also use Chrome to Add to the Apps folder.

Cache

In addition to the Service Worker and Manifest, we also use Cache in our WebApp. Caching is also supported in Application: the Cache Storage in the Cache list.

Bs-0-2-0 and API-0-1-1 are the caches created and used by our “Book Search” Web App. Bs-0-2-0 caches some static resources including pages, JS, CSS, images, etc. In API-0-1-1, XHR requests for book retrieval are cached.

To Delete some caches, right-click and select Delete. You can also click the cross at the top. Here in addition to Clear the cache, can also Clear under the condition of Application including the Storage of the Service Worker, cache and the Storage (cookies/localstorage/with IndexedDB…) Such data.

Write in the last

If you like or want to learn more about PWA, please feel free to follow me and follow the PWA Learning & Practice series. I will summarize the questions and technical points I have encountered in the process of learning PWA, and practice with everyone through actual codes.

In the next article, we’ll look at another feature that is often combined with the Push API — the message Notification API.

PWA Learning and Practice series

  • Start your PWA learning journey in 2018
  • Learn to Use Manifest to Make your WebApp More “Native”
  • Make your WebApp available offline from today
  • Article 4: TroubleShooting: TroubleShooting FireBase Login Authentication Failures
  • Keep in touch with Your Users: The Web Push feature
  • How to Debug? Debugging your PWA in Chrome
  • Enhanced Interaction: Use the Notification API for reminders
  • Chapter 8: Background Data Synchronization using Service Worker
  • Chapter nine: Problems and solutions in PWA practice
  • Resource Hint – Improving page loading performance and Experience
  • Part 11: Learning offline Strategies from workbox