SOHUM CHATTERJEE: I'm Sohum,
and I'm going to talk to
you about how you can easily turn
your website into a progressive Web App or
PWA for the sidebar in Microsoft Edge.
PWAs allow your website to be
more than just a regular browser tab,
and integrate natively with various surfaces.
For example, PWAs can be installed to desktop, mobile,
and mixed reality operating
systems packaged and distributed
through app stores like the Microsoft store
on Windows or Playstore on Android,
access hardware, sensors,
and localStorage build native widgets,
render offline, send notifications, and so much more.
In short, the developer promise or PWAs,
is that you can build once using web standards
that are implemented cross-browser and cross-platform,
and have your Web App adapt to
a variety of different devices and
contexts by making small incremental code announcements.
Today, we're focusing on a new such announcement that
allows your web app to be hosted
within the sidebar in Microsoft Edge.
The sidebar is a novel browser interface
for pinning and launching frequently used web apps.
When an app is launched from the sidebar,
the browser's frame is partitioned into a primary region
of tabs that comprise the user's main workflow,
and a secondary narrower pin to perform transient,
contextual or side-by-side tasks.
You've probably seen the sidebar popularized by
the new Bing chat and
copilot experiences that allow users to ask questions,
summarize information, or create texts and images
while staying within the context of their primary tab.
But the sidebar isn't just
limited to apps built by Microsoft.
It is intended to be a Canvas for you,
to showcase your web apps.
The sidebar presents a great opportunity for
web developers to reach new audiences,
and serve new multitasking scenarios
with existing websites and to
do so with
minimal incremental enhancements to existing code.
Let's take a look at how to build a sidebar app.
First, you need to configure your sites web app manifest,
which is a JSON file hosted on your server with
information about your apps appearance and capabilities.
Adding this manifest, by the way,
doesn't necessarily mean that your site is going to be
installable as a native mobile or desktop app.
If you wish to target only the sidebar,
simply set the display member to browser.
Next, add the edge site panel member to your manifest.
This signals that your Web App is
compatible with the sidebar
and can be promoted within it.
Edge will use this and
other members from your manifest including name,
short name descriptions,
icons, and categories to create UI that
allows users to easily discover and pin your sidebar app.
Your app should support a minimum width of
376 pixels and implement
a responsive user interface because
the sidebar is meant to be narrow
and can be resized by users.
If you're unable to start at
376 pixels for whatever reason,
you may override the default by
using the preferred Width property,
though it's strongly recommended to keep
this width as narrow as possible.
Finally, you can detect when your app is being used
within the sidebar to serve a tailored user experience.
You could choose to for example,
build a custom variant or repurpose one that was
designed for narrow mobile or tablet interfaces.
Sidebar apps will receive
a desktop user agent and you can
inspect the client hint for the Edge site battled brand.
Now, let's put these steps into practice and build
a real Sidebar App with Dave from meta.
DAVID OSSIM: Thank Sohum. Since Edge
first introduced the sidebar, Facebook,
Instagram, WhatsApp, and Messenger had been
top apps that highlight the best of this new feature.
That is family of apps aimed to bring people together.
The side-by-side experiences enabled by
the sidebar make it easier to see connected.
For example, I've used
it while chatting with my family on
messenger and browsing for
airfare together for an upcoming vacation.
Although native Sidebar App
bring more featured experiences,
the Sidebar App give people agree
option when they want to multitask.
A sealed browsing Instagram looks as a sidebar app.
Instagram was an easy fit for the sidebar
because it both has a responsive web layout,
and is already available as a progressive Web App.
Aside from a chain show web manifest there really wasn't
any additional effort required
to get the Sidebar App running.
It automatically picks up Instagram's latest changes,
doesn't require app updates and
supports features like notifications.
For example, without any new code,
when I receive a push notification on Instagram,
the sidebar displays a subtle badge,
and invites me to reengage whenever I get updates.
Because Instagram already had a web manifest
since we distribute a PWA through the Microsoft Store,
adding sidebar support was essentially a one-liner.
I just added the edge site panel member to
our web manifest so edges color can discover us.
Here's what that looks like.
All you need is the Edge site bell number,
and you can even specify
additional enhancements based on
how you want the Sidebar App to appear.
Whatever we include in the manifest like
icons or descriptions will
be picked up by the sidebar so people
can easily search for the apps in their catalog.
The last thing I want to mention is pro-grammatically
detecting the sidebar on the client or server-side.
Unlike some PWA surfaces,
the sidebar provides user agent client hints
in the differentiated user agent string.
That means we can classify web usage and measure
trends to help us prioritize how we invest in the Web.
We're really excited to see
the innovations in the Web like this and
bring new value to people from
our apps across the web and desktop.
Thanks, and [inaudible] Sohum.
SOHUM CHATTERJEE: We're excited to have
Meta-Build with us,
and we hope that you will too.
Microsoft Edge is committed to
amplify your investments in the web by
automatically promoting your Sidebar App
across multiple prominent UI surfaces.
For example, as we'll use
information from the web app manifest to create
listings in a personalized recommendation Feed
within the customized sidebar page,
no additional developer effort is required on your part.
We're also exploring in
browser UI that encourages users to
try out your sidebar app if it
meets certain criteria for relevance.
The sidebar is a new interface that we expect
will empower you to build for the Web in new ways,
and we envision these apps being able to
do much more in the coming months.
For instance, we're investigating ways
to map existing PWA features to the sidebar,
including app shortcuts that allow you to
Quick Launch to a specific page
or action within your app.
A dedicated start URL property
that will allow you to define
a custom landing page for
the sidebar and a richer notification system.
We also hope to standardize support across
similar sidebar interfaces by
collaborating with browser vendors
and the broader web community.
While the Edge site panel member is
implemented for Microsoft Edge only at present,
we are designing this feature via
a public explainer where we
welcome your collaboration and feedback.
Do take a look at our documentation and samples.
Use the public explainer to give us
feedback on our roadmap and design,
and add the Edge Site panel member
to your Web App manifest.
All of the bits needed to build
Sidebar App are available in Microsoft Edge today.