DEV Community

Eke Enyinnaya Diala
Eke Enyinnaya Diala

Posted on

PWAs for beginners

I was discussing with my step brother a few days ago (he is taking a course on Web development) and I told him about PWAs and much to my surprise he said he hadn't heard much of it neither did he really understand it. A few weeks earlier, I was also discussing with two of my classmates from the university who were also getting into web development and they also didn't really understand what it was. So here's my attempt to explain it.

What exactly are PWAs?

PWA is an acronym for Progressive Web Applications. They are Web applications that behave like mobile applications- they can be used offline and can be installed on mobile devices like mobile apps. They're making waves because;
a) they are cheaper to build than mobile applications, and
b) they are cross platform-- they can run wherever the browser runs. So, if I, an online store owner, wants my users to have a mobile experience, I don't have to build a mobile application. I can have the same web application running as a mobile application on mobile devices. That saves cost and time. Granted, you wouldn't have all the access to the device native features but support for that is growing, besides it's not like an online store needs access to lots of native features.

How do PWAs achieve this?

They use what is known as Service Workers. In simple terms, service workers decide what to fetch for the browser when a url is visited. Service workers intercept the request and check if they already have a copy of the response for that request. If they don't, they fetch the page, cache it for future use, and serve it to the browser. If they do, they send the browser the cached response. Behind the scenes, they also check if the copy of the response they have is the same as what is on the server and will let the browser know if it is not. It is up to the developer to listen for this event and decide the best way to let the user know. Most people use a snack bar.

So if you visit a url for the first time, the service worker will fetch the page, cache it, and send the page to the browser. Next time, you request the same page, it will not try to fetch it from the server, it will serve you the local copy. This means that with or without Internet, you can still access the page because the beautiful things have it cached.

For further reading, I found this article really helpful.

Top comments (0)