push state
1.0.0
hy-push-state ist eine Webkomponente, mit der Sie Webseiten in Web-Apps umwandeln können. Die Komponente lädt dynamisch neue Inhalte (früher bekannt als „Ajax“) und fügt sie in die aktuelle Seite ein, ohne dass es zu Flash of White, Flash of Unstyled Content usw. kommt.
Verwandeln Sie statische Websites in dynamische Web-Apps. {:.führen}
hy-push-state ähnelt pjax und SmoothState, bietet jedoch eine erweiterte Vorabruflogik und gibt Ihnen mehr Kontrolle über seine Interna, um erweiterte Seitenübergangsanimationen zu ermöglichen.
hy-push-state wird bereits von Hunderten von Websites als Teil des Hydejack{:.external} Jekyll-Themes verwendet.
HINWEIS : Bei der aktuellen Version handelt es sich noch um eine Vorabversion. Die öffentliche API kann sich noch in wichtigen Punkten ändern. {:.Nachricht}
Wenn Sie diese Seite auf webcomponents.org anzeigen, wird das folgende Beispiel als interaktive Demo dargestellt. Ansonsten finden Sie unten die eigenständigen Beispiele.
< 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 >Wenn Sie dieses Dokument auf GitHub, npm oder anderswo ansehen, können Sie sich die eigenständigen Beispiele ansehen:
hy-push-state ist Open Source, aber nicht kostenlos.
Sie dürfen die Komponente gemäß der GPL-3.0-Lizenz verwenden, dies bedeutet jedoch, dass Sie bereit sein müssen, Ihren Code wiederum unter einer GPLv3-kompatiblen Lizenz zu veröffentlichen.
Für Fälle, in denen dies nicht akzeptabel ist, stehen die folgenden kommerziellen Lizenzen zur Verfügung:
| Persönlich | Start-up | Unternehmen | |
|---|---|---|---|
| # Entwickler | 2 | 15 | ∞ |
| Lizenz | Persönlich | Start-up | Unternehmen |
| Preis | 29 $ | 249 $ | 499 $ |
| Kaufen Sie {:.gumroad-button} | Kaufen Sie {:.gumroad-button} | Kaufen Sie {:.gumroad-button} | |
| {:.stretch-table} |
hy-push-state kann auf verschiedene Arten verwendet werden:
Die Webkomponente ist die bevorzugte Art der Verwendung von hy-push-state , erfordert jedoch Unterstützung im Browser oder eine Polyfüllung. Es gibt mehrere Möglichkeiten, es auf Ihrer Seite einzubinden:
Dies ist die Version, die in Kürze native Unterstützung für alle gängigen Browser bieten wird.
< 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 > Einige Browser haben sich gegen die Implementierung von HTML-Importen entschieden, diese lassen sich jedoch leicht mit Polyfills versehen.
< 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 > Wenn Sie die Komponente aus dem unpkg-CDN laden, können Sie die Quelle direkt importieren, indem Sie den Abfrageparameter ?module anhängen.
< 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 >Beachten Sie, dass dieser Ansatz zu Hunderten separater HTTP-Anfragen führt (eine für jedes Modul) und nur für Tests und Prototypen gedacht ist. Der Import entbündelter ES6-Module ist viel langsamer als gebündelte Distributionen und wird dies auch in absehbarer Zukunft bleiben.
Ein Vorteil dieses Ansatzes besteht darin, dass gemeinsame Abhängigkeiten nicht doppelt einbezogen werden, wenn mehr als eine Komponente aus der Hydejack-Komponentenfamilie verwendet wird. In diesen Fällen ist die Einrichtung eines Webpacks jedoch die bessere Lösung:
Sie können hy-push-state mit einem Frontend-Bundler wie Webpack oder Rollup verwenden. Installieren Sie einfach die Komponente mit npm oder Yarn und importieren Sie die Quelle in Ihren Code:
import 'hy-push-state/src/webcomponent/module' ; Wenn Sie die Kontrolle darüber haben möchten, wann das benutzerdefinierte Element define wird, können Sie das HTMLElement auch wie folgt importieren:
import { HyPushStateElement } from 'hy-push-state/src/webcomponent' ;
// ...
customElements . define ( 'hy-push-state' , HyPushStateElement ) ; Beachten Sie, dass alle Abhängigkeiten von hy-push-state gültige ES6-Module sind, sodass sie in ModuleConcatenationPlugin des Webpacks eingebunden werden können.
hy-push-state startet eine HTTP-Anfrage, sobald der Benutzer „angibt“, dass er im Begriff ist, eine neue Seite zu öffnen, indem er mit der Maus über einen Link fährt, ihn fokussiert oder ihn berührt ( touchstart -ing). Wenn die Vermutung richtig ist, hat die Anfrage einen Vorsprung von 100 ms oder mehr, was die wahrgenommene Geschwindigkeit Ihrer Website zusätzlich zu der ohnehin schon schnellen Seitenersetzung im Webapp-Stil weiter erhöht.
Im Gegensatz zu anderen Implementierungen dieser Funktion wird die aktuelle Prefetch-Anfrage abgebrochen, wenn der Benutzer auf einen anderen Link hinweist. Dadurch wird sichergestellt, dass nicht mehr als eine Prefetch-Anfrage gleichzeitig aktiv ist. Dadurch wird vermieden, dass das Netzwerk durch Anfragen verstopft wird, die beim Eintreffen verworfen werden, was bei langsamen 3G-Verbindungen wichtig ist.
Wenn Sie beispielsweise den Mauszeiger über Links in der Seitenleiste von qwtel.com bewegen, wird eine Zeitleiste wie die folgende erstellt:
{:.lead} Screenshot der Chrome-Entwicklerkonsole mit Prefetching-Anfragen. {:.Figur}
hy-push-state ermöglicht die Erstellung erweiterter Seitenübergangsanimationen, wie sie in Hydejack und hochmodernen Web-Apps verwendet werden. Diese können auf Versprechen statt auf Zeit basieren, um kleinere Verzögerungen zu berücksichtigen, die durch anderen Code, GC-Unterbrechungen oder langsamere Geräte im Allgemeinen verursacht werden
Der Code für eine einfache Ausblendanimation mithilfe der Webanimations-API könnte wie folgt aussehen:
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 )
) )
) ; Zeitbasierte Animationen sind ebenfalls möglich und werden mit der Option duration konfiguriert.
Diese Komponente folgt dem Web Components Gold Standard.
Der Quellcode ist im wörtlichen Programmierstil geschrieben und sollte einigermaßen zugänglich sein. Allerdings sind einige Kenntnisse in RxJS erforderlich.
Die Kernfunktionalität ist in mixin / index.js implementiert, das zum Erstellen der Framework-spezifischen Versionen der Komponente verwendet wird.
jqueryindex.jsmixinconstants.jsevent-listeners.jsevents.jsfetching.jshistory.jsindex.jsmethods.jsoperators.jsscript-hack.jsscrolling.jssetup.jsupdate.jsvanillaindex.jswebcomponenthtml-import.sindex.jsmodule.jscommon.jsindex.jsurl.jsDie Größe des minimierten Pakets beträgt etwa 90 KB bzw. etwa 20 KB im gzip-Format. Der Großteil davon stammt von RxJS. Wenn Sie in Ihrem Projekt bereits RxJS verwenden oder mehr als eine Komponente der Hydejack-Komponentenfamilie verwenden, sollten Sie die Verwendung eines Frontend-Bundlers in Betracht ziehen.
| Größe | Datei |
|---|---|
| 84K | dist/jquery/index.js |
| 19K | dist/jquery/index.js.gz |
| 80.000 | dist/mixin/index.js |
| 18K | dist/mixin/index.js.gz |
| 81K | 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 |
