Provide better examples of scope

[marcoscaceres]

People are confused by the lack of examples relating to scope:
pwa-builder/PWABuilder-CLI#42 (comment)

[boyofgreen]

This might be a stretch for this topic, but we are seeing a use case in ManifoldJS for the ability to add multiple end points to a scope. Mainly being able to support authentication. For example, if an app uses Facebook to authenticate, and Facebook is not into he scope, then the auth process is outside the app experience for the users. Any thoughts on this?

[marcoscaceres]

Ok, two thoughts... and it would be great to work through a real example here...:

1. normal linking + deep linking
2. window.open()

Given:

{
   "scope": "/myapp/"
}

normal linking

So, given a user wants to log into facebook, one could navigate to https://login.facebook.com - this "breaks" scope, hence causes browser to open (not great experience, but stay with me). Once authentication finishes, facebook.com navigates back to "example.com/myapp/logged_in/". As the scope is registered (and as the app is open), the web application reopens (i.e., this is a "deep link" behavior).

Issues: requires the browser to keep track of which pages are working as "apps". The app could die in the background before the user finishes authentication. It doesn't integrate nicely with OS level pre-authentication (but it could, MAYBE, with the proposed credential management API ... need to investigate this).

window.open()

Using window.open() could work as an overlay, allow authentication to take place (same as a popup window in desktop browsers). This would allow for a more integrated authentication experience without requiring users to jump into a separate application (the default browsers).

Issues: we probably need to have more control over window.open() to make it feel more native.

[boyofgreen]

I like having control over window.open in an app scenario. As an app you could want a different experience than on the web.
Let me throw another example at you for scope. I use to work for a bank doing front end development. We had a few services that we integrate to for our bank customers. Things liked credit check, bill pay and redeeming points. These were what we called branded experiences, where the site looked like our site (we provided the template) and we passed them a token for auth, but the experience was on their dominion. Most of the time it was something like this:
www.mybank.com --> mybank.outhersite.com --> www.mybank.com
This type of shared experience wouldn't work within the current approach to scope. I could see this being common not just for auth but things like this shared experience, or even transactions that use external services like paypal or the like.

[marcoscaceres]

@boyofgreen, yeah, I also found a few examples of this while researching scope. Multi-origin sites/apps are certainly common practice today. Going to think about this a bit more...

[marcoscaceres]

FWIW, having an "unbounded" (i.e., undefined) scope allows for the multi-origin navigation today. However, the user agent might intervene and show a small URL bar if you navigate to another origin (as happens in Chrome on Android).

[benfrancis]

Just a quick note that an example for scope might be registering a web app as handling a particular URL scope for the purpose of handling App Links on Android, or Universal Links on iOS.

[kenchris]

https://web.dev/add-manifest/#scope