Live reload
About the feature
By default, customizing element markup, styles, and scripts requires reloading the page each time to see the changes, which can be time-consuming and frustrating. Many modern frameworks, such as Next/Nuxt.js and Laravel, offer a live reloading feature.
While the exact implementation varies between frameworks, the general idea is the same: updating the changed piece (HTML or CSS) automatically and in the background, without noticeable and time-consuming page updates.
As a modern and modular framework, Advanced Views Framework provides live reloading out-of-the-box. AVF may be the only WordPress-related framework currently offering this feature.
Benefits
Automatically refreshes the changed element (HTML/CSS/JS) without reloading the entire page.
Automatically refreshes the page when you press 'update' on the page.
Works with and without File System Storage active.
Functions for both local and remote websites.
Secure: Available only works for administrators.
How to use the feature
Visit any page where a View or Card is used (or create a new one).
Hover over the 'Advanced Views' item in the top admin bar and click on 'Enable Live On-page Reload'. This action adds a special query argument to the URL and reloads the page (only once).
Once the page is in live reload mode, you should see a colorful dot in the bottom-left corner of the screen. The colors indicate the current state:
Green: The page is up-to-date.
Orange: The reloader is checking for potential changes.
Blue: The reloader has entered 'inactive' mode.
Red: An error has occurred (check the browser console for details).
Pro tip: You can precisely configure the reloader timeouts in the plugin settings.
Known Limitations
In some cases, View and Card updates cannot be applied in the background and require a full page reload. This will automatically trigger a full page reload instead of a background update in the following cases:
Markup changes in Views with Gutenberg blocks.
Markup and CSS changes when the 'Declarative Shadow DOM' option is active.
Pages without a post ID (e.g., CPT archive, single taxonomy, etc.).
Tailwind
You can use the live reloading feature with Tailwind, but be aware that during background updates, the Tailwind class merging feature will be skipped. This means that the same rules (e.g., flex{}) may appear multiple times.
This won't hinder your development process, and you shouldn’t worry about duplications, as this issue occurs only with the active live reload mode.
For convenience, the !important rule is automatically added on the server side to all Tailwind @media rules, ensuring the correct appearance regardless of the style order.
Behind the scenes
This information is optional, in case you're curious about how it works behind the scenes:
AVF provides a special REST API endpoint. When the feature is enabled, AVF adds a JavaScript script to the page. This script keeps track of the Views and Cards used on the page and their code field hashes (Template/CSS/JS).
It periodically requests the server and sends the list along with the hashes. The server checks if the hashes are still current; if they have changed, it sends the updated markup, CSS, and JavaScript to the client, which then applies the changes.
Although this scheme uses timers (with a default 5-second delay), you shouldn't worry about server load. We have optimized the process to be as lightweight as possible, minimizing server strain. We encountered several challenges in implementing this scheme but have kept the explanation straightforward.
Why Timers instead of File System Events?
PHP does not have file change events and does not run continuously in the background (unless it’s a separate CLI app), so using timers is the only viable solution. This method is also universal, as it works on websites including remote servers, unlike Vite, which relies on file system events and may not be suitable for all environments.
Last updated