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 } 1234567891011121314151617181920212223242526 /*** 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 workerif ('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 [email protected] 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 Tag(s) fast pwa service worker speed uvdesk Category(s) progressive web app pwa service worker uvdesk