Introdução aos Progressive Web Apps

1

O que são Progessive Web Apps?

2

O que é o React.js?

3

Conhecendo PWAs e seus limites

4

Apresentando o Projeto do curso e arquitetura

5

Instalando dependências e preparando um ambiente

6

Platzidoro 1: palavras cruzadas

Estruturando o seu primeiro PWA

7

Criando o seu primeiro PWA com create-react-app

8

Conhecendo a estrutura do React.js e criando um Hello World

9

Criando seu primeiro componente React para o PWA

10

Entendendo Stateless e Stateful componentes

11

Entendendo React Hooks

12

Instalando bibliotecas de componentes Open Source

13

Platzidoro 2: complete o jogo

Construindo um aplicativo de Matchs para estudo

14

Entendendo Flexbox

15

Criando a tela inicial do aplicativo

16

Implementando as screens

17

Criando a tela de perfil

18

Adicionando estilo á tela de perfil

19

Mobile first!

20

Criando a tela de matches

21

Renderizando a lista de componentes

22

Criando a tela de encontrar estudantes

23

Desenvolvendo os componentes da tela de encontrar estudantes

24

Adicionando lógica à tela de encontrar estudantes

25

Salvando informações localmente com o LocalStorage

26

GitHub e Promessas

27

Configurando um banco de dados remoto: o Firebase Firestore

28

Conectando o React ao banco para ler e escrever os dados de match

29

Utilizando os dados do banco remoto no PWA

30

Realizando o evento de Match

31

Adicionando os matches reais à lista de matches

32

Platzidoro 3: Mosaico

Preparando o aplicativo para produção

33

Utilizando sensores de celular

34

Configurando o Service Worker

35

Configurando o Manifest.json

36

Configurando push notifications

37

Exibindo push notifications no PWA

38

Realizando o build da aplicação

39

Realizando o deploy para produção

Você não tem acesso a esta aula

Continue aprendendo! Junte-se e comece a impulsionar sua carreira

Configurando push notifications

36/39
Recursos

Contribuições 1

Perguntas 0

Ordenar por:

Quer ver mais contribuições, perguntas e respostas da comunidade?

por conta da nova versão do firebase ( versão 9 ) mudou um pouco o código da service e da firebase-messaging

export const requestPermision = async () => {
  try {
    //pede permissao ao usuarios
    const ms = firebase.messaging();

    const permission = await Notification.requestPermission();

    try {
      // Solicite permissão para enviar notificações push
      if (permission === "granted") {
        const token = await ms.getToken();

        // Envie o token de registro para o seu servidor
        console.log("Token de registro do serviço de mensagens: ", token);

        // Ouça mensagens recebidas pelo serviço de mensagens quando tela estiver aberta
        ms.onMessage((payload) => {
          console.log("Mensagem recebida: ", payload);
          // Trate a mensagem recebida aqui
        });
      } else {
        // Permissão negada ou ignorada
        console.log("Permissão para enviar notificações push não concedida.");
      }
    } catch (error) {
      console.log(
        "Erro ao solicitar permissão para enviar notificações push: ",
        error
      );
    }

   
  } catch (error) {
    console.log("Error ao tentar obter permissao notificação", error);
  }
};