Documentation

Getting started

Install the browser plugin «Live Reload Browser Page» version you need:
- For Google Chrome:
  - Live Reload Browser Page
  - Live Reload Browser Page (Pro)
- Firefox (not yet available)
Set up your tool (Gulp, Webpack, Grunt or other.):
- live-reload-bp

Browser plugin API

Description

The server requires use the WebSocket protocol.

Server

←→

Client (browser plugin)

When the server is started and the connection is established with the browser plugin, the following requests can be used on the server.

Request data

Structure


  {
    action: value,
    partial_reload: {
      tag: value,
      src: value,
      href: value,
      execute_before: value,
      execute_after: value,
      reloadPageIfResNotExists: value,    
      html: {
        force_load_images: value
      },
      js: {
        resetHTML: value,
        clear_obsolete_tags: value,
        use_method_1: {
          send_event_onload: value,
        },
        use_method_2: value,
        use_method_3: {
          check_loaded_successful: value 
        }
      }
    }
  }

Key	Required	Type	Description
action	required	String	This value `page_reload` - reloads the browser page.
partial_reload	optional	Object	Reloads elements of a browser page without completely reloading the page. You can reload separately: CSS, HTML or JavaScript.

Key	Required	Type	Description
partial_reload
tag	required	String	`link` - reloads <link>. `script` - reloads <script>. `html` (experimental) - reloads HTML (the first request downloads all resources completely. All subsequent requests only update HTML.).
src	required for reload script	String	The path to the file specified in the src <script>. As example: `/build/js/index.js`
href	required for reload link	String	The path to the file specified in the href <link>. As example: `/build/style/index.css`
execute_before	optional	String	Function execution before partial reload. As example: `var before_Style = function(){ // Code }.toString();`
execute_after	optional	String	Function execution after partial reload. As example: `var after_Style = function(){ // Code }.toString();`
reloadPageIfResNotExists	optional	Boolean	`true` - full reload of a browser page when a resource is not found. Works with `partial_reload.tag: 'link'`. Works with `partial_reload.tag: 'script'` but only with `partial_reload.js.use_method_1`.
html	optional	Object	Options for HTML reloading.
js	required for reload script	Object	Options for JavaScript reloading.

Key	Required	Type	Description
partial_reload.html
force_load_images	optional	Boolean	`true` - forces reloads of images on the page. Usually, images are taken from the browser cache when the HTML is partially reloaded. Default is `false`.

Key	Required	Type	Description
partial_reload.js
resetHTML	optional	Boolean	`true` - reset HTML to initial state, after Javascript changed it. Default is `false`.
clear_obsolete_tags	optional	Array	Marks the desired HTML tags with a marker before reloading, and deletes them after a JavaScript reload. As example: `['style', 'link']` - obsolete versions of <styles> tags and <link> will be removed. This option may be needed when dynamically adding <styles>, <link> or other tags.
use_method_1	required if other method is not defined	Boolean\|Object	`true` or `{}` - recreates a HTML node <script>. Global variables will not be removed. Event listeners will not be removed.
use_method_2	required if other method is not defined	Boolean	`true` - (experimental) - First loads a <script> and then updates the HTML. Global variables will not be removed. Event listeners will be removed.
use_method_3	required if other method is not defined	Object\|Boolean	`true` or `{}` (experimental) - updates HTML with modification (a timestamp is added to the path to a <script>. As the timestamp is added, old scripts remain in the cache until the browser page is closed).

Key	Required	Type	Description
partial_reload.js.use_method_1
send_event_onload	optional	Boolean	`true` - send onload event after script reload. Default is `false`.

Key	Required	Type	Description
partial_reload.js.use_method_3
check_loaded_successful	optional	Boolean	`true` - checks if the script has loaded. This check can slow down the loading speed of the script. Default is `false`.

Examples

Full reload of the browser page.


  const page_reload_data = {
    action: 'page_reload'
  };

  // client.send(JSON.stringify(page_reload_data));

Reload only <link> tag.


  const page_reload_data = {
    action: 'page_reload',
    partial_reload: {
      tag: 'link',
      href: '/build/style/index.css'
    }
  }; 

  // client.send(JSON.stringify(page_reload_data));

Reload only HTML.


  const page_reload_data = {
    action: 'page_reload',
    partial_reload: {
      tag: 'html',    
      html: {
        force_load_images: true
      }
    }
  };

  // client.send(JSON.stringify(page_reload_data));

Reload only <script>.


  const page_reload_data = {
    action: 'page_reload',
    partial_reload: {
      tag: 'script',
      src: '/build/js/index.js',    
      js: {
        clear_obsolete_tags: ['style'],
        use_method_1: {
          send_event_onload: true
        }
      }
    }
  };

  // client.send(JSON.stringify(page_reload_data));

Reload only <script>.


  const page_reload_data = {
    action: 'page_reload',
    partial_reload: {
      tag: 'script',
      src: '/build/js/index.js',    
      js: {
        resetHTML: true,
        use_method_2: true
      }
    }
  };

  // client.send(JSON.stringify(page_reload_data));

Reload only <script> and use execute_before.


  let before = function(){
    let $script1 = document.getElementById("script1");
    if($script1 != null){
        $script1.innerHTML = '';
    }
  }.toString();

  const page_reload_data = {
    action: 'page_reload',
    partial_reload: {
      tag: 'script',
      src: '/build/js/index.js', 
      execute_before: before,   
      js: {
        use_method_2: true
      }
    }
  };

  // client.send(JSON.stringify(page_reload_data));