Modern Web Weekly #1

Hi there and welcome to the very first edition of Modern Web Weekly, a newsletter on what the modern web platform is capable of, Web Components, and Progressive Web Apps.

In this edition: a better install UI for PWAs, Webcontainers now supported everywhere, server-side rendering Web Components, and more.

A better install UI for PWAs

If you install a PWA, you can now add a description and screenshots of the app to the manifest.json file which will be shown to users when they install your app, similar to what you get when you install a native app from an app store.

You do this by adding a description field and an array screenshots to manifest.json like this:

"description": "My awesome PWA", 
"screenshots": [
    {
     "src": "source/image1.gif",
      "sizes": "640x320",
      "type": "image/gif",
      "form_factor": "wide",
      "label": "Wonder Widgets"
    },
    {
     "src": "source/image2.gif",
      "sizes": "1280x320",
      "type": "image/gif",
      "form_factor": "narrow",
      "label": "Wonder Widgets"
    }
]

What wasn't immediately clear to me is that images specified in screenshots with form_factor: narrow are only shown on mobile phones and images with form_factor: wide are only shown on desktop.

I wasted some hours trying to find out why I didn't get the improved UI on desktop until I realized I had only specified images with form_factor: narrow.

There are a couple of other criteria that screenshots must follow and Adriana Jana has all the details.

Server-side rendering a Web Component

With Declarative Shadow DOM you can render your Web Components on the server to create a blazing fast user experience.

Danny Moerkerke wrote a detailed guide on this topic that explains all the details.

Node.js in the browser???

Yep, you read that right! You can now run node.js apps right in your browser.

A complete dev environment that boots up in milliseconds, supports Chrome dev tools, and has access to your local file system.

Oh, and it's now supported in Safari on MacOS, iOS, and iPadOS as well.

The state of Web Components

Recently, the W3C Web Components Community Group joined to discuss new Web Component standards and platform improvements.

Rob Eisenberg runs you through the topics that were discussed and their outcomes in his Web Components 2023 Spring Update post.

How to make a <dialog> return a value

Here's how you can have a native <dialog> HTML element return a value when it's closed. This is a very common use case: based on which button inside a <dialog> it is closed with, a certain action needs to be performed

Let's say you click an icon to delete an item from a list and a confirmation <dialog> is shown containing two buttons: one to confirm and delete the item and one to cancel. Both buttons should close the <dialog> but only the "delete" button should delete the item.

We therefore need to detect which button was clicked so we can attach a "click" event handler to both buttons, delete the item when the "delete" button was clicked and then close the <dialog>. But there is a much easier way.

We add both buttons as submit buttons to the <dialog> and wrap them in a form with method="dialog". We then give each button a "value" property with the return value we need to detect which button was clicked.

This value will populate the <dialog>'s returnValue property.

When one of the buttons is clicked the <dialog> will close and its "close" event will be fired. We attach a handler for this event and inspect the <dialog>'s returnValue property to see which button was clicked.

Here's a codepen demonstrating this:

Is your browser Fugu?

Project Fugu is a cross-company effort with the objective of making it possible for web apps to do anything iOS, Android, or desktop apps can, by exposing the capabilities of these platforms to the web platform.

Want to know how Fugu is your browser? Here you go.