https://github.com/jerp86/postmessagewithwebview

Project is to demonstrate in a simple way how it is possible to have text and/or object communication between a Native/Hybrid app and a website, through window.postMessage().
https://github.com/jerp86/postmessagewithwebview

postmessage postmessage-api react-native react-native-example react-native-webview react-native-webview-bridge

Last synced: about 1 month ago
JSON representation

Project is to demonstrate in a simple way how it is possible to have text and/or object communication between a Native/Hybrid app and a website, through window.postMessage().

• Host: GitHub
• URL: https://github.com/jerp86/postmessagewithwebview
• Owner: jerp86
• License: mit
• Created: 2021-09-18T19:00:53.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-12-02T00:47:45.000Z (about 3 years ago)
• Last Synced: 2025-01-18T08:16:32.716Z (about 1 year ago)
• Topics: postmessage, postmessage-api, react-native, react-native-example, react-native-webview, react-native-webview-bridge
• Language: JavaScript
• Homepage:
• Size: 1.18 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
postMessage with WebView


---



  

  

  

    

  



---



  Sobre | 

  Motivo | 

  Requisitos





  Tecnologias | 

  Como baixar o projeto | 

  Licença



---



  

  

  



## :information_source: Sobre

Projeto trata de demostrar de forma simples como é possível haver comunicação de texto e/ou objetos entre um app Nativo/Híbrido e um site, através do window.postMessage().

## :interrobang: Motivo

Enquanto era produzido um WebApp que será chamado em uma WebView nativa (Android e iOS), foi detectado a necessidade de troca de informações entre o Nativo e WebApp.

## :seedling: Requisitos Mínimos

[NodeJS](https://nodejs.org/en/)

## :rocket: Tecnologias Utilizadas

O projeto foi desenvolvido utilizando as seguintes tecnologias

- [Expo](https://expo.dev/)

- [React Native](https://reactnative.dev/)

- [React Native WebView](https://github.com/react-native-webview/react-native-webview#readme)

- [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)

## :package: Como baixar o projeto

Para copiar o projeto, utilize os comandos:

```bash

  # Clonar o repositório

  ❯ git clone https://github.com/jerp86/postMessageWithWebView.git

  # Entrar no diretório

  ❯ cd postMessageWithWebView

```

Para instalar as dependências e iniciar o projeto, você pode utilizar o Yarn ou NPM:

**Utilizando yarn**

```bash

  # Instalar as dependências

  ❯ yarn

  # Iniciar o projeto

  ❯ yarn start

```

**Utilizando npm**

_PS: Caso utilize o NPM, apague o arquivo `yarn.lock` para ter todas as dependências instaladas da melhor forma._

```bash

  # Instalar as dependências

  ❯ npm install

  # Iniciar o projeto

  ❯ npm start

```

## :memo: Licença

Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.

---



  Feito com ❤️ por Jerp86 👋️ Entre em contato!