Modern Web Weekly #65

The modern web, tested and explained in plain English

Nov 21, 2025

Web Install API now in Chrome 143

Chrome 143 now supports the Web Install API as an origin trial.

This API provides a declarative way of installing web apps through navigator.install().

When it’s called without arguments, it installs the current web app (the one on the domain where this method is called from:

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

A nice feature of the API is that it enables web apps to install other web apps. To install another web app from your own domain, call navigator.install with the URL of the web app and its Computed App ID as the second argument:

// installs the web app at otherdomain.com
navigator.install(
  'https://otherdomain.com', 
  ‘https://otherdomain.com/app-id’
);

To find the Computed app ID, open the Application tab in the Chrome DevTools, click “Manifest” on the left, and look for the “Computed app ID” field in the right pane:

Computed APP ID of What PWA Can Do Today

If you have a value for the “id” field in manifest.json, this will be concatenated to the URL of your web app. If you don’t, the “start_url” field will be used as the Computed App ID. If the second argument is not the correct ID, a DataError will be thrown.

When navigator.install() is called, the native installation dialog is opened, which may contain screenshots of the app if these have been added to manifest.json.

When navigator.install(’https://otherdomain.com’, ‘https://otherdomain.com/app-id’) is called to install a web app on another domain, only the standard dialog is opened without screenshots, even if these are present in manifest.json of that web app.

This should change in the future, so the enhanced install UI should also be displayed when you try to install a web app from another domain.

Here’s a screen recording of the installation of https://store.app from https://whatpwacando.today:

Check out the demo and Web Install API explainer for all the details. To register for the origin trial, go here.

Incoming calls for your web app

You can already build a chat app including audio and video (like WhatsApp) with WebRTC, but it was never possible to display an incoming call screen like native apps can do.

Microsoft has now launched an origin trial for incoming call notifications, an extension to the Notifications API, that enables web apps to display a special kind of push notification that is persistent and plays a ringtone.

The origin trial is also available in Chrome, but currently it’s only supported in Edge 140+ on Windows.

To display an incoming call notification, set the scenario property of the options object to “incoming-call”:

const registration = await navigator.serviceWorker.getRegistration();

registration.showNotification('Incoming call', {
  scenario: 'incoming-call',
  ...
});

You can make this part of the “push” event handler of the service worker so the incoming call notification can also be displayed when the app is not running:

self.addEventListener('push', e = {
  const data = e.data.json();
  const {title, message, isIncomingCall} = data;

  const options = {
    message: body
  };

  if(isIncomingCall) {
    options.scenario = 'incoming-call';

    options.actions = [
      {
        action: “accept-audio-call”,
        title: “audio”,
        icon: “https://somedomain.com/src/img/audio-call.png”
      },
      {
        action: “accept-video-call”,
        title: “video”,
        icon: “https://somedomain.com/src/img/video-call.png”
      }
    ];
  }

  try {
    await self.registration.showNotification(title, options);
  } 
  catch (err) {
    console.error(err);
  }
});

Here is a screen recording of Edge on Windows. Turn on the sound to hear the ringtone:

In the future, this should be supported on mobile platforms where it should display a (fullscreen) incoming call notification just like you get when you receive a regular call.

This API is currently under development, so it’s subject to change.

Check the demo and the explainer for more details.

`<code-snippet>` now has updating syntax highlighting

In Modern Web Weekly #42, I wrote about the CSS Custom Highlight API and my code-snippet web component that provides pure CSS syntax highlighting for JavaScript, HTML, and CSS.

Historically, syntax highlighting was implemented by tokenizing the code and then wrapping each token in a <span> to add a different font color to it.

I have now updated this web component to allow editable code with syntax highlighting that updates when you type or paste content.

You can add the contenteditable attribute to the <span> that holds the code in a certain language:

<code-snippet>
  
  <span lang=”javascript” contenteditable>
console.log(’hello there’)    
  </span>
  
</code-snippet>

Now, the code is editable, and the web component adds event handlers to update the syntax highlighting when it’s changed through typing or pasting.

You can find the code-snippet web component on Github.

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 $499, 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.

Modern Web Weekly