51K Views

UVdesk con Progressivo Web App

Qual è il Progressivo Web App / PWA?

Progressivo web app o PWA è un modo in cui forniamo le varie caratteristiche, come notifiche push, sincronizzazione in background, pulsante home screen ai nostri utenti una migliore esperienza web o può dire App-come l’esperienza con il web. La Progressiva Applicazione Web è molto veloce rispetto al normale sito web della nostra applicazione.

 

Perché abbiamo bisogno di usare questo?

In questo momento di Web + Mobile epoca in cui gli utenti sono per lo più dipendenti dai loro dispositivi e anche su Mobile (l ‘ 80% degli utenti di internet possiede uno smartphone), non possiamo ignorare qualsiasi tipo di piattaforme. Se stiamo perdendo la messa a fuoco su qualsiasi piattaforma, quindi sicuramente perderemo aginst nostro concorrente. Indipendentemente da questo, ci possono essere varie altre cose che possono essere la ragione di una minore quantità di traffico del nostro sito. Come se il nostro sito è grande css, js file, troppe immagini, varie famiglie di font (che non vogliamo bisogno, ma dobbiamo aggiungere) o gli utenti hanno una bassa connessione a internet (non è colpa loro, perché in ultimo Boss e il cliente ha sempre ragione 😉 ) etc. Qualunque sia la ragione, si sta andando a ritorcersi contro di noi in termini di fatturato. Come un utente di qualsiasi sito web in termini di questi casi, quindi sicuramente questi saranno il mio punto di vista –

Come un punto di vista del Cliente

Clienti/ Utenti, sono le anime di qualsiasi sito web, se non ci sono, ci sono già morti o se poi non sarà presto. il 53% degli utenti abbandona un sito, se si prende più di 3 secondi per caricare! E una volta caricato, si aspettano loro di essere veloce, nessun janky scorrimento o lento a rispondere interfacce. in Modo che possiamo pensare, quanto le aspettative dei clienti aumenta con i nostri concorrenti. E ‘ piuttosto semplice, i clienti vogliono di risposta rapidi, le altre cose vengono dopo come se si stanno dando Iphone7 per 1$, ma se la pagina non si apre, nessuno sta andando/sono in grado di acquistare. Se non stiamo riempiendo tutti i vuoti in questo periodo dell’era informatica quindi non siamo in grado di guadagnare 121bn yuan ($18 miliardi di euro) in un solo giorno.

Come Sviluppatore/ Proprietario punto di vista

Come sviluppatore, quello che è il più fondamentale problema che abbiamo di fronte? Secondo me, è la VELOCITÀ del nostro sito, quanto velocemente stiamo servendo le richieste del cliente? Se la risposta web è veloce (sto parlando soprattutto di fronte a dati come html/css o dati statici) poi, ovviamente, il cliente ha intenzione di rimanere più a lungo altro stanno andando per navigare in un altro sito in pochi minuti, è come il fumo, non sappiamo quanto sia pericoloso è ora, ma negli ultimi, noi siamo morti, così fa il nostro sito web.

Così sviluppatore vuole un modo per accelerare le cose e ci sono un sacco di opzioni per fare caching nostri contenuti statici nella cache del browser utilizzando l’impostazione dei parametri nell’intestazione dal server script o utilizzando un altro modo, ma davvero è il modo migliore? Per di più, se si desidera aggiornare qualcosa solo dopo l’aggiornamento precedente? Abbiamo davvero bisogno di memorizzare tutti i tipi di dati nella cache, come ho normalmente utilizzato MySql per il database così, ovviamente, io preferisco un qualche tipo di database se il browser non fornisce alcuna? e può contenere facilmente?

Quindi, se ho detto che siamo in grado di risolvere queste cose con PWA come è :). Prima che proviamo, che cosa è o che cosa c’è dietro?

 

che Cosa è esso?

Come ho scritto PWA è un modo per ottenere un’applicazione mobile come esperienza web ma cosa c’è dietro a questo grande concetto. La Operaio di Servizio (con silent felicità 🙂 ). In realtà, come sviluppatore che cosa il problema che ho affrontato, per lo più era il fatto che ero in grado di hack richiesta se qualsiasi browser è stato l’invio al server o mancava il punto singolo per 😐 ecco che arriva il Servizio del Lavoratore. Operaio di servizio è un tipo di server proxy tra il server e il browser dell’utente. Tutto passa, se qualcuno è richiesta e siamo in grado di manipolare tali richieste e la loro risposta.

Modo di lavoro del Servizio ci fornisce un modo per fare queste cose, con poche righe di codice javascript. Sintassi di base è simile a questo

/**
* 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
}

Cosa possiamo fare con esso (operaio di Servizio)?

Con l’aiuto di un Operaio di Servizio, siamo in grado di fare praticamente tutto quello che non siamo stati in grado di fare in precedenza. Con l’aiuto di un operaio di servizio, siamo in grado di completamente operare sul browser caching i nostri contenuti, la memorizzazione dei dati in IndexedDB e altre operazioni.

Siamo in grado di fornire Web manifesto per l’utente per l’applicazione come esperienza. In questa immagine possiamo vedere UVdesk icona sulla home page mobile

Con l’aiuto di esso, si può completamente sfoglia UVdesk come si vede, nell’applicazione.

Homepage

Biglietto visualizzazione elenco

Inoltre, siamo in grado di inviare notifiche Push per i nostri utenti, può offrire loro risposte se l’utente di rete non funziona correttamente (usando la cache o altri abbiamo aggiunto in precedenza).

Senza Internet, ma non per la cache di dati di sicurezza

Senza Internet, ma servono dati da Operaio di Servizio

Siamo in grado di inviare una notifica all’utente di aggiornare se abbiamo aggiornato alcuni contenuti che è memorizzato nella cache del browser dell’utente.

 

Che succede?

Sì, certo, c’è sempre qualcosa a quel punto, nulla è stato completato. In avanti, stiamo andando a vedere, in realtà, come abbiamo costruito questo per UVdesk e quali sono i problemi che abbiamo di fronte? Grazie per il vostro tempo.

Se avete qualsiasi domanda, non esitate a contattarci qui support@uvdesk.com

 

vi Sono esempi di esso?

Naturalmente, senza esempio, come possiamo imparare? Questi sono alcuni link che ho usato nell’apprendimento e al momento della scrittura.

Google Blog

Booking.com

MDN

and great one 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