51K Views

UVdesk com Progressiva Web App

o Que é Progressiva Web App / PWA?

Progressiva web app ou o PWA é uma forma, em que nós fornecemos várias características como notificação de envio, sincronização em segundo plano, o ecrã home botão para nossos usuários para uma melhor experiência na web, ou pode-se dizer App-como a experiência com a web. A Progressiva Aplicação Web é extremamente rápida em comparação ao normal site da nossa aplicação.

Por que precisamos usar isso?

Nesta época de Web + Mobile era onde os usuários são em sua maioria dependem de seus dispositivos e até mesmo no Celular (80% dos usuários de internet possuem um smartphone) muito, não podemos ignorar qualquer tipo de plataformas. Se estamos a perder o foco em qualquer plataforma, em seguida, certamente vamos perder contra o nosso concorrente. Independentemente isto não pode ser várias outras coisas que podem ser o motivo do menor tráfego para o nosso site. Como se o nosso website tem grande css, js, muitas imagens, várias famílias de tipos de letra (o que não queremos precisamos, mas temos que adicioná-los) ou os usuários que têm uma baixa conexão com a internet (não é sua culpa, porque na última Chefe e os Clientes estão sempre certos 😉 ) etc. Seja qual for o motivo, ele vai nos assombrar em termos de receita. Como um usuário de qualquer site em termos de, nestes casos, então, certamente, estes serão o meu ponto de vista –

Como um ponto de vista do Cliente

Clientes/ Usuários são a alma de qualquer site se eles não estão lá, nós já estamos mortos, ou se não, então nós vai ser em breve. 53% dos usuários vai abandonar um site, se ele demora mais do que 3 segundos para carregar! E depois de carregado, eles esperam que ser rápido, não janky deslocamento lento para responder interfaces. Para que possamos pensar, o quanto as expectativas dos clientes aumentam com os nossos concorrentes mais pequenos. É muito simples, os clientes querem resposta rápida outras coisas para vir mais tarde, como se nós estamos dando Iphone7 para 1$, mas se a página não está abrindo, em seguida, ninguém vai/capaz de comprá-lo. Se não estivermos preenchendo todos os espaços em branco no momento da tecnologia era, então, nós não podemos ganhar 121bn yuan (us$18 bilhões) em um único dia.

Como um empreendedor/ Proprietário ponto de vista

Como um desenvolvedor, que é o mais básico, problema que enfrentou? De acordo comigo, é a VELOCIDADE do nosso site, quão rápido estamos servindo os pedidos de clientes? Se a resposta é rápida (o que eu estou falando, principalmente, frente a dados, como HTML/CSS ou dados estáticos), então, obviamente, o cliente vai ficar mais tempo mais eles estão indo para surf outro site dentro de minutos, é como fumar, não sabemos o quão perigoso é agora, mas no último, que estamos mortos para o nosso site.

Assim desenvolvedor quer uma forma de acelerar as coisas e há uma abundância de opções para fazê-lo, como cache nosso conteúdo estático para o cache do navegador usando a definição de parâmetros no cabeçalho do script de servidor ou usando outra forma, mas realmente é a melhor maneira? O que se queremos atualizar algo apenas depois da anterior actualização? Nós realmente precisamos para armazenar todo o tipo de dados em cache, como eu normalmente utilizado o MySql para o banco de dados então, obviamente, eu prefiro algum tipo de banco de dados se o browser fornece qualquer? e posso armazenar no-lo facilmente?

Então, se eu disse a você que nós podemos resolver essas coisas com PWA, em seguida, como é que é :). Antes disso, vamos verificar o que é de verdade ou o que está por trás disso?

o Que é?

Como eu escrevi PWA é uma maneira de obter uma aplicação móvel como a experiência na web, mas o que está por trás deste grande conceito. É Serviço de Trabalho (com silenciosa felicidade 🙂 ). Na verdade, como um desenvolvedor, qual é o problema que eu enfrentei, a maioria foi de que eu era incapaz de hack pedido, no caso de qualquer navegador foi enviá-lo para o servidor ou estava faltando o único ponto para ele 😐 aqui entra o Trabalho do Serviço. Serviço de trabalhador é um tipo de servidor proxy entre o servidor e o browser do utilizador. Tudo vai passar, se alguém está solicitando e podemos manipular as solicitações e a sua resposta.

Então Serviço do trabalhador nos fornece uma maneira de fazer essas coisas com poucas linhas de código javascript. Sintaxe básica é como este

/**
* Webkul Software.
*
* @category Webkul, Uvdesk
* @package Webkul_UVdesk_PWA
* @author Nikhil
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
 
// Few listener for PWA/service worker with registering service worker
if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/sw.js').then(function(reg) {
		//our service worker code
	})

	navigator.serviceWorker.addEventListener('controllerchange', function() {

    });

    navigator.serviceWorker.addEventListener('statechange', function() {
        
    });

	//our other service worker code
}

o Que podemos fazer com ele (Serviço de trabalho)?

Com a ajuda de Serviço de Trabalhador, podemos fazer praticamente tudo o que não conseguimos fazer, anteriormente. Com a ajuda de serviço de trabalhador, podemos operar no navegador, como o cache de nosso conteúdo, armazenando dados em IndexedDB, e de outra operação.

Nós podemos fornecer Web manifesto para o usuário para o aplicativo como experiência. Nesta imagem, podemos ver UVdesk ícone na página principal para dispositivos móveis

Com a ajuda dela, podemos procurar UVdesk como estamos vendo, no aplicativo.

página inicial

Bilhete de exibição de lista

Além disso, podemos enviar notificações Push para os nossos utilizadores, pode servir-lhes de respostas se o usuário de rede não esteja funcionando corretamente (usando o cache ou outras que adicionou anteriormente).

Sem Internet, mas não cache de dados ainda

Sem Internet, mas servindo de dados de Serviço de Trabalhador

Nós podemos fornecer uma notificação para o usuário de atualização se nós atualizamos algum conteúdo que é armazenado em cache no navegador do usuário.

o Que vem a seguir?

Sim, claro, há sempre algo próximo, nada está concluído. Na próxima, vamos ver, na verdade, como esta construção para UVdesk e quais são os problemas que enfrentamos? Obrigado pelo seu tempo.

Se você tem alguma pergunta, sinta-se livre para entrar em contato conosco aqui support@uvdesk.com

há exemplos de que?

É claro que, sem o exemplo, como vamos aprender? Estes são alguns links que eu usei na aprendizagem e na hora de escrever.

Blog do Google

Booking.com

MDN

e um grande Jake Archibald

. . .

Comments (2)

Add Your Comment

  • Raghav
    Is PWA feature available in the open source version? Thanks.
    • Vidushi Singh
      Hi Raghav, right at the moment this feature is available only in SaaS not in Open Source Version.
  • css.php