11K Views

UVdesk with Progressive Web App

Updated 1 March 2022

Facebook Linkedin

What is Progressive Web App / PWA?

A progressive web app or PWA is a way, in which we provide various features like push notification, background sync, home screen button to our users for a better web experience or can say App-like experience with the web.

The Progressive Web Application is lightning fast compared to the normal website of our application.

Why do we need to use this?

At this time of Web + Mobile era where users are mostly dependent on their devices and even on Mobile (80% of internet users own a smartphone) very much, we can not ignore any kind of platforms.

If we are losing focus on any platform then surely we are going to lose against our competitor. Regardless of this there can be various other things which can be the reason for less traffic to our website.

Like if our website has large css, js files, too many images, various font families (which we don’t want to need but we have to add them) or users have a low internet connection (it’s not their fault because in last Boss and Customers are always right 😉 ) etc.

Whatever the reason, it’s going to haunt us in terms of revenue. As a user of any website in terms of these cases then surely these will be my point of view –

As a customer point of view

Customer/ Users are the souls of any website if they aren’t there, we are already dead or if not then we will be soon. 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, they expect them to be fast, no janky scrolling or slow-to-respond interfaces. So we can think, how much the expectations of customers increases with our competitors as well.

It’s pretty simple, customers want fast response other things to come later like if we are giving Iphone7 for 1$ but if the page is not opening then no one is going/able to buy it.

If we aren’t filling all blanks at this time of the tech era then we can’t earn 121bn yuan ($18 billion) in a single day.

As a Developer/ Owner point of view

As a developer, what is the most basic problem we faced? According to me, it’s the SPEED of our website, how fast are we serving customer requests?

If web response is fast (I am talking about mostly front data like HTML/CSS or static data) then obviously customers going to stay longer else they are going to surf another site within minutes.

It’s like smoking, we don’t know how much dangerous it’s now but in the last, we are dead so does our website.

So developer wants a way to speed up things and there are plenty of options to do it like caching our static content into the browser cache using setting parameters in the header from the server script or using another way but really is it the best way?

What if, we want to update something just after the previous update? Do we really need to store all kinds of data in the cache, like I normally used MySql for the database so obviously, I will prefer some kind of database if the browser provides any? and can I store it in it easily?

So if I told you that we can solve these things with PWA then how is it :). Before that let’s check, what is it actually or what is behind it?

What is it?

Like I wrote PWA is a way to get a mobile application-like web experience but what’s behind of this big concept. It’s Service Worker (with silent happiness 🙂 ).

Actually, as a developer what problem I faced, mostly was that I was unable to hack requests if any browser was sending it to the server or was missing the single point for it 😐 here comes the Service Worker.

A service worker is a kind of proxy server between the server and user browser. Everything will pass to it if someone is requesting and we can manipulate those requests and their response as well.

So Service worker provides us a way to do these things with a few lines of javascript code. The basic syntax is like this

What can we do with it (Service worker)?

With the help of a Service Worker, we can do pretty much everything which we weren’t able to do, previously. With help of the service worker, we can completely operate on a browser like caching our content, storing data into IndexedDB and other operations as well.

We can provide a Web manifest to the user for the application-like experience. In this image, we can see the UVdesk icon on the mobile home page

homapagemobile

With help of it, we can completely browse UVdesk like we are viewing it, in the application.

Homepage dashboarduvdesk

Ticket list view ticketlistuvdesk

Plus, we can send push notifications to our users, can serve them responses if the user network isn’t working properly (using caching or others we added earlier).

Without the Internet but didn’t cache data yet

Without the Internet but serving data from Service Worker

We can provide a notification to the user to update if we updated some content that is cached in the user browser.

What’s next?

Yes, of course, there is always something next, nothing is completed. In the next one, we are going to see actually, how we build this for UVdesk and what are the problems we faced? Thank you for your time.

If you have any queries, feel free to contact us here support@uvdesk.com

Are there any examples of it?

Of course, without example, how are we going to learn? These are a few links that I used in learning and at the time of writing.

Google Blog

Booking.com

MDN

and great one Jake Archibald

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


2 comments

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