Documentation

Service Worker debugging / emptying Offline caches etc.

Maybe your site freezes after installing the Service Worker or you want to extend the Service Worker with your own functions. The following link explains how you can use the Service Worker Debugger in your browser.

Link: https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/

For the development you should use Google Chrome. You can enable debug mode in the add-on's settings. In the console of your browser you will now see error outputs displayed.

Customize loading screen

To adjust the loading screen, you can adjust the colors in the settings.

If you want to change the complete layout, e.g. add a logo or display a normal loading bar instead of a circle, you can overwrite the following JavaScript functions:

- PWAClient.loadingScreen.show

- PWAClient.loadingScreen.hide

- PWAClient.loadingScreen.updateProgress

By the way, the loading screen is based on the JavaScript library "progressbar.js". Here you can be inspired by the examples.

Link: https://kimmobrunfeldt.github.io/progressbar.js/

Of course you can also use a completely different library.

Splash-Screen and App-Icon

For best results, keep to the following rules:

  • Upload .png files for best result
  • Make sure your color profile is set to RGB if you get an unknown error!
  • Do not use transparency in your images
  • Do not round off your images, this is not necessary
  • Recommended minimal resolution for icon is 1024px x 1024px
  • Recommended minimal resolution for splash is 2208px x 2208px

Should you have a timeout problem’s after setting the icons - don’t worry. That’s because your system resources are limited. Simply reload the page a few times until all the graphics are generated