push state
1.0.0
hy-push-state é um componente da web que permite transformar páginas da web em aplicativos da web. O componente carrega dinamicamente novo conteúdo (anteriormente conhecido como "ajax") e o insere na página atual, sem causar Flash of White, Flash of Unstyled Content, etc.
Transforme sites estáticos em aplicativos web dinâmicos. {:.liderar}
hy-push-state é semelhante a pjax e smoothState, mas oferece uma lógica de pré-busca mais avançada e oferece mais controle sobre seus componentes internos para permitir animações avançadas de transição de página.
hy-push-state já é usado por centenas de sites como parte do tema Hydejack{:.external} Jekyll.
NOTA : A versão atual ainda é um pré-lançamento. A API pública ainda pode mudar de maneiras importantes. {:.mensagem}
Ao visualizar esta página em webcomponents.org, o exemplo abaixo será renderizado como uma demonstração interativa. Caso contrário, encontre os exemplos independentes abaixo.
< hy-push-state initial-href =" https://qwtel.com/hy-push-state/example/simple/ " prefetch >
< p >
< a href =" ./1.html " > Page 1 </ a >
< a href =" ./2.html " > Page 2 </ a >
< a href =" ./3.html " > Page 3 </ a >
</ p >
< p > Super simple example. </ p >
</ hy-push-state >Ao visualizar este documento no GitHub, npm ou em outro lugar, você pode conferir os exemplos independentes:
hy-push-state é de código aberto, mas não é gratuito.
Você pode usar o componente de acordo com a licença GPL-3.0, mas isso significa que você deve estar disposto a liberar seu código sob uma licença compatível com GPLv3.
Para os casos em que isso não é aceitável, as seguintes licenças comerciais estão disponíveis:
| Pessoal | Comece | Empresa | |
|---|---|---|---|
| # Desenvolvedores | 2 | 15 | ∞ |
| Licença | Pessoal | Comece | Empresa |
| Preço | US$ 29 | US$ 249 | US$ 499 |
| Compre {:.gumroad-button} | Compre {:.gumroad-button} | Compre {:.gumroad-button} | |
| {:.mesa elástica} |
hy-push-state pode ser usado de várias maneiras:
O Web Component é a forma preferida de usar hy-push-state , mas requer suporte no navegador ou polyfill. Existem várias maneiras de incluí-lo em sua página:
Esta é a versão que terá suporte nativo em todos os principais navegadores em breve.
< script type =" module " href =" https://unpkg.com/hy-push-state/dist/webcomponent/module " > </ script >
< hy-push-state replace-ids =" main,aside " prefetch >
< main id =" main " > <!-- ... --> </ main >
< aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > Alguns navegadores decidiram não implementar importações de HTML, mas são facilmente preenchidos com polyfill.
< link rel =" import " href =" https://unpkg.com/hy-push-state/dist/webcomponent/hy-push-state.html " >
< hy-push-state replace-ids =" main,aside " prefetch >
< main id =" main " > <!-- ... --> </ main >
< aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > Ao carregar o componente do CDN unpkg, você pode importar a fonte diretamente anexando o parâmetro de consulta ?module .
< script type =" module " src =" https://unpkg.com/hy-push-state/src/webcomponent/module?module " > </ script >
< hy-push-state replace-ids =" main,aside " prefetch >
< main id =" main " > <!-- ... --> </ main >
< aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state >Observe que esta abordagem resultará em centenas de solicitações HTTP separadas (uma para cada módulo) e destina-se apenas a testes e protótipos. A importação de módulos ES6 desagregados é muito mais lenta do que as distribuições agrupadas e assim permanecerá no futuro próximo.
Uma vantagem desta abordagem é que as dependências compartilhadas não serão incluídas duas vezes ao usar mais de um componente da família de componentes Hydejack. No entanto, configurar o webpack é uma solução melhor nestes casos:
Você pode usar hy-push-state com um empacotador de front-end como webpack ou rollup. Basta instalar o componente com npm ou yarn e importar o código-fonte no seu código:
import 'hy-push-state/src/webcomponent/module' ; Se quiser ter controle sobre quando o elemento personalizado é define d, você também pode importar o HTMLElement da seguinte forma:
import { HyPushStateElement } from 'hy-push-state/src/webcomponent' ;
// ...
customElements . define ( 'hy-push-state' , HyPushStateElement ) ; Observe que todas as dependências de hy-push-state são módulos ES6 válidos, para que possam ser incorporados ao ModuleConcatenationPlugin do webpack.
hy-push-state inicia uma solicitação HTTP assim que o usuário "sugere" que está prestes a abrir uma nova página passando o mouse, focando ou tocando ( touchstart -ing) em um link. Se a estimativa estiver correta, a solicitação terá uma vantagem inicial de 100 ms ou mais, aumentando ainda mais a velocidade percebida do seu site, além da já rápida substituição da página no estilo webapp.
Ao contrário de outras implementações deste recurso, a solicitação de pré-busca atual será cancelada se o usuário sugerir um link diferente, garantindo que não haverá mais do que uma solicitação de pré-busca em andamento por vez. Isso evita obstruir a rede com solicitações que serão descartadas na chegada, o que é essencial em conexões 3G lentas.
Por exemplo, passar o mouse sobre os links na barra lateral de qwtel.com produzirá uma linha do tempo como esta abaixo:
{:.lead} Captura de tela do console do desenvolvedor do Chrome sobre solicitações de pré-busca. {:.figura}
hy-push-state permite criar animações avançadas de transição de página, como as usadas no Hydejack e em aplicativos da web de última geração. Eles podem ser baseados em promessas em vez de baseados em tempo para compensar atrasos menores causados por outro código, interrupções de GC ou dispositivos mais lentos em geral
O código para uma animação de fade-out simples usando a API Web Animations pode ser semelhante a:
pushStateEl . addEventListener ( 'hy-push-state-start' , ( { detail } ) =>
detail . transitionUntil ( new Promise ( res =>
document
. getElementById ( 'my-content' )
. animate ( [ { opacity : 1 } , { opacity : 0 } ] , { duration : 250 } )
. addEventListener ( 'finish' , res )
) )
) ; Animações baseadas em tempo também são possíveis e são configuradas com a opção duration .
Este componente segue o padrão ouro de componentes da Web.
O código-fonte é escrito em estilo de programação literal e deve ser razoavelmente acessível. No entanto, é necessário algum conhecimento de RxJS.
A funcionalidade principal é implementada em mixin / index.js , que é usado para criar as versões específicas da estrutura do componente.
jqueryindex.jsmixinconstants.jsevent-listeners.jsevents.jsfetching.jshistory.jsindex.jsmethods.jsoperators.jsscript-hack.jsscrolling.jssetup.jsupdate.jsvanillaindex.jswebcomponenthtml-import.sindex.jsmodule.jscommon.jsindex.jsurl.jsO tamanho do pacote reduzido é de cerca de 90 KB ou aproximadamente 20 KB compactado. A maior parte vem do RxJS. Ao já usar RxJS em seu projeto, ou usar mais de um componente da família de componentes Hydejack, considere usar um empacotador frontend.
| Tamanho | Arquivo |
|---|---|
| 84K | dist/jquery/index.js |
| 19K | dist/jquery/index.js.gz |
| 80 mil | dist/mixin/index.js |
| 18K | dist/mixin/index.js.gz |
| 81 mil | dist/vanilla/index.js |
| 18K | dist/vanilla/index.js.gz |
| 86K | dist/webcomponent/html-import.js |
| 19K | dist/webcomponent/html-import.js.gz |
| 86K | dist/webcomponent/index.js |
| 19K | dist/webcomponent/index.js.gz |
| 86K | dist/webcomponent/module.js |
| 19K | dist/webcomponent/module.js.gz |
