Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

API to "install" a web application #84

Closed
marcoscaceres opened this issue Apr 17, 2018 · 20 comments
Closed

API to "install" a web application #84

marcoscaceres opened this issue Apr 17, 2018 · 20 comments
Labels
venue: W3C Specifications in W3C Working Groups

Comments

@marcoscaceres
Copy link
Contributor

marcoscaceres commented Apr 17, 2018

Request for Mozilla Position on an Emerging Web Specification

Relevant folks at Mozilla: @andreasbovens, @snorp.

Other information

This is a request for position on a potential feature, not the web manifest spec itself.

tl;dr: should we add an .install() method and .checkIfInstalled() (not final names), to allow web applications to be installed? If yes, what security/privacy characteristics should such an API have? Or will we end up with "🚨INSTALL MY WEEEEB APPPS NOW!!!🚨" buttons all over the web?

The web manifest spec provides basic information about a web application, such as icons, name, preferred orientation, etc. As of 2018, the Web Manifest spec has facilitated the ability to "add [a web application] to homescreen" in Chrome, Firefox for Android, Microsoft Edge, and, very recently, Safari in iOS.

In architecting the web manifest spec, we (the spec Editors) deliberately resisted adding an API that would allow sites to explicitly request installation (i.e., an .install() method). Our hope was that browsers would provide innovative UX solutions to informing a user that a web application is "installable" (whatever that may mean on the OS or browser).

We now find ourselves basically ~5 years on and we've seen various approaches, but none of them are ideal.

Installability signals

Installability signals were a set of UA-specific heuristics championed original by Chrome, that, if met, the browser displayed:

This had a few issues:

  • The banner popup was unpredictable. Chrome kept having to adjust their heuristics in a way that would make interoperability a challenge.
  • could interrupt the user while they were performing a task (or just reading content).
  • Was quite disruptive, covering significant part of the content.

BeforeInstallPromptEvent

In order to give control back to developers, Chrome folks proposed a BeforeInstallPromptEvent that notified developers before the install prompt above was shown.

The purpose was to, preventDefault(), and give the developer an opportunity show their own "install button". The BeforeInstallPromptEvent, then provided a .prompt() method, that showed the install banner.

window.addEventListener("beforeinstallprompt", event => {
  // Suppress automatic prompting.
  event.preventDefault();

  // Show the (disabled-by-default) install button. This button
  // resolves the installButtonClicked promise when clicked.
  installButton.disabled = false;

  // Wait for the user to click the button.
  installButton.addEventListener("click", async e => {
    // The prompt() method can only be used once.
    installButton.disabled = true;

    // Show the prompt.
    const { userChoice } = await event.prompt();
    console.info(`user choice was: ${userChoice}`);
  });
});

However, this API was somewhat clunky and racy, in that it could fine sporadically.

Ambient badging

Opera software pioneered ambient badging:

This also suffered from discoverability issues. It's not immediately obvious to users that they can install the application.

Complex menus to get to "add to homescreen"

Even before iOS added web manifest support, developers were UA sniffing to point to users as to where they need to click to install a web application:

screenshot 2018-04-17 11 48 22

The above situation did not change in the recent release of Safari on iOS: developers still need to do UA sniffing and explicitly point to parts of the browser's UI to encourage users to install a web application.

Do we need an install API?

Reflecting on the approaches we (implementers) tried, over the last few years, it feels like we succeeded in surfacing that web apps were "installable"... but failed to create UXs that meets the needs of developers in an interoperable manner.

It might be time to reconsider adding an Install API. Basically, the requirements we have:

  • Must be "SecureContext".
  • Must be triggered by user activation.
  • By default, only exposed on top-level browsing context.
  • Optional, time limited (like pop-up blocker rules or rate-limited payment request).
  • Must provide a means to check if app is already installed - so not to show an install button unnecessarily.
  • For backwards compat, browsers can continue to use ambient badging, installability signals, etc. That is, we don't need to tie it explicitly to the web manifest itself.

Thoughts?

@annevk
Copy link
Contributor

annevk commented Apr 17, 2018

It feels early given that we haven't quite agreed on what it means to be "installed" (seems like the wrong word, since you can already use the site). There's also no cross-platform implementation of that idea in Firefox.

@marcoscaceres
Copy link
Contributor Author

It feels early given that we haven't quite agreed on what it means to be "installed"

Depends on who "we" is above.

The folks working on the spec do have pretty good agreement, and they leave "install" up to the OS - it's fairly clear what this looks like in iOS and Android, at least (indistinguishable from a native application in every and all respects). I think it's similar in Windows from what I've read, but I've honestly not checked.

When "we" is Mozilla, then correct - we don't have agreement. We should get agreement, as we risk getting left out of the discussion by all the supporting implementations (and whatever Firefox on mobile ends up doing).

If "we" is WHATWG/HTML, then also correct I guess.

The spec defines "installed" as:

A common use case of a manifest is for a user agent to install a web application; whereby the user agent provides the end-user with a means of instantiating a new top-level browsing context that has the manifest's members applied to it. That is, the manifest's members, or their defaults, are in effect on the top-level browsing context. This distinguishes an installed web application from a traditional bookmark, as opening a web page from a traditional bookmark will not have the manifest's properties applied to it.

There's also no cross-platform implementation of that idea in Firefox.

Correct. That's part of the discussion. I'm not sure how much we want to discuss products (I'm all for having that discussion tho) - but I'm more interested in "is this good for the web" right now.

@MatteoWebDeveloper
Copy link

@annevk I think it would be a step backward to do not define it as install.

@firtman Also is advocating for a install button
https://twitter.com/firt/status/983848689251901440

I agree it should depend on how the OS consider the web app.
Right now on Android when you want to remove a PWA from Android it say uninstall app and it does not say remove from homescreen, the existent behaviour is inconsistent.

@tomayac
Copy link
Contributor

tomayac commented Apr 17, 2018

From every single partner I work with the one thing I hear every single time is that they want predictability and control over when the prompt would be shown.

@benfrancis
Copy link

benfrancis commented Apr 18, 2018

It's interesting that we have in some ways come full circle, in that the mozApps API had install() and checkInstalled() methods.

The main intended use case for that install function was actually for third party app stores to be able to install web apps from the store's web interface, as opposed to apps installing themselves. It was combined with an installs_allowed_from member of the app manifest which defined which app stores were allowed to install the app (anyone by default). In the end we didn't really see third party app stores emerge because many APIs required apps to be packaged and signed by Mozilla which resulted in centralisation around the Firefox Marketplace. Probably for that same reason, and the fact this was a vendor prefixed API only supported in Firefox, we didn't really see install buttons pop up all over the web either. However, I can see that being a real risk for a cross-browser implementation and it could easily result in a lot of irritating app-specific install banners and prompts, as evidenced by the widespread use of prompts to install native apps.

I'm personally not convinced that the UI design space for user agents taking responsibility for this install flow has been entirely explored. I suspect that a combination of "ambient badging" and a careful use of prompts to direct users' attention could still solve this problem in a consistent and unobtrusive way, without having to hand the responsibility off to app developers.

For example, I once proposed using an app icon in the URL bar for ambient badging in Firefox whereby the app could be installed from the Control Centre, with occasional prompts to point users towards this function. It could be that this app icon appears much more predictably as app developers would like (e.g. just based on the presence of a manifest link relation in the page), and that prompts to draw attention to the icon are displayed based on browser-specific quality and usage metrics, and can be disabled by the user.

firefox_pwa

On balance I would personally suggest that the risks of exposing an install() method to apps currently outweigh the benefits and that we should allow more time for browsers to explore different solutions before resorting to that approach.

@MatteoWebDeveloper
Copy link

@benfrancis
Maybe a better name for install() is the following
Install.requestPermission().then(()=> {});

I think browser will be able to solve 50% of the problem but not fully because most of the users do not know how to use the browser fully and that's why we still need to create custom banner for various feature of the browser. I think in the end developer and browser eng will need meet half way to solve this problem properly.

@FluorescentHallucinogen

It would be great to be able to install (add to home screen) PWAs without visiting them (install by web app URL).

Motivation:

@FluorescentHallucinogen

Chrome already supports custom install buttons. See https://www.chromestatus.com and https://airhorner.com in Chrome for Android.

More info: https://paul.kinlan.me/onappinstalled/

chromestatus

airhorner

@MatteoWebDeveloper
Copy link

@FluorescentHallucinogen yes you can trigger the install but you can't have the button always. For instance if you uninstall the app you will not get the install event ever again.

@simevidas
Copy link

simevidas commented Apr 24, 2018

  1. It feels too soon. Chrome and others are still experimenting with the UI/UX. PWAs on iOS have just shipped and are still limited. I think it makes sense to be defensive and wait at least until the end of the year before introducing new APIs.

  2. The beforeinstallprompt pattern seems good. The browser decides when the install banner can be shown, and the app is allowed to prevent it and show it manually on user interaction. Are there really any substantial issues with this approach?

@marcoscaceres
Copy link
Contributor Author

@benfrancis wrote:

I'm personally not convinced that the UI design space for user agents taking responsibility for this install flow has been entirely explored. I suspect that a combination of "ambient badging" and a careful use of prompts to direct users' attention could still solve this problem in a consistent and unobtrusive way, without having to hand the responsibility off to app developers.

I think that's valid. And I'm inclined to push for a "worth prototyping" position from Mozilla with beforeinstallprompt, ambient badging, etc.

@simevidas, wrote:

It feels too soon. Chrome and others are still experimenting with the UI/UX. PWAs on iOS have just shipped and are still limited. I think it makes sense to be defensive and wait at least until the end of the year before introducing new APIs.

Another year or more of experimentation is fine, and I tend to concur that Safari on iOS will likely have a significant impact on how this will unfold for the Web. Right now, they don't seem to do anything different from pre iOS 11.3.

Generally speaking, please note that this thread is seeking a Mozilla position - not a general public position. The two should not be conflated.

The beforeinstallprompt pattern seems good.

I outlined the issues above... it's just that developers never know when the event is going to fire, and if it's just going to fire on every page load just after onload (I think that's what Chrome has ended up with), then what's the point of having such a complex API? This is basically what we are trying to balance out.

As I said above, I think we should exhaust beforeinstallprompt by prototyping it - along with things @benfrancis mentioned.

@benfrancis
Copy link

@marcoscaceres wrote:

I outlined the issues above... it's just that developers never know when the event is going to fire, and if it's just going to fire on every page load just after onload (I think that's what Chrome has ended up with), then what's the point of having such a complex API? This is basically what we are trying to balance out.

As I said above, I think we should exhaust beforeinstallprompt by prototyping it - along with things @benfrancis mentioned.

For what it's worth, I've always found the beforeinstallprompt approach a bit strange. It feels like a workaround to the problem that app developers found Chrome's installability criteria unpredictable but Google doesn't want to give app developers full control, so we ended up with a bit of an odd compromise.

If there was some kind of unobtrusive "add to homescreen" UI element which appeared more predictably based on simpler and less strict criteria, and then the option for user agents to add additional hints or prompts based on browser-specific quality and usage metrics to incentivise certain requirements, then perhaps neither beforeinstallprompt or install() would be necessary.

Just a thought.

@marcoscaceres
Copy link
Contributor Author

marcoscaceres commented Apr 26, 2018

If there was some kind of unobtrusive "add to homescreen" UI element which appeared more predictably based on simpler and less strict criteria, and then the option for user agents to add additional hints or prompts based on browser-specific quality and usage metrics to incentivise certain requirements, then perhaps neither beforeinstallprompt or install() would be necessary.

You might be right, but at the same time, any UA getting it wrong basically spoils it for the rest (or for themselves). Opinions will vary here, but, for instance, Apple's "Add to Homescreen" being buried away might never change, leading to web applications having to UA sniff AND possible absolutely position helpful instructions depending on device (iPhone on top, iPad below):

screenshot 2018-04-26 14 09 08

So, unless all browsers have a standardized mechanism, the web suffers. This is not an iOS problem either, like with FlipKart and ambient badging:

screenshot 2018-04-26 14 11 39

(in the example above, you have to sniff basically browser, possibly browser version, and Android version... that ain't gonna scale).

In any case, interested to see what our (Mozilla) UX/UI folks come out with over the next year or two.

@FluorescentHallucinogen

img_20180426_085403

Original: https://twitter.com/burkeholland/status/989051650718486529 😜

@ithinkihaveacat
Copy link

Chrome is considering moving to something that is equivalent to the proposed "Install API". (I say equivalent because at a low level, "developers must listen for the beforeinstallprompt event, and call prompt() on it with a user gesture to show a modal add to home screen prompt" (source)--but these details could be abstracted away into a method called showAddToHomescreen().)

@dbaron dbaron added the venue: W3C Specifications in W3C Working Groups label Aug 9, 2018
@marcoscaceres
Copy link
Contributor Author

We will work this out in the spec itself. Don't require a position.

@mgiuca
Copy link

mgiuca commented Dec 16, 2019

Hello,

It would be helpful to hear if Mozilla does have an official position on this API at this point. Due to recent developments (see w3c/manifest#835) we now have a situation where the API could get removed from the spec without interest from Mozilla.

If that's the case, so be it, but as far as I can tell, Mozilla never explicitly expressed a signal on this either way. If you want it, please indicate so.

@marcoscaceres marcoscaceres reopened this Dec 16, 2019
@marcoscaceres
Copy link
Contributor Author

Sure, with regards to BeforeInstallPrompt, Mozilla's position is that it's "non-harmful": Mozilla does not see this specification as harmful, but is not convinced that it is a good approach or worth working on."

With regards to installation and Web Manifest in general, Mozilla's position is that it is "worth prototyping" - Mozilla sees this specification as conceptually good, and worth prototyping, getting feedback on its value, and iterating. We are prototyping support in Firefox Preview and we've added support for Web Manifest in Firefox Desktop's Dev Tools.

@mgiuca
Copy link

mgiuca commented Jan 10, 2020

Hi @marcoscaceres .

Thanks for clarifying Mozilla's position.

Sure, with regards to BeforeInstallPrompt, Mozilla's position is that it's "non-harmful": Mozilla does not see this specification as harmful, but is not convinced that it is a good approach or worth working on."

I see...

image

😂

@marcoscaceres
Copy link
Contributor Author

The WG concluded to remove beforeinstallprompt from the spec.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
venue: W3C Specifications in W3C Working Groups
Projects
None yet
Development

No branches or pull requests

10 participants