Noodling on an idea: Projections for Web Apps

For the last few months I’ve been thinking about the many ways native applications can expose information and/or focused tasks within operating systems. Examples of this include Android Homescreen Widgets, macOS Dashboard and Today Panel Widgets, Windows Live Tiles, the Apple Touch Bar, and so on. When building app experiences as Progressive Web Apps, it could be very useful to be able to project aspects of the web app onto these surfaces (hence, “projections”).

Here are a few use cases:

  • A streaming video service could offer access to all of the shows or movies you have in your queue that is distinct from the actual player. It might live in a widget on one device, but, with access to all of the plumbing of the PWA itself, could enable users to control the services’ PWA running on the user’s smart TV.
  • A stock tracking app could offer a widget for viewing current stock prices for stocks you are watching.
  • A calendar service could provide a daily agenda at a glance.
  • A music identification service could have a button widget that, when clicked, would access the microphone and attempt to ID the currently playing song.

Given that the web is responsive, the actual projection surface’s dimensions should not matter much. The projection would merely adapt to the available real estate. Some might even be resizable based on user preference.

These are very similar to additional windows in the traditional browser context, but would probably need to be plumbed quite differently.

Anyway, that’s the quick and dirty pitch. What do y’all think? Would you use a feature like this? Is it worth me spending some more time fleshing it out?

4 Likes

Other use cases: Samsung Daily Cards and Mini App Widgets.

I really like this idea, and think it has potential!

Any idea how this would work in reality? I assume there would be a service worker component, so data can be updated in the background?

Is the concept similar to extending the functionality of PictureInPictureWindow?

Reminds me a bit of this old Blackberry 10 API:

https://developer.blackberry.com/html5/apis/v2_2/blackberry.ui.cover.html