How does push state enable "HTML 5 style" URLs - javascript

I'm reading this doc which says:
The router uses the browser's history.pushState for navigation. Thanks
to pushState, you can make in-app URL paths look the way you want them
to look, e.g. localhost:3000/crisis-center. The in-app URLs can be
indistinguishable from server URLs.
Can anyone please explain with an example how exactly it makes it possible and why it wasn't possible until pushState was implemented?

Related

redirect to ios application using php

i have read a lot of stack-over-flow Q&A and blogs about deep linking, the way i found convenient was to use header() function in my php code and use url within it to redirect. But when i put myApp:// in header function like this
header('Location: myApp://');
as redirect link it says
cannot open the page because too many redirects occur
then did some research and found this link
then according to the link, i used javascript method as
echo '<script type="text/javascript" charset="utf-8">window.location="360VUZ://";</script>';
to achieve the same
still this doesn't work as it changed the whole url i needed to open the app
it says
The requested URL /subFolder/myApp:// was not found
now i am not getting how the path is appending itself, all i need is to hit this
myApp://
url to open my application
any type of help or suggestion is appreciated ! thanks in advance!!
EDIT:
specifically when i am using JS to open app, it says
The requested URL /subFolder/myApp:// was not found on this server.
so all i need to do is somehow delete/remove the prefix path as it is finding the app on the server not on device and hit only 'myApp://', but still dont know how!? please help me!
With iOS 9.2, Apple deprecated the ability to launch apps via URI schemes in favor of Universal Linking. Consequently, this approach that you are exploring no longer works.
Your options are to set up Universal Linking on your own or to leverage a third party service like branch.io.

Swift Deep link check if app is installed

I just stumbled upon the concept of deep links, allowing people to send data to the app using specific URL's. I looked into this, and I have now successfully managed to implement it in my app. However, I have one question. I was wondering if it was possible to detect if the app was installed or not, while clicking the specific link in for example Notes or on Safari - and if not - take the person to the App Store.
Is this possible?
Thanks in advance.
Yes, this is possible. However it requires some workarounds, because you can't actually detect if an app is installed in situations like this. Apple and Google have limited that for obvious privacy reasons.
The basic flow is this:
Attempt to open the app via a deep link (Universal Links in most situations, or a custom URI scheme redirect wrapped inside a regular HTTP/HTTPS link in rare cases)
If this attempt fails, use your fallback URL (the actual URL of a Universal Link, or the page where you wrapped your custom URI scheme redirect) to then forward the user to the App Store to download.
The real magic happens when you are able to do deferred deep linking. This means storing the value of the deep link remotely so you can send the user to the right place in your app, even when the app is not installed yet.
This is exactly how Branch.io (full disclosure: I'm on the Branch team) works. You can find a much better overview of the process on this page.

Crawlable AJAX app WITHOUT server rendering

Question: Is it possible to make SPA crawlable without server rendering with help of HTML5 History API pushState?
I have found contradictory meanings. Can you support or refute one of them?
YES, it's possible to make SPA crawlable w/o server rendering.
The only explanation I found is - when Google crawler goes through <a href="site.com/go"> it subscribes to onpopstate and waits you'll trigger HTML5 History pushState. After you get all async content, you trigger pushState and crawler start crawling.
Do really Google knows how to subscribe onpopstate events?
No, that impossible. I came to the same conclusion, the same is said in this article. It says that pushState is a replacement of hashbangs to make the same URL for both user and crawler.
P.S. If it's impossible with pushState, are there any other acceptable ways?

Doing links like Twitter, Hash-Bang #! URL's [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What’s the shebang/hashbang (#!) in Facebook and new Twitter URLs for?
I was wondering how Twitter works its links.
If you look in the source code, you use the links are done like /#!/i/connect or /#!/i/discover, but they don't have a JavaScript function attached to them like load('connect') or something, and that it doesn't require a page reload. It just changes out the page content.
I saw this page, but then all of those files would have to exist, and you couldn't just go straight to one of them. I imagine that on Twitter each of those files don't exist, and that it is handled in some other method. Please correct me if I'm wrong, though.
Is there a way I could replicate this effect? If so, is there a tutorial on how to go about doing this?
"Hash-Bang" navigation, as it's sometimes called, ...
http://example.com/path/to/#!/some-ajax-state
...is a temporary solution for a temporary problem that is quickly becoming a non-issue thanks to modern browser standards. In all likelihood, Twitter will phase it out, as Facebook is already doing.
It is the combination of several concepts...
In the past, a link served two purposes: It loaded a new document and/or scrolled down to an embedded anchor as indicated with the hash (#).
http://example.com/script.php#fourth-paragraph
Anything in a URL after the hash was not requested from the server, but was searched for in the page by the browser. This all still works just fine.
With the adoption of AJAX, new content could be loaded into the current (already loaded) page. With this dynamic loading, several problems arose: 1) there was no unique URL for bookmarking or linking to this new content, 2) search would never see it.
Some smart people solved the first problem by using the hash as a sort of "state" reference to be included in links & bookmarks. After the document loads, the browser reads the hash and runs the AJAX requests, displaying the page plus its dynamic AJAX changes.
http://example.com/script.php#some-ajax-state
This solved the AJAX problem, but the search engine problem still existed. Search engines don't load pages and execute Javascript like a browser.
Google to the rescue. Google proposed a scheme where any URL with a hash-bang (#!) in lieu of just a hash (#) would suggest to the search bot that there was an alternate URL for indexing, which involved an "_escaped_fragment_" variable, among other things. Read about it here: Ajax Crawling: Getting Started.
Today, with the adoption of Javascript's pushstate in most major browsers, all of this is becoming obsolete. With pushstate, as content is dynamically loaded or changed, the current page URL can be altered without causing a page load. When desired, this provides a real working URL for bookmarks & history. Links can then be made as they always were, without hashes & hash-bangs.
As of today, if you load Facebook in an older browser, you'll see the hash-bangs, but a current browser will demonstrate the use of pushstate.
You might wanna check out more on Unique URLs.
It's loading the page via AJAX, and parsing the "hash" (the values that come after the "#") to determine which page it's going to load. Also, this method is used due to the nature that AJAX requests don't count to the browser's history thus the "back button breaks". But the browser does however store into history the hash changes.
Using hashes plus the fact that you can use hashes to determine pages, you can say that you can keep AJAX requested pages "in history". Added to that, hashed URLs are just URLs, and they are bookmarkable including the hash, so you can also bookmark AJAX requested pages.

Fetching all the urls opened in the browser

I know that getRequestURL will fetch me the URL of the page being opened.
I need to know how to get the URLs of all the tabs opened in the browser say firefox.
Is there anyway to achieve this?
This is not possible to do from a regular web page as it would be a serious security issue.
However, it is possible with browser extensions (for example, in Chrome there is a chrome.tabs.getAllInWindow() function available to plugins, and accessing their urls is simply a matter of looping through the tabs returned by that function and reading the .url property. See further documentation here).
From your own web page you should not be able to achieve this, as that would be a breach of the sandboxing these browsers attempt to enforce between tabs. If you launched the other windows via javascript, you may be able to control their content, but only under this circumstance.
You could feasibly write a plugin to run in the browser, but obviously the client would have to install/trust this for it to work.

Categories