Para que serve o shebang / hashbang (#!) No Facebook e os novos URLs do Twitter?

Acabei de perceber que os URLs longos e complicados do Facebook com os quais estamos acostumados agora se parecem com isso:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

Pelo que me lembro, no início deste ano, era apenas uma string normal de fragmento de URL (começando com #), sem o ponto de exclamação. Mas agora é um shebang ou hashbang ( #!), que eu só vi anteriormente em shell scripts e scripts Perl.

Os novos URLs do Twitter agora também apresentam os #!símbolos. Um URL de perfil do Twitter, por exemplo, agora se parece com isso:

http://twitter.com/#!/BoltClock

Será que #!agora desempenham algum papel especial em URLs, como para um determinado framework Ajax ou algo assim desde que as novas interfaces Facebook e Twitter estão agora em grande parte ajaxified?
Usar isso em meus URLs beneficiaria meu aplicativo da Web de alguma forma?

Esta técnica está agora obsoleta .

Isso costumava dizer ao Google como indexar a página.

https://developers.google.com/webmasters/ajax-crawling/

Essa técnica foi substituída principalmente pela capacidade de usar a API JavaScript History que foi introduzida ao lado do HTML5. Para um URL como www.example.com/ajax.html#!key=value, o Google verificará o URL www.example.com/ajax.html?_escaped_fragment_=key=valuepara buscar uma versão não AJAX do conteúdo.

O octothorpe / sinal de número / hashmark tem um significado especial em uma URL, normalmente identifica o nome de uma seção de um documento. O termo exato é que o texto após o hash é a parte âncora de um URL. Se você usa a Wikipedia, verá que a maioria das páginas possui um índice e pode pular para as seções do documento com uma âncora, como:

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turingidentifica a página e Early_computers_and_the_Turing_testé a âncora. O motivo pelo qual o Facebook e outros aplicativos baseados em Javascript (como o meu próprio Wood & Stones ) usam âncoras é que eles querem tornar as páginas marcáveis ​​(como sugerido por um comentário nessa resposta) ou oferecer suporte ao botão Voltar sem recarregar a página inteira do servidor .

Para dar suporte aos favoritos e ao botão Voltar, você precisa alterar o URL. No entanto, se você alterar a parte da página (com algo parecido window.location = 'http://raganwald.com';) para um URL diferente ou sem especificar uma âncora, o navegador carregará a página inteira a partir do URL. Tente isso no Firebug ou no console Javascript do Safari. Carregar http://minimal-github.gilesb.com/raganwald. Agora, no console Javascript, digite:

window.location = 'http://minimal-github.gilesb.com/raganwald';

Você verá a atualização da página no servidor. Agora digite:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

Aha! Nenhuma atualização de página! Tipo:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

Ainda sem atualização. Use o botão Voltar para ver se esses URLs estão no histórico do navegador. O navegador percebe que estamos na mesma página, mas apenas alteramos a âncora, para que não seja recarregada. Graças a esse comportamento, podemos ter um único aplicativo Javascript que parece estar no navegador em uma 'página', mas que possui muitas seções que podem ser marcadas como favoritos e que respeitam o botão Voltar. O aplicativo deve alterar a âncora quando um usuário digita diferentes 'estados' e, da mesma forma, se um usuário usa o botão Voltar, um marcador ou um link para carregar o aplicativo com uma âncora incluída, o aplicativo deve restaurar o estado apropriado.

Aí está: Âncoras fornecem aos programadores Javascript um mecanismo para tornar os aplicativos favoritos, indexáveis ​​e compatíveis com o botão voltar. Esta técnica tem um nome: É uma interface de página única .

ps Há um quarto benefício para esta técnica: carregar o conteúdo da página através do AJAX e injetá-lo no DOM atual pode ser muito mais rápido do que carregar uma nova página. Além do aumento de velocidade, outros truques, como carregar certas partes em segundo plano, podem ser executados sob o controle do programador.

pps Dado tudo isso, o 'estrondo' ou ponto de exclamação é mais uma dica para o rastreador da Web do Google de que a mesma página exata pode ser carregada do servidor em um URL ligeiramente diferente. Consulte Rastreamento do Ajax . Outra técnica é fazer com que cada link aponte para um URL acessível pelo servidor e, em seguida, use Javascript discreto para transformá-lo em um SPI com uma âncora.

Aqui está o link principal novamente: O Manifesto da Interface de Página Única

Primeiro de tudo: eu sou o autor do Manifesto de interface de página única, citado por raganwald

Como raganwald explicou muito bem, o aspecto mais importante da abordagem de interface de página única (SPI) usada no FaceBook e no Twitter é o uso de hash #em URLs

O caractere !é adicionado apenas para fins do Google. Essa notação é um "padrão" do Google para rastrear sites intensivos em AJAX (nos sites extremos da Interface de página única). Quando o rastreador do Google encontra um URL, #!ele sabe que existe um URL convencional alternativo, fornecendo o mesmo "estado" da página, mas nesse caso no tempo de carregamento.

Apesar da #!combinação ser muito interessante para o SEO, é suportado apenas pelo Google (até onde eu sei), com alguns truques de JavaScript você pode criar sites SPI de SEO compatíveis com qualquer rastreador da Web (Yahoo, Bing ...).

O Manifesto e as demonstrações do SPI não usam o formato do Google !em hashes, essa notação pode ser facilmente adicionada e o rastreamento do SPI pode ser ainda mais fácil (UPDATE: now! Notation é usada e permanece compatível com outros mecanismos de pesquisa).

Dê uma olhada neste tutorial , é um exemplo de um site simples do ItsNat SPI, mas você pode escolher algumas idéias para outras estruturas, este exemplo é compatível com SEO para qualquer rastreador da web.

O difícil problema é gerar qualquer (ou selecionado) "estado da página AJAX" como HTML simples para SEO, no ItsNat é muito fácil e automático, o mesmo site é ao mesmo tempo SPI ou página baseada em SEO (ou com o JavaScript desativado para acessibilidade). Com outras estruturas da web, você pode sempre seguir a abordagem de site duplo, um site é baseado em SPI e outra página baseada em SEO, por exemplo, o Twitter usa essa técnica de "site duplo".

Seria muito cuidadoso se você estiver considerando adotar esta convenção de hashbang.

Depois de hashbang, você não pode voltar. Esta é provavelmente a questão mais complicada. O post de Ben adiantou que, quando o pushState é mais amplamente adotado, podemos deixar os hashbangs para trás e retornar aos URLs tradicionais. Bem, o fato é que você não pode. Anteriormente, afirmei que os URLs são eternos, eles são indexados e arquivados e geralmente mantidos por aí. Para adicionar isso, URLs legais não mudam. Não queremos nos desconectar de todos os links valiosos para o nosso conteúdo. Se você implementou URLs hashbang a qualquer momento, altere-os sem interromper os links, a única maneira de fazer isso é executando algum JavaScript no documento raiz do seu domínio. Para sempre. Não é de forma alguma temporário, você está preso a isso.

Você realmente deseja usar pushState em vez de hashbangs , porque tornar seus URLs feios e possivelmente quebrados - para sempre - é uma desvantagem colossal e permanente dos hashbangs.

Para ter um bom acompanhamento sobre tudo isso, o Twitter - um dos pioneiros das URLs hashbang e da interface de página única - admitiu que o sistema hashbang era lento a longo prazo e que eles realmente começaram a reverter a decisão e retornar ao links da velha escola.

Artigo sobre isso está aqui.

Eu sempre assumi o que !acabei de indicar que o fragmento de hash a seguir correspondia a uma URL, !substituindo a raiz ou o domínio do site. Poderia ser qualquer coisa, em teoria, mas parece que a API de rastreamento do Google AJAX gosta dessa maneira.

O hash, é claro, apenas indica que nenhuma recarga de página real está ocorrendo; portanto, é para fins de AJAX. Edit: Raganwald faz um trabalho adorável explicando isso com mais detalhes.

As respostas acima descrevem bem o porquê e como é usado no twitter e no facebook, o que eu perdi é a explicação do que #faz por padrão ...

Em um 'normal' (não um aplicativo de página única), você pode ancorar hashem qualquer elemento que tenha id, colocando esse ID de elemento no URL após o hash#

Exemplo:

(no Chrome) Clique F12ou Rihgt MouseeInspect element

pegue id="answer-10831233"e adicione ao URL como segue

/programming/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

e você receberá um link que pula para esse elemento na página

Para que serve o shebang / hashbang (#!) No Facebook e os novos URLs do Twitter?

Ao usar #da maneira descrita nas respostas acima, você está introduzindo um comportamento conflitante ... embora eu não perdesse o sono por causa disso ... já que o Angular se tornou um padrão ...