SOLUÇÃO PARA PWA

Bom dia pessoal, eu tenho um sistema ERP para empreiteiras do ramo de energia, e um dos meus grandes e principais problemas e a funcionalidade Offline! exemplo eu preciso que na versão mobile, de um certo setor funcione online recebe as ordens de serviço e quando vão para o campo executar o serviço consigam lançar todos os dados necessários de cada ordem e quando estiver online novamente sincronize ( envie os dados para o banco de dados ) , sei que no wix esta funcionalidade ainda não e possível ate onde eu sei. PORÉM!

Tenho 2 soluções:

1° Esta e a que mais daria certo porem ainda esta muito difícil: é preciso criar um outro aplicativo mobile nativo com banco de dados MYsql ou qualquer outro, e colocar o wix para comunicar com a base de dados externa ( que agora é possível com o wix ), porem ainda e muito difícil. 2° Esta foi uma solução tosca e para min não funciona bem, devido meu sistema ser mais complexo, porem para alguns pode ser útil: funciona da seguinte forma; 1° Vamos utilizar a função do wix storage local e criamos um objeto vazio, para isto segue o código.

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

2° Eu criei um cenário de test segue modelo

contem:

1 campo de entrada 1 repetidor para visualizar os dados lançados

3 botoes sendo eles

1 para lançar

1 para limpar os dados

1 para sincronizar quando online

3° segue o código do botão lançar dados

export function button33_click(event) {

********** aqui e gerado uma um objeto com 2 campos, o id e o nome **********

 let adicionar = {
 "_id": (Math.floor((Math.random() * 100000000) + 1000000)).toString(),
 "nome": $w("#input70").value,
    }
    
**** aqui nos pegamos os dados que estão vazios e adicionamos o objeto criado acima **** 
    dados.push(adicionar)
    console.log(dados)
    
********** aqui nos lançamos os dados no repetidor ********** 
    $w("#repeater3").data = dados
    $w("#repeater3").onItemReady(($item, itemData, index) => {
        $item("#text586").text = itemData._id;
        $item("#input75").value = itemData.nome;
    });
    
    ********** aqui vem a jogada para funcionar offline **********
 
    session.setItem("storage", dados) **** esta função guarda na sessão do seu navegado os dados *****
    $w("#text734").text = "Adicionou"
    $w("#text734").show()
    
********** aqui uma função simples para fazer desaparecer a mensagem de sucesso apos 3 segundos **** 
    setTimeout(function () {
        $w("#text734").hide()
    }, 3000);

}

4° A jogada e a seguinte apos a pessoa abrir a pagina no celular ou computador, ela pode ficar offline que o código vai continuar funcionando, porem a pessoal não pode sair da pagina e voltar novamente se não, vai parar de funcionar e vai dar error de conexão sem internet.

5° a função session.setItem("storage", dados) vai guardando os dados que a pessoa vai lançando

6° Agora a função que vai funcionar quando voltar a conexão com a internet ( sincronizar )

****** aqui vamos criar um objeto que sera lançado no banco de dados teste ******
 let toInsert = {
 "id": (Math.floor((Math.random() * 100000000) + 1000000)).toString(),
 "dados": dados,
    };
    
****** aqui sera lançado no banco de dados TESTE todos os dados guardados na variavel 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()
        })
        
       ****** obs: nao vai funcionar se não ouver conexão com a internet ******

DESTA FORMA CRIAMOS UMA PAGINA QUE LANÇA DADOS QUANDO ONLINE E OFFLINE E OS DADOS LANÇADOS SÃO GUARDADOS SEM SESSÃO E APOS A CONEXÃO COM A MESMA OS DADOS PODEM SER ENVIADOS PARA O BANCO DE DADOS

SEGUE O CODIGO COMPLETO DA PAGINA

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()
        })
}