How can Firefox create the best support for web apps on the desktop?

[david-rubino]

Hi everyone, my name is David Rubino and I’m a product manager for Firefox. As the Firefox leadership team mentioned in the Reddit AMA last week, we’re taking a fresh look at Progressive Web Apps (PWAs), which have long been a top request from our Mozilla Connect community. Today I want to share a concept that aims to address some of this feedback. 

As you may know, we built a prototype for desktop PWAs a few years ago, and unfortunately user testing on our solution showed confusion and lack of perceived value. We didn’t release it because we didn’t have an approach that could meet the needs of power users without causing confusion among the broader user base. Recently, other browsers have implemented or enhanced their approach to PWAs, for example by making it easy to install any website as a web app (even if no PWA manifest is provided), and by running web apps in the same session as normal browser tabs. I was a user of these features, and so when I joined the Firefox Product Management team last year, I decided to take a fresh look at how Firefox might approach the problem. 

In this post you will see that I don’t use the term “PWA” and instead stick with the more generic “web app”. While there are some working definitions for what a PWA is and is not, most of the feedback from the Firefox community are requests for specific capabilities. So when considering what Firefox should do, I’m focusing on how we can offer features that help you get a more app-like experience for any website you choose, when you choose. 

There are many specific requests in the thread, but viewed through this lens a few emerge:

1. Web apps should appear with their own icons alongside traditional apps, both in places where you launch apps and where running apps are shown. 
2. Web apps should remain open until you close them. You should not be able to “navigate away” from them like a web page.
3. Like many mobile apps, desktop web apps should be able to handle links to their website in lieu of having them opened in a normal browser window. 

It’s possible to take the web app concept further than is needed, into the realm of making web apps be as app-like as possible. This can make it seem like you’re not using a web browser or a website at all. Some examples of this might be having PWAs be installed and uninstalled using the OS, removing all or nearly-all of the browser “frame”, and limiting access to common browser features like bookmarks and search. While some of these may turn out to be beneficial, it’s not a goal to make it feel like you’re not in Firefox.

In fact, contrary to the notion that web apps should be “installed” like regular apps, a core idea of this concept is that running a web app should be thought of as moving a tab to your taskbar or dock... a one-step operation that can be undone just as easily. 

So what might this experience look like? Let’s look at the following topics:

1. Moving into and out of a web app “mode”
2. Offering a different browser UI for a web app
3. Browsing within and between sites
4. Integrating with the operating system

Moving into and out of a web app “mode”

As stated above, you should be able to take any tab and move it into web app mode in one step. When you take this action, the tab would be moved into a new web app window, maintaining the state of the web page entirely. You could even be watching a video, and it won’t miss a frame. There would be no setup. Each website will have some preferences associated with it, but the intent will be to have sensible defaults that work for most people, informed by a manifest if the site offers one. Moving a tab back out of this mode will be just as simple. 

Offering a different browser UI for a web app

Web apps are still websites in a web browser, so the goal will be to fully maintain access to features that help you with the website itself, while de emphasizing features that are about managing multiple websites. Some examples:

• No tabs or bookmarks bar by default, but these could be enabled in web app preferences
• The main toolbar would be fully enabled, including the address bar and extensions 
• A new toolbar section would show the icon of the website prominently, clearly indicating you’re in web app mode for a given site. This section would offer access to settings and controls for the web app.
• In lieu of a new tab button, there would be buttons to open a new tab in a normal Firefox window, or a new instance of the current web app. 
• The address bar would not be read-only, offering easy access to Firefox Suggest and the ability to search. Web pages opened from here would land in a new tab in a regular Firefox window. 

Browsing within and between sites

One of the key differences between a normal mode webpage and a web app is that you shouldn’t be able to “navigate away” from a web app. To exit a web app you have to explicitly close it. To accomplish this, each web app would be a “single site browser”. Navigations within the current website will remain in the app, and navigations outside the current website will open in a normal Firefox window. There will be exceptions to help with login flows and redirections so that a web app feels as much as possible like an app that only opens a browser when opening a truly external page. 

We would also introduce “link capture”, which would allow a web app to register itself to handle URLs within its scope. For example, if you click on a link to reddit.com in a normal Firefox window, the link would open in the Reddit web app. This behavior is analogous to how mobile browsers redirect links to registered mobile apps. 

Integrating with the operating system

On Windows, it is straightforward to show web apps separately on the taskbar using differentiated icons, to allow them to be pinned, to show them in the Start menu, in the ALT+TAB and window snap experience, and so on. This allows quick access to web apps using the same surfaces used to run or switch between regular apps. By “leveling up” to the taskbar websites you leave running and revisit often, you can save time over hunting for them in Firefox. 

This behavior may be more challenging to implement on macOS and is likely to have some limitations comparatively. You should expect that if we build a prototype, it will begin as a Windows-only feature. Once proven we would bring it to our other desktop platforms leveraging the features supported by them. 

Please let us know what you think!

I am hopeful Firefox can bring a web app experience to the desktop that will feel natural to all users, while supporting the needs of our power users. In particular, I think we can improve upon the current experience offered by other web browsers by offering one-step setup, retaining access to core browser features, and allowing links to be “captured” automatically. 

We are looking to make progress in this area soon, so I would love to get a discussion going about what is right and wrong and missing from this set of ideas. While I did read every post in the Ideas thread, I am aware I did not address every topic mentioned, so please especially bring up what I skipped that is important to you. 

Thanks in advance!

-David Rubino
Product Manager
Mozilla Firefox

[jscher2000]

Hi David, I think that will be useful. I had three thoughts while reading this:

(1) The site-dedicated behavior of the single-document web app window sounds similar to a pinned tab, which makes sense considering that pinned tabs were originally called app tabs.

I think it would make sense to enhance the functionality of pinned tabs in parallel with the web app windows to minimize unnecessary differences. You might also want to allow a user the ability to move a web app window to a pinned tab in a regular window, and vice versa, to move a pinned tab to a web app window. And it may make sense to treat the two the same for session restore purposes.

(2) If I capture links and dedicate them to the web app window, I may be annoyed by losing my place rather than having a new tab open.

Could the captured links be queued for user action to display rather than triggering immediate navigation? Perhaps this could be managed with a toolbar button list or a sidebar.

(3) Enabling the address bar and main toolbar would address complaints about extensions not operating as expected in the PWA prototype. I hope the team will consider whether to make the same features operable in feature-specified pop-up windows for consistency.

(For reference, I mean the type of window opened by the third link here: https://www.jeffersonscher.com/res/popit.html)

[suikaz]

regarding links to the outside of the app: make sure to pass them to the OS, don't keep them trapped inside of one browser

user is allowed to choose the default handler however they like and one of the big issues with Chromium PWA is the fact they keep navigation trapped and external links open in the PWA browser instead of the default handler

another issue I have related to that comes from Fenix: when you tap external link in it it opens custom tab "within" PWA instead of passing it through the OS and I'd love that changed

also it feels like Fenix has a special list of apps that can be run in PWA mode and all others only do a shortcut pin, even when they work in Chromium browsers

[dannycolin]

---

Offering a different browser UI for a web app

---

Would it also support Container Tabs? For example, I regularly use 2 separated gmail accounts that I open in a different container so I can have them open side-by-side instead of switching accounts in gmail itself. With Webapp Mode, I'd still want to retain the ability to have two separated single-tab browser.

[Oneeyedziggy]

I'm working on a PWA now and would love to be able to send notifications without involving a server... It's nuts that the current APIs seemingly require a server to trigger the push notification api to wake the app to send a notification...

Also silly you can't really schedule notifications, just setTimeouts and write a custom system to manage and interrupt/re-schedule them if you don't just want a potentially unlimited number of long-running setTimeouts... But that seems like the only option for the time being

[amanitamc]

What is a "lieu"? Please use simpler speech I never heard that word in my life.

[00FF00]

basically it just means alternatively, or instead of. which fun fact, TIL where the word instead comes from

>Like many mobile apps, desktop web apps should be able to handle links to their website in lieu of having them opened in a normal browser window.

so that is basically saying "desktop web apps should be able to handle links to their website [as opposed to / alternatively to / instead of/ rather than] a normal browser window.

in other, other words, "desktop web apps should handle links to their website inside the PWA/web-app and not open in a normal browser window"

[david-rubino]

Apologies. It's just a different way of saying "instead of".

[RabN]

I'm sure that you have already taken a look at the PWAs for Firefox addon. It accomplishes most if what you describe for the end user. Their implementation allows web apps to run in their own "containers," which is helpful, but could be improved. Web apps should be able to use addons if desired, which should be customizable for each app.

Apps should have the ability to open links in the default browser if chosen.

I love that you will plan to use an implementation that will allow for any site to be installed as an app. That is a key feature because many sites that are designed as apps may not be set up as PWAs.

An address bar in a web app makes no sense me. Having it available in a menu or behind a click is understandable, but I would like to use a webapp as a standalone app as much as possible, not waste screen real estate on browser elements. If an app is well designed, there should never be a need to interact with an address bar or other browser elements (with the likely exception of the back navigation). PWAs for Firefox handles this very well.

Web apps should be easy to manage through a settings menu. I should be able to add or delete an app from a list, as well as adjust individual settings, such as whether it is running in an individual container or one of my existing containers, which addons are active in the app, permissions like camera and mic, and ideally even options like changing the default zoom and text size, or toggling hardware acceleration. I've found it is also essential to be able to change the icon manually.

Others may find it useful to combine/merge webapps into a browser window as tabs, but such a feature has no value to me. As much as possible, a web app should behave as an installed app, with the browser acting as a backbone, and as invisible as possible.

It's a small thing, but a web app window should open in the same state and size/aspect that it was last closed.

That's my wishlist and suggestions. Some of it may run counter to the direction you are headed, but I hope you'll be able to implement as much as possible. This is a big leap in the right direction! Thank you for the work you do.

[00FF00]

i use PWA's quite a bit via edge currently, for certain websites, but would definitely use them in firefox instead of edge if it was implemented. i guess the thing i would like is the ease of setup like edge has where its basically a one click step, and since im always focused on the cosmetic differences of websites lol maybe have a way for each installed webapp to have a simple setup for using its own font and website color layout, along with if it does have a toolbar (which i think it should have some kind of toolbar, just no url bar) allowing a different theme to be set, maybe using the firefox colors theme builder add on? i guess im not sure how complicated that all would be - but it would be neat!

i guess at that point it would almost be like having multiple installations of firefox, like i have the regular version and then another version, and they each have different website color/font layouts and different themes

also from the discussion thread on reddit sharing this post:

>from u/feelspeaceman: Here we go PWA, it's pretty nice to have as someone who regularly using Floorp's PWA, having web app pinning in Taskbar can be lifesaver, for example pinning Weather App, World Clock App or Photopea, it's really helpful and it improves my workflow.

>from u/oneeyedziggy: Working on a PWA now and would love offline scheduled notifications to be more possible... Its absurd that the current apis basically preclude something as simple as an alarm app or anything with scheduled reminders without a server sending push notifications ( i think... I'm also still working around the rediculous state of the notification API on Android vs desktop )

[Rayke]

In Firefox I use Javascript bookmarks which open the pages I wan't to act like PWAs as popups. This gives me almost everything I want in a PWA.

When I click a link in the popup it opens the link in a new tab in the main browser instance. The URL is immutable and acts like a title bar for me so that I can see the domain.

As a Sway WM user the main thing that I want is a constant, predictable appid/class-instance that is always the same for every launch of a window through it's entire lifetime which is what Chromium based PWAs have.

I imagine that would probably be nescessary anyway if you want to implement custom icons under linux since that would probably be tied to the window class.

I use those unique properties to automatically move windows to a specific workspace on my 3-monitor setup and it greatly reduces the amount of window management I have to manually attend to.

I have a workaround for Firefox but it is not elegant and requires a bash script running in the background to detect the windows and watch for my specific title that I provided in my javascript bookmark.

The other things follow what everyone else wants, mainly to be able to launch the PWA from my desktop environment instead of having to do it from Firefox.

I build nightly myself and have been enjoying the new functionality including the new sidebar tabs. This is even more exciting, it would make my year.