187 Followers
·
Follow

What’s new in Chrome 76 for PWAs

Image for post
Image for post

You all know how hyped we are around PWAs at VueFront. VueFront was built as a SPA and PWA out-of-the-box. So when we hear that the most used browser in the world is adopting more features for PWAs, we cracked a bottle of our finest campaign.

Here is a short summary of the cool new features that await us:

  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 and let the user install the PWA through the Omnibox.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Your site has to meet the PWA criteria for Chrome to display this option. Also, at the moment this feature is disabled by default. To turn it on, you will need to activate it in the chrome flag settings.

How to enable Omnibox-install for PWA?

  1. In Chrome address bar type: chrome://flags/#enable-desktop-pwas-omnibox-install
Image for post
Image for post
  1. Enable Desktop PWAs installable from the omnibox
  2. Relaunch the browser.

You can now test this feature. Here are some PWAs you can check out:

  1. VueFront
  2. Starbucks
  3. Villagedentalmedicine.com
  4. Uber.com

When Installing the PWA app, it will be added to your Application folder on Mac or Desktop on Windows and accessible like any other Desktop application.

Image for post
Image for post

Also if you have the current app installed, instead of the plus icon you will see a link icon to open the desktop app.

Image for post
Image for post

This small feature will make it super simple to install a PWA on your desktop, and making it accessible like any other desktop app.

Customizing the mini-infobar for PWAs

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

Image for post
Image for post

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:

Image for post
Image for post

Faster updates of WebAPKs.

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

Image for post
Image for post

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;
}
}

Check out Tom’s post for more details.

And more

There are more features in Chrome 76. You can check them out here https://developers.google.com/web/updates/2019/07/nic76#more

Personally, I am really excited about the PWA install feature and Dark mode. VueFront is already a PWA and soon will support Dark mode. Let me know what features are you most excited about in the comments below.

Enjoy!

Written by

Vue Powered agnostic frontend for your old-fashioned Blog and E-commerce site. https://discord.gg/C9vcTCQ

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store