I am hosting a flutter web app, which involves the initial url having query parameters (e.g. https://mysite.web.app/?k=ZF6K5UA7X3Jk9HJanla3). I use the url_strategy package to get rid of the #, however when the site loads, the query params are stripped off, leaving the bare-boned "https://mysite.web.app". I have got around the functionality aspect by storing the param as a cookie variable, however it is not ideal.
Is there any way to re-instate the params programmatically in the url bar of the browser? The reason for this is for both (i) giving the user the option to share the original URL, and (ii) allow them to add the app to their mobile device screen as a PWA (with the original full url).
Any suggestions welcomed.
I resolved this via the implementation of go_router. With the combination of state.queryParams and Router.neglect(context, () => context.go('/?k=$myOriginalParam')) (from any pages that wanted to go back to the original route with no browser back button history), I can retain the query parameter in the browser bar successfully.
Related
I want to make it so when a user enters the URL of the app they'd get the same page, no matter what they added after the '/', but have a string stored in the code with the value after the '/'.
for example: if they enter the URL "exampleurl.app/blabla", the String would have the value "blabla".
I managed to that somewhat with Uri.base, the problem is that after the app loads the URL removes all the text after the '/' automatically, and whenever I reload the site it reloads it without the URL with the text removed.
Also if the current URL in the tab is already of the app ("exampleurl.app/nomatterwhatsaddedhere"), it assumes that it is the same URL and doesn't even reload.
It would be greatly appreciated if someone could show me a way to get the string from the URL without these issues.
Thanks in advance!
You need to use Navigator 2.0 for this kind of functionality. I recently wrote a short series that explains simply how to implement Navigator 2.0. It goes into detail explaining how to work with the URL in an app for similar functionality to what you are after, though you will need to tweak it for your use case. It provides a detailed walkthrough along with sample code available on GitHub.
A Simpler Guide to Flutter Navigator 2.0
I'm building a rails app, and attempting to put multiple Google Static Maps into the view. These maps will always display broken-image placeholders, except it works when I:
-Use firebug to grab the src URL for the map image
-Paste the URL into another browser tab
-Refresh my apps page with the Google static maps
-I can then view a static map for the URL I pasted, but no others, and only for about 1 min.
Any map on the page I repeat this procedure for will then be viewable, for about 1 minute. Then after about 1 min, that map will revert to a broken image placeholder if I refresh the page.
An example URL from my app (without my API Key) is:
http://maps.googleapis.com/maps/api/staticmap?center=Paris%2C+France&zoom=13&size=600x300&maptype=roadmap&sensor=false&markers=color:blue|label:A|Paris%2C+France
Paste (or click) this into your browser, and you see it works. I paste this URL WITH my API key in it into my browser, it works & and my app will show the static map for a limited time, and then after that it will be broken again. If I paste a URL without my API key, this procedure doesn't work. It's like viewing the map in another browser tab somehow caches it momentarily in my browser, and it will then work in my app... but then it will break in a minute. Haven't found any other way to make map images viewable.
Any ideas why this would happen?
EDIT:
This is extremely strange. In an attempt to diagnose this, I did a copy/paste/save of the apps page source containing the broken map images, and put it on a remote server out in the World. In this new totally static page, I got the same result: I see broken placeholder images where the google map pic should be. But after I copy the src URL of the image & paste it in another browser tab, I can go back to the static page, refresh & only that map image appears.
Stranger still (maybe?), it shows up on my localhost app too. It also shows up on a static local copy/paste of the app page source I save as an HTML file.
So, not saying this must be it, but it seems to be a browser caching issue. No matter where the view page is represented, whether local or remote, and no whether it is dynamically generated or static HTML, the original behavior remains the same.
Maybe you are not considering that the referrer is the one who shows the static map. Check these examples:
Static map shown in https://developers.google.com/maps/documentation/static-maps/styling?hl=nl: the referrer is https://developers.google.com
You grab this link (that is already in the url of the URL on bullet 1) https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15¢er=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00%7Cweight:1%7Cvisibility:on&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000%7Cvisibility:on&style=feature:administrative%7Celement:labels%7Cweight:3.9%7Cvisibility:on%7Cinverse_lightness:true&style=feature:poi%7Cvisibility:simplified&key=YOUR_API_KEY and you paste it in your browser: the referrer is YOUR PUBLIC IP.
So it's normal if the link does not work in any browser but it works in a determined web page. This happens when the authorized referrer is only the host of the web.
Consider also that you may be hitting the free limits of displays per day.
As per the GWT docs, there are two ways two internationalize my GWT app. One is, declare the language in the HTML itself (hardcoding) through meta tags, another is to use a query param in the URL (like &locale=de).
My webapp is dynamic,different users from different locales will be using it, so the first option is not viable. The 2nd option is fine, but somehow, appending query params to a URL is my pet peeve. I tried to make it dynamic by doing something like $("head).append("<meta name='gwt:property' content='locale=de'>"); first thing on onModuleLoad, it doesn't work.
My app will actually be a redirection, some other web-page will contain a redirection like foo.com&locale=de. Based on that, it will load the required locale fine. But after that, I want to reload it again without showing the query param in the URL, taking the locale information from cookies which can be set in the first load. Is it possible to do so?
There is a third option using cookie.
Reference - GWT Internationalization for dynamically generated content
Ensure you set locale value to the cookie or have a default value for your cookie before user chooses his locale. In our case user chooses a language before login ( where i set the cookie locale value for the user) and read this into the gwt application on load.
Adding the parameter to a model (in a Controller) and picking it up on the client (in a *.jsp) will work for you?
<meta name="gwt:property" content="locale=${locale}">
Then you just need to refresh the page and reset the locale value in a controller. Add the meta-tag code in your html/jsp page, it should be there prior to page loading.
onModuleLoad works with code already loaded to the browser window, so appending meta after loading will not work.
I have an application running in an iFrame that is embedded in a SharePoint site. The problem with this is navigation within the application does not result in a change in the SharePoint site URL. Therefore, if you were to refresh the overall page, you would be sent back to the default page of the application, not stay on the same page of the application. The reason this is an issue is sharing for social media. I have added a Facebook Share button to the application, but when it pulls the URL of the application which does not match or reference the URL of the overall site, so it just shares the application (which is not visually appealing and does not allow you to access the rest of the site).
Any body have any suggestions or know a place I can go for help? Thanks!
If I understand properly, the Facebook stuff is INSIDE the iframe?
If so, you can:
* Remove the iframe and integrate the application better with SharePoint, or
* Change the application so that it detects that it's running "alone" (with javascript etc), and if so redirect to the "big" application.
IF the Facebook stuff is in SharePoint, OUTSIDE of the iframe, you can write some javascript to update the URL in some way that matches the URL of the application. This requires that the SharePoint parent application and the iframe application run in the same domain - if they are not, this is not an option.
Note that changing the "parent" URL with JS will reload the page, UNLESS you only change the URL after the "#" part (so you can do something like:
"http://sharepoint/iframe.aspx?aa=11&bb=22#iframeUrl=http://uglyapplication/"
You'll also probably want to write JS to update your iframe accordingly if the user press "back"/"forward" etc in the browser, because changing the URL like above will still add a "step" to the browser history.
I have a like button on my page that I'm hosting as a FB app. Question is: Leaving the data-href blank on the like, sets my canvas url "www.example.com/page.aspx" for liking. Window.location.href or window.top.location all point to the canvas URL.
I want the users to like the app URL instead of the canvas URL. Anyway I can get this in the code behind? or in javascript? I do not want to specify this, because I want to do this for multiple applications each one to point to their own app url to like.
Usually you have to somehow initialize the app in order to work with it so in your config you should have a canvas name (or namespace).
Another method would be to query the graph-api for convas details. The query should look something like this:
var app_data = FB.api("/you_app_id");
You should test it first with Graph API Explorer . And also remember that this is an expensive call if you're doing it on each page request. You will get an array with all the info about your currently loaded app including the canvas name. Having the canvas name you can form the app URL like this: http://apps.facebook.com/your-canvas-name
Short answer: No!
Longer answer: You cannot get any information from a frame in another domain. This is for security purposes. So if you try:
console.log(window.top.location.href);
...when the frames are in the same domain, you'll get the url. Otherwise, you'll get a security exception.