Modern Web Weekly #59

The modern web, tested and explain in plain English

Photo by Maccy on Unsplash

Install your PWA from anywhere

The dev trial for Microsoft’s proposal for the Web Install UI is now live.

This API adds the install method to navigator to install a web app on the user’s device. When navigator.install() is called without any arguments, the browser will prompt to install the current web app, meaning the web app hosted at the domain which the install method was called from.

// installs the current web app
navigator.install();

In essence, this is the same as calling the prompt() method of the BeforeInstallPromptEvent.

Where it really gets interesting is when a URL of an installable web app is given to install as the first argument:

// installs the web app at the given URL
navigator.install('https://whatpwacando.today');

This enables web apps to install other web apps, so you can now basically install a web app from anywhere. The web app located at the given URL needs to have a valid manifest.json file and navigator.install() needs to be called from a secure context (https). The app also needs to obtain permission to install web apps.

This opens use cases like installing related apps from the “main” app or a PWA app store, where web apps can be directly installed from.

Currently, this API doesn’t show the enhanced install UI, including the description and screenshots of the web app when it’s installed from another app. I filed an issue for this.

The Web Install API is available from Edge 139.0.3402.0 and Chrome 139.0.7258.0 behind a flag.

To enable, navigate to chrome://flags/ or edge://flags/ and search for "web-app-installation-api" in the search box. Toggle to “Enabled” and restart the browser.

Check out the Web Install API explainer for all the details and the demos.

---

Implicit anchors in Safari Tech Preview 223

Safari Tech Preview 223 now supports implicit anchors through the source option of the showPopover() and togglePopover() methods:

const invoker = document.querySelector('#invoker');
const popover = document.querySelector('#popover');

popover.showPopover({source: invoker});

This enables you to set invoker as an implicit anchor for popover that you can position it relatively to using Anchor Positioning. This is useful if you want to position the popover relative to multiple anchors programmatically:

This way, you can just define how you want to position the popover relative to any anchor, but you don’t need to explicitly define a position-anchor:

#popover {
  position-area: bottom span-right;
}

The showPopover() method will now implicitly set the anchor through its source property and position-area will define how it will be positioned.

Of course, you can also declaratively define the invoker (and therefore anchor) through popovertarget:

<button type="button" 
  popovertarget="popover" 
  popovertargetaction="toggle">1</button>

<button type="button" 
  popovertarget="popover" 
  popovertargetaction="toggle">2</button>

<button type="button" 
  popovertarget="popover" 
  popovertargetaction="toggle">3</button>

But if you don’t control the HTML you can implicitly define the anchor through showPopover() and togglePopover().

Check out this codepen for a demo.

Anchoring to pseudo-elements

As defined in the specs, the implicit anchor element of a pseudo-element is its origination element, so with this support for implicit anchors also comes the support to use pseudo-elements as anchors in Safari Tech Preview 223.

This means that, for example, you can use the thumb of a slider element as an anchor and display the value of the slider (<input type=”range”>) in a tooltip that is anchored to that thumb:

input[type="range"]::-webkit-slider-thumb {
  anchor-name: --tooltip;
}

Implicit anchors were already supported in Chromium-based browsers.

Check out this codepen for a demo.

---

Style an anchor-positioned element based on its fallback position

In Chrome 139+, you can now style anchor-positioned elements based on the fallback position that is applied to them using anchor queries.

An anchor query is a type of container query that applies styles to an anchor positioned element based on which fallback position applies to it.

You can check out this video by Una Kravetz on YouTube that explains the concept of anchor queries. This enabled me to finally finish a demo of an animated anchor-positioned menu that needed different animations based on the active fallback position:

As you can see in the video above, the menu expands in the direction of the opposite corner of the screen by expanding the width and height of a container <div> inside the menu.

The default position of the button is the top left corner of the screen, and when it’s clicked, the menu expands towards the bottom left of the screen. To accomplish this effect, the container <div> inside the menu is flex-positioned, and the menu itself is aligned with the bottom right corner of the container <div> so when it expands, the menu itself is revealed from its bottom right corner:

Menu revealed from its bottom right corner

The HTML looks like this:

<div id="menu" popover>
  <div id="menu-container">      
    <ul>
      <li>A menu item</li>
      <li>Another menu item</li>
      <li>A very looooong menu item</li>
    </ul>
  </div>
 </div>

The container <div> has this CSS to accomplish this effect:

#menu-container {
  justify-content: flex-end;
  align-items: flex-end;
}

However, when a fallback position is active, for example when the menu button is in the top right corner, the menu needs to expand towards the bottom left corner of the screen, so this CSS would need to be applied:

#menu-container {
  justify-content: flex-end;
  align-items: flex-start; // changed to flex-start
}

Before anchor queries, this wasn’t possible, as only the @position-try at-rule was available that only allows a limited list of CSS properties. Using anchor queries, we can now apply all CSS properties.

First, we need to define the container element, which will be the menu <div> with container-type:

#menu {
  container-type: anchored;
}

Then, we define an anchor query for the container <div> that applies its styles when the fallback position is active for when the menu button is in the top right corner of the screen:

#menu-container {

  // default styles
  justify-content: flex-end;
  align-items: flex-start;

  // styles for the fallback position "--bl"
  @container anchored(fallback: --bl) {
    justify-content: flex-end;
    align-items: flex-start;
  }
}

Now, when the fallback position “--bl” is active, align-items will have the value flex-start instead of flex-end.

This way, we can define anchor queries for all applicable fallback positions.

In addition to named fallback positions, you can also define anchor queries for fallback positions that use the flip keywords:

#menu {
  position-try-fallbacks: flip-block;
}

#menu-container {

  @container anchored(fallback: flip-block) {
    ...
  }
}

Keep in mind that anchor queries are container queries, so the styles inside these queries apply to an element inside the anchor positioned element and not the anchor positioned element itself, since that element is the container.

So in the case of the example above, the menu is the container, and the anchor query is defined inside the container <div> and not the menu itself. This wasn’t fully clear to me in the beginning.

Check out this codepen for the demo.

---

PWA Audit: on your way to a great PWA

Do you already have a PWA, but are you running into issues with performance, security, or functionality? Or are you not sure how to make your PWA better?

I can help you by running an audit of your PWA

I will evaluate it on more than 35 criteria and provide you with clear and actionable instructions on how to improve it. No generic stuff that you can get anywhere, but an in-depth quality checkup to get you on your way to a great PWA.

Some of the criteria I will evaluate it on are:

• Installability

• Cross-device and cross-platform compatibility

• Offline support

• Usability

• Effective use of modern web APIs

• Performance

• Security

Your investment in the improvement of your PWA through the audit is €599, excluding VAT (where applicable).

If you want to request an audit or first would like to know more, you can
fill out the form or book a call with me.