For the past couple of weeks I’ve been working on a new JavaScript library to handle PJAX using the native Fetch API that’s build right into modern browsers. As a result of these efforts I’m pleased to announce the release of FetchPjax.
TDLR; you can grab fetch-pjax on npm or view the source on Github.
What is PJAX again?
I’m glad you asked.
PJAX (PushState + Ajax) is a method of avoiding full page refreshes by using AJAX to load HTML from your server and replace only the relevant portions of the page with the Ajax’d HTML.
Why is this good?
By avoiding full page refreshes, the browser doesn’t have to download and parse your site’s CSS/JS. By avoiding this expensive cycle, new pages are delivered to users much more quickly providing a super fast browsing experience.
Does this already exist?
Well yes…and no.
There are several libraries out there that provide the same functionality but these are either
- Tied to jQuery
- Use XMLHttpRequest (XHR) for AJAX
For my particular use case I needed a flexible library that used the modern Fetch API. This was particularly important to allow my website to function as a Progressive Web App, as service workers listen for the browser FetchEvent.
So, FetchPjax was born!
Why would I use FetchPjax?
Presumably if you’re interested in using FetchPjax then you’ll be interested in using PJAX for navigation. But there are several reasons why I feel FetchPjax provides a good developer experience:
- Runs “config-less” – sensible defaults covering the majority of use cases
- Full URL management and back button support
- Internal “hash” link support (inc. scroll position restoration)
- Ability to choose multiple targets to update in the DOM
- Form handling (inc. POST/GET and enctypes)
- Highly configurable – customise behaviour via options
- Extensible by design – use callbacks to achieve your unique requirements
- Full ability to customise Fetch request details
- Test coverage for all key features
- Comprehensive documentation
Try FetchPjax today
FetchPjax is currently at release 1.1.1. I’m currently looking for volunteers to help test/break it and contribute new features. If you’re interested head over to FetchPjax on GitHub.