Chrome 88 is starting to roll out to stable now.

Here’s what you need to know:

I’m Pete LePage, working, and shooting
from home, let’s dive in and see what’s new for developers in Chrome 88!

Manifest v3

Chrome 88 now supports extensions built with manifest v3, and you
can upload them to the Chrome Web Store. Manifest v3 is a new extension
platform, that makes Chrome extensions more secure, performant, and privacy
respecting, by default.

For example, it disallows remotely hosted code, which helps Chrome Web Store
reviewers better understand what risks an extension poses. And should allow you
to update your extensions faster.

It introduces service workers as a replacement for background pages. Since
service workers are only resident in memory when needed, extensions will use
less system resources.

And to give users greater visibility and control over how extensions use and
share their data, in a future release we will be adopting a new install flow
that allows users to withhold sensitive permissions at install time.

Check out developer.chrome.com
for complete details, and how to migrate your current extension to manifest v3.

CSS aspect-ratio property

Normally, only some elements have an aspect ratio, for example images.
For them, if only the width, or the height, is specified, the other is
automatically computed using the intrinsic aspect ratio.

<!-- Height is auto-computed from width & aspect ratio -->
<img src="..." style="width: 800px;">

In Chrome 88, the aspect-ratio property allows you to explicitly specify an
aspect ratio, enabling a similar behavior.

.square {
  aspect-ratio: 1 / 1;
}

You can also use progressive enhancement to check if it’s supported in the
browser, and apply a fallback if necessary. Then, with the new CSS 4 not
selector, you can make your code a little cleaner!

.square {
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .square {
    height: 4rem;
    width: 4rem;
  }
}

Thanks to Jen Simmons
for calling out this is supported in the latest Safari Technical Preview,
so we should see it in Safari soon! And check out
Una’s demo to see it in action.

Heavy throttling of chained JS timers

Chrome 88 will heavily throttle chained JavaScript timers for hidden pages in
particular conditions. This will reduce CPU usage, which will also reduce
battery usage. There are some edge cases where this will change behavior,
but timers are often used where a different API would be more efficient, and
more reliable.

That was pretty jargon heavy, and a bit ambiguous, so check out Jake’s article
Heavy throttling of chained JS timers beginning in Chrome 88
on developer.chrome.com for all the details.

Play billing in Trusted Web Activity

You can now use Play Billing in your Trusted Web Activity to sell digital
goods and subscriptions using the new Digital Goods API. It’s available as an
origin trial in Chrome 88 on Android, and we expect it to expand the origin
trial to Chrome OS in the next release.

Once your accounts are set-up, update your Trusted Web Activity to enable Play
billing, and create your digital goods in the Play Developer Console. Then,
in your PWA, add your origin trial token, and you’re ready to add the code
to check for existing purchases, query for available purchases, and make new
purchases.

// Get list of potential digital goods

const itemService =
  await window.getDigitalGoodsService("https://play.google.com/billing");

const details =
  await itemService.getDetails(['ripe_bananas', 'walnuts', 'pecans' ]);

Adriana and Andre go into more detail in their Chrome Dev Summit talk –
What’s new for web apps in Play,
or check out the docs.

And more

And of course there’s plenty more.

  • To conform to a change in the HTML standard, anchor tags with target="_blank"
    will now imply rel="no-opener" by default, this helps prevent
    tab-napping attacks.
  • Most operating systems enable mouse acceleration by default, but that can be
    a problem for some games. In Chrome 88, the Pointer Lock API allows you to
    disable mouse acceleration.
    That means the same physical motion, slow or fast, results in the same
    rotation, providing a better gaming experience and higher accuracy.
  • And addEventListener now takes an Abort Signal as an option.
    Calling abort() removes that event listener, making it easy to shut down
    event listeners when no longer needed.

Further reading

This covers only some of the key highlights. Check the links below for
additional changes in Chrome 87.

Subscribe

Want to stay up to date with our videos, then subscribe
to our Chrome Developers YouTube channel,
and you’ll get an email notification whenever we launch a new video.

I’m Pete LePage, and as soon as Chrome 89 is released, I’ll be right here to
tell you — what’s new in Chrome!

Feedback

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had the information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had accurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was easy to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

No

What was the worst thing about this page?

It didn’t help me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was missing information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had inaccurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was hard to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.





Source link

Write A Comment