[web] Add path-based browser location handling

[slightfoot]

This change adds another flutter.web.usePathStrategy dart define flag so that you can build Flutter Web with a different location strategy. This change needs to land first before flutter/flutter#55232, so that the flutter tool can change it's local web-server behaviour so that the browser is given index.html for previously unknown URLs.

Example usage:
flutter build web --dart-define=flutter.web.usePathStrategy=true

Closes: flutter/flutter#33245 - Flutter_web navigation should provide a way to remove hash symbol(#)

/cc @jonahwilliams @yjbanov

[goderbauer]

@chunhtai @mdebbar

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and then comment @googlebot I fixed it.. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and then comment @googlebot I fixed it.. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

[passsy]

@googlebot I fixed it.

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[jonahwilliams]

Can we name it something that isn't SCREAMING_CAPS? Perhaps flutter.web.usePath

[jonahwilliams]

Or better yet flutter.web.usePathStrategy

[slightfoot]

@jonahwilliams I am matching the previous behaviour already existing in flutter engine for this:

engine/lib/web_ui/lib/src/engine/compositor/initialization.dart

Line 8 in 0ef67b5

/// EXPERIMENTAL: Enable the Skia-based rendering backend.

[jonahwilliams]

That should also be updated to something friendly like flutter.web.useSkiaBackend. No reason to add more technical debt if you don't need to

[slightfoot]

@jonahwilliams updated to flutter.web.usePathStrategy

[mdebbar]

This is great! Thanks for working on this pain point facing many of flutter web users.

The implementation of the location strategy looks good to me. My concern is around other aspects of this change. Like asset loading and service worker.

If I understand correctly, assets and service worker caching, both use relative paths. This could cause issues when the user reloads the page. I could be completely wrong, so I would like @jonahwilliams to comment about this.

[jonahwilliams]

Okay, thanks for the links @mdebbar I think I understand the situation better. It sounds like the solution is that users must specify an asset base directory to the framework/build and then flutter (framework side and service worker) must make http requests with these absolute URLs rather than the current strategy of using relative URLs?

[raul782]

@jonahwilliams yes that's what I had to do when testing both PRs
https://github.com/raul782/chasqui_frontend/blob/master/web/index.html#L12-L32

[mdebbar]

It sounds like the solution is that users must specify an asset base directory to the framework/build and then flutter (framework side and service worker) must make http requests with these absolute URLs rather than the current strategy of using relative URLs?

@jonahwilliams yep, that sounds right.

[mdebbar]

It looks like adding a <meta name="assetBase" content="/base/path/"> to index.html (like @raul782 did) should do the trick for assets. We read the meta tag here.

I'm not sure if this is enough for service worker or not.

[raul782]

@mdebbar, you mean adding a / to make it work relative the root path, this is what I did on the demo app above, https://github.com/raul782/chasqui_frontend/blob/master/web/index.html#L28

[jhancock4d]

Please make sure that arguments are also encoded and decoded in the query part of the URL. This is vital for deep linking and differentiation for SEO.

[jumper423]

@passsy @goderbauer @jonahwilliams
I and many people will be very grateful to you if you are approved.

#flutter/flutter#33245

[cbracken]

@mdebbar can you take a look at this and decide what's the best way to proceed here? Looks like it's waiting on feedback.

I notice that flutter/flutter#55232 has been closed due to inactivity, but I don't have enough context to know whether that's due to this PR not having landed yet. If we do think we should proceed with this then we should probably revive that one.

[chunhtai]

This seems to have a lot of duplicated code from the hashlocationstrategy. We should probably refactor out a mixin

[mdebbar]

This PR is the engine companion for flutter/flutter#55232, and should be closed for inactivity too.

The problem with the approach of this PR is that app developers can't implement their own location strategies, they can only choose from the ones we provide.

To solve that, we are going with a slightly different approach using JS interop. The PRs are still in draft mode because they were blocked by a JS interop issue for a while. The blocker has recently been fixed, so I'm planning to pick the PRs again and get them to the end line.

• [web] Support custom url strategies flutter#59797
• [web] Support custom url strategies #19134