51K Views

UVdesk met Progressieve Web App

Wat is Progressieve Web App / PWA?

Progressieve web app of PWA is een manier, waarop wij bieden verschillende functies, zoals push-bericht, achtergrond synchroniseren, home-scherm knop voor onze gebruikers voor een betere website ervaring of kan zeggen dat App-achtige ervaring met het web. De Progressieve Web Applicatie is zeer snel in vergelijking met de normale website van onze applicatie.

 

Waarom moeten we dit gebruiken?

In deze tijd van Web + Mobiele tijdperk waar de gebruikers zijn vooral afhankelijk van hun apparaten en zelfs op Mobiele (80% van de internet gebruikers een smartphone) heel veel van, we kunnen het niet negeren elke vorm van platforms. Als we het verliezen van de focus op welk platform dan is het zeker dat we gaan verliezen tegen onze concurrent. Ongeacht dit kunnen er verschillende andere dingen, die kan de oorzaak zijn van minder verkeer op onze website. Als onze website heeft een grote css, js-bestanden, te veel afbeeldingen, verschillende lettertype (die willen we niet nodig hebben, maar we hebben om ze toe te voegen) of gebruikers hebben een lage internet-verbinding (het is niet hun schuld, want in de laatste Baas en Klanten hebben altijd gelijk 😉 ) etc. Wat de reden ook is, het gaat om ons te achtervolgen in termen van omzet. Als een gebruiker van een website in termen van deze gevallen dan zeker deze zal mijn point of view –

Als een Klant oogpunt

Klant/ Gebruikers zijn de zielen van de website als ze er niet zijn, we zijn al dood of, indien niet dan zullen we al snel. 53% van de gebruikers zal verlaten een site als deze langer duurt dan 3 seconden om te laden! En als het eenmaal is geladen, ze verwachten dat ze snel zijn, geen janky te bladeren of langzaam te reageren interfaces., Zodat we kunnen denken, hoe veel de verwachtingen van klanten stijgt met onze concurrenten. Het is vrij eenvoudig, klanten willen snel antwoord andere dingen komen later als we zijn geven Iphone7 voor 1$, maar als de pagina niet openen dan niemand is gaan/kunnen kopen. Als we niet het vullen van alle blanks in deze tijd van het tech tijdperk, dan kunnen we niet verdienen 121bn yuan ($18 miljard) in een enkele dag.

Als Ontwikkelaar/ Eigenaar het oogpunt van

Als een ontwikkelaar, wat is het meest fundamentele probleem we geconfronteerd? Volgens mij is het de SNELHEID van onze website, hoe snel zijn we dienen verzoeken van de klant? Als web reageert snel (ik heb het over voornamelijk de voorkant van gegevens, net als html/css of statische gegevens) spreekt het voor zich dat de klant van plan om langer te blijven omdat ze anders zijn gaan surfen op een andere site binnen een paar minuten, het is net als met roken, we weten niet hoeveel gevaarlijker het is nu maar in de laatste, we zijn dood, dus houdt onze website.

Zo ontwikkelaar wil een manier om de snelheid van dingen en er zijn tal van opties om het te doen zoals caching onze statische inhoud in de cache van de browser met behulp van het instellen van de parameters in de header van de server script of via een andere manier, maar het is echt de beste manier? Wat als we de wensen van net na de vorige update? Hebben we echt nodig voor het opslaan van allerlei soorten gegevens in de cache, zoals ik normaal gesproken gebruikt MySql voor de database zo duidelijk is, zal ik liever een soort database als browser biedt? en kan ik in het gemakkelijk?

Dus als ik je vertelde dat we het kunnen oplossen van deze dingen met PWA en hoe wordt het :). Voordat dat laten we eens kijken, wat is het nu eigenlijk of wat is achter het?

 

Wat is het?

Zoals ik al schreef PWA is een manier om een mobiele applicatie, zoals web-ervaring, maar wat zit er achter dit grote concept. Het is Werknemer (met stille geluk 🙂 ). Eigenlijk, als een ontwikkelaar wat het probleem waar ik mee te maken heeft, meestal was dat ik niet in staat was om te hacken verzoek als enige browser is op te sturen naar de server of was het missen van de single point 😐 hier komt de Service Werknemer. Service werknemer is een soort proxy server is tussen de server en de browser van de gebruiker. Alles zal pas aan toe als iemand vraagt en wij kunnen manipuleren deze verzoeken en hun reactie.

Dus Service werknemer biedt ons een manier om deze dingen te doen met enkele lijnen javascript code. De Basic-syntaxis is als deze

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

Wat kunnen we doen met het (Service werknemer)?

Met de hulp van de Dienst de Werknemer, kunnen we heel veel en alles wat we zelf niet kunnen doen, eerder. Met de hulp van de dienst de werknemer, kunnen we volledig werken op browser zoals caching onze inhoud, het opslaan van gegevens in IndexedDB en andere bewerking.

Wij kunnen Web manifest aan de gebruiker voor de toepassing als ervaring. In deze afbeelding zien we een UVdesk pictogram op de mobiele startpagina

Met hulp van het, kunnen we volledig bladeren UVdesk willen bekijken we het, in de toepassing.

Homepage

Ticket lijst weergeven

Plus, we kunnen het verzenden van Push-notificaties aan onze gebruikers, kunnen hen antwoorden als gebruiker van het netwerk niet goed werkt (met behulp van caching of andere wij eerder heeft toegevoegd).

Zonder het Internet, maar had geen gegevens in de cache nog

Zonder het Internet, maar waar de gegevens van Service Werknemer

Wij kunnen zorgen voor kennisgeving aan de gebruiker om te werken als we bijgewerkt sommige inhoud die is opgeslagen in de browser van de gebruiker.

 

Wat is het volgende?

Ja, natuurlijk, er is altijd iets naast, niets is ingevuld. In het volgende, we gaan om te zien eigenlijk, hoe bouwen we dit voor UVdesk en wat zijn de problemen waarmee we geconfronteerd worden? Dank u voor uw tijd.

Als u vragen heeft, neem dan gerust hier contact met ons op support@uvdesk.com

 

Zijn er voorbeelden van?

Natuurlijk, zonder voorbeeld, hoe gaan we leren? Dit zijn een paar links die ik heb gebruikt in het leren en op het moment van schrijven.

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