Most Powerful Open Source ERP

Use Gadget Installer in Officejs Web Site

overview of installer gadget.
  • Last Update:2016-12-22
  • Version:001
  • Language:en

What is this install gadget ? 

Quick overview 

Gadget installer replace appcache by using serviceworker and jIO to deliver pages.

It's composed by an installer gadget and a presentation gadget for the installer.

If you want an exemple, use this branch

Install business template "erp5_officejs" and use web site "code_editor".

 Working process

  1. Installer gadget put all pages defined by a version in a local storage (indexeddb) via jio repair, during that install time the presentation gadget provide a waiting page.
  2. It install a serviceworker wich continue to download page from a cache manifest you have give him in parameters. 
  3. The service worker get page from local storage, ( if present else fetch from web ) and deliver to the site.  

How add this to your web site ?


  • Have a version defined for your web page and only your web page
  • These pages must not have maccro inside.
  • If you can't defined a version for some page, put them in a cache manifest ( this manifest must have the version ).
  • All your pages must have an unique url_string defined, this will be the id of your local storage.
  • Your landing page must have "/" as url_string.


You juste have to put your configuration in the html, here an exemple of gadget installer :

<!DOCTYPE html>
<html manifest="gadget_officejs_code_editor_install.appcache">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="gadget_erp5_nojqm.css">

    <title> OfficeJS Install </title>

    <script src="rsvp.js"></script>
    <script src="renderjs.js"></script>
    <script src="jiodev.js"></script>

    <script src="gadget_officejs_install.js"></script>
    <script data-install-configuration="document_version" type="text/x-renderjs-configuration">codeeditor</script>
    <script data-install-configuration="version_url" type="text/x-renderjs-configuration">code_editor/</script>
    <script data-install-configuration="redirect_url" type="text/x-renderjs-configuration">code_editor/</script>
    <script data-install-configuration="cache_file" type="text/x-renderjs-configuration">gadget_officejs.appcache</script>
    <script data-install-configuration="app_name" type="text/x-renderjs-configuration">Code Editor</script>
    <script data-install-configuration="sub_app_installer" type="text/x-renderjs-configuration">../officejs_gadget_codemirror/</script>

Parameters :

  • document_version: version of your pages
  • version_url: version of your site, and this will be the serviceworker scope.
  • redirect_url: url of site with no serviceworker use.
  • cache_file: reference of your cache manifest.
  • app_name: name of your application.
  • sub_app_installer: url of all installer of application you use inside your main application.


  1. Create your install gadget with the right parameter.
  2. Put it on the root of your site.
  3. Let's try your web site !