What’s new in Chrome 76 for PWAs

Chrome is the leading browser with a market share of over 63% worldwide. Since Google is behind PWA, Chrome has become the leading browser for implementing new features for progressive web apps.

Lately, a new version of chrome was release. With Chrome 76 PWA has just become even more accessible.

1. Install button in the address bar
2. Customizing the mini-infobar for PWAs
3. Faster updates of WebAPK
4. Dark mode

Install button in the address bar.

Now Chrome will show a plus icon in the address bar. This will allow users to install the PWA through the Omnibox on their desktop for Windows and in Applications folder for Mac.

Customizing the mini-infobar for PWAs

Now Chrome allows developers to customize the mini-infobar by disabling the default install prompt.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

And customize the UI to let your visitors know how to install your PWA. For more details visit google documentation.

Faster updates of WebAPK

Now Chrome will check the manifest every day instead of every 3 days. So if you have updated the Icons, Colors of Name, Chrome will know about it in the next 24 hours and install a new WebAPK.

Dark mode

It is now a common feature among many operating systems to have a Dark mode or a Dark theme. Now you can use a CSS media query to adjust your styles accordingly.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Original post on @VueFront Medium