PWA SOLUTION

Ask the community
, ,
1

Good morning guys, I have an ERP system for energy contractors, and one of my biggest and main problems and Offline functionality! example I need that in the mobile version, a certain sector works online receives the service orders and when they go to the field to execute the service manage to post all the necessary data of each order and when it is online again synchronize (send the data to the bank data), I know that in wix this functionality is still not possible as far as I know. HOWEVER!
I have 2 solutions:

1 ° This is the one that would work best, but it is still very difficult: it is necessary to create another native mobile application with MYsql database or any other, and put the wix to communicate with the external database (which is now possible with wix), but it is still very difficult.

2 ° This was a rough solution and for me it doesn’t work well, because my system is more complex, but for some it can be useful: it works as follows;

1 ° We will use the local wix storage function and create an empty object, for this the code follows.


		import { local } from 'wix-storage';
		let dados = []

2 ° I created a test scenario following model
contains:
1 input field
1 repeater to view the released data
3 buttons being them
1 to launch
1 to clear the data
1 to sync when online

3 ° follows the code of the button throw data

export function button33_click(event) {

********** here an object with 2 fields is generated, the id and the name **********

 let adicionar = {
 "_id": (Math.floor((Math.random() * 100000000) + 1000000)).toString(),
 "nome": $w("#input70").value,
    }
    
**** here we take the data that is empty and add the object created above **** 
    dados.push(adicionar)
    console.log(dados)
    
********** here we throw the data in the repeater ********** 
    $w("#repeater3").data = dados
    $w("#repeater3").onItemReady(($item, itemData, index) => {
        $item("#text586").text = itemData._id;
        $item("#input75").value = itemData.nome;
    });
    
    ********** here comes the move to work offline **********
 
    session.setItem("storage", dados) **** this function saves data in your browser's session *****
    $w("#text734").text = "Adicionou"
    $w("#text734").show()
    
********** here a simple function to make the success message disappear after 3 seconds **** 
    setTimeout(function () {
        $w("#text734").hide()
    }, 3000);

}

4 ° The move and the following after the person opens the page on his cell phone or computer, he can go offline that the code will continue to work, but the staff cannot leave the page and come back again if not, it will stop working and will give connection error without internet.

5 ° the session.setItem function (“storage”, data) will keep the data that the person will be releasing

6 ° Now the function that will work when you return to the internet connection (synchronize)

****** here we will create an object that will be launched in the test database ******
 let toInsert = {
 "id": (Math.floor((Math.random() * 100000000) + 1000000)).toString(),
 "dados": dados,
    };
    
****** here all data stored in the data variable will be launched in the TEST database 
    wixData.insert("TESTE", toInsert)
        .then((results) => {
            let item = results;
            
            $w("#text734").text = "sincronizou e enviou os dados para o banco de dados"
            $w("#text734").show()
        })
        
       ****** note: it will not work if there is no internet connection ******

IN THIS WAY WE CREATE A PAGE THAT LAUNCHES DATA WHEN ONLINE AND OFFLINE AND THE LAUNCHED DATA IS SAVED WITHOUT SESSION AND AFTER THE CONNECTION WITH THE SAME DATA CAN BE SENT TO THE DATABASE

FOLLOW THE FULL CODE OF THE PAGE

import wixData from 'wix-data';
import { session } from 'wix-storage';

let dados = []

$w.onReady(function () {

});

export function button33_click(event) {

 let adicionar = {
 "_id": (Math.floor((Math.random() * 100000000) + 1000000)).toString(),
 "nome": $w("#input70").value,
    }

    dados.push(adicionar)
    console.log(dados)

    $w("#repeater3").data = dados
    $w("#repeater3").onItemReady(($item, itemData, index) => {
        $item("#text586").text = itemData._id;
        $item("#input75").value = itemData.nome;
    });

    session.setItem("storage", dados)
    $w("#text734").text = "Adicionou"
    $w("#text734").show()

    setTimeout(function () {
        $w("#text734").hide()
    }, 3000);

}

export function button34_click(event) {
    session.setItem("storage", [])
    dados = []
    $w("#repeater3").data = dados
    $w("#repeater3").onItemReady(($item, itemData, index) => {
        $item("#text586").text = itemData._id;
        $item("#input75").value = itemData.nome;
    });
}

export function button35_click(event) {

 let toInsert = {
 "id": (Math.floor((Math.random() * 100000000) + 1000000)).toString(),
 "dados": dados,
    };

    wixData.insert("TESTE", toInsert)
        .then((results) => {
 let item = results;

            $w("#text734").text = "sincronizou e enviou os dados para o banco de dados"
            $w("#text734").show()
        })
}