Progressive Web Apps — #SCASlackChat

Glory Adebowale
Nur: The She Code Africa Blog
6 min readMay 6, 2020

With Onalerona Mosimege

The SCASlackChat session is a slack interactive session within the She code Africa community where we receive talks on technical, non-technical or any other beneficial topics.

This article is the summary of the recent chat session with Miss Onalerona on Progressive Web Apps on 27th of April 2020. Miss Onalerona is a Software Engineer at Praekelt, a nonprofit organisation that has collaborated with many foundations including the Bill & Melinda Gates Foundation as well as the public infrastructures like the South African department for health to create tech solutions that would improve the lives of people living in poverty. She also organizes free software development workshop for women with no prior knowledge in software development.

Q: How would you describe Progressive Web Apps in simple terms?

Ona: Progressive Web Apps are a combination between Native Apps (e.g. the Instagram app you have installed on your phone) and your Web Apps (viewing a site on your browser). They combine the best components of Native Apps and The Web, being the reach to masses, and capability access.

In 4 words, PWA is described/ encapsulated as being:

  • Fast
  • Integrated
  • Reliable
  • Engaging

Q: What are some benefits of Progressive Web Apps (PWA)?

Ona: I’ll break it down by each the above 4 keywords mentioned

  1. PWAs are fast:

It has been documented that people tend to leave a website if it takes longer than 3 seconds to load. Because speed is a big advantage for using a PWA, you will be able to retain users where fast accessibility is a requirement

2. PWAs are integrated:

Normal websites function differently than to an app. Think of your Instagram app for example. You find it easily on your home page. Interaction with it is easy because it is embedded in your device. PWAs work like that, even though you do not have to download an actual app that takes data and space on your phone

3. PWAs are reliable:

They work on low broadband connections, and even when there is no internet connection

4. PWAs are engaging:

Push notifications is a feature for PWAs, thus, keeping interaction with the user longer than just a session on the site

Q: What makes an app a PWA?

Ona: All of the above mentioned — speed (a fast app e.g. you open, it does not take long to load), integration (no need to download the app), reliability (can work on low/no internet connection), and continuous engagement with the user(i.e. push notifications) — have to be highlighted features of the app. If the app is missing one of these strengths, it is not a PWA

Q: Are there any disadvantage(s) of PWA?

Ona: Yes, they are. Not all Native Apps or Web Apps can be easily turned into PWAs. You have to look at the audience you are catering to (your users) and the interaction needs with them.

PWA need certain infrastructure to be built on, and if using that infrastructure interrupts other services you need your app to run on (e.g. service workers) then building a PWA may be an unnecessary cost. You may need to evaluate prior to building.

Q: Can you throw more light on what Service workers are in PWA?

Ona: Service workers are what run every single time there is an interaction between the user and the web.

Here is a poorly drawn picture of the interaction for a better explanation:

So to activate a PWA, for the fast and reliability aspect, we introduce using cache to our service workers. That way, when the internet is down, and also to speed things up, data that is cached will be used

Q: What features do Progressive Web Apps have but native apps lack?

Ona: Native Apps lack the reach aspect, reach means how many people will use the app. e.g. on your phone, you have a limited number of apps downloaded. This is because of memory space concerns, and also your interest in things as a human is limited. PWAs are built like web apps, so the fact that the user won’t have to download it to use it is one of the factors that would draw them in using it.

Q: What are some requirements to make the website installable as PWA?

Ona: To turn your Web App into a PWA, you will need to increase engagement with the user. Adding a PWA feature like push notifications. Also, ensuring you are using a webpack that allows for the user to still have access to your site even when they have low internet, enabling the reliability aspect

Q: What are the best tools for building a progressive web app?

Ona: Best tools for building a PWA:

  • React
  • Vue
  • Angular

Essentially, these are Javascript tools, so JS is what will assist you to achieve results. Another recommendation I have is introducing Gatsby, which has a great webpack to assist you with asynchronous tasks.

….. Question and Answer session…...

Q1: Miss Ona, you mentioned that PWA can be reliable even when I do not have an internet connection? Let’s assume I want to visit Jumia page to check some items and I do not have a strong/any internet connection. Does that mean the page will load using the cache data?

Ona: Yes. So think of a Native App like Instagram. If you have low internet/ no internet, certain features of Instagram will still load regardless, and for some features, there will be a message to let you know that something could not load.

So how PWA works is that you build it to cache certain aspects of your app like a Native App does, instead of it acting as a web app when there is no internet

You essentially don’t want the user to see this:

Q2: Are PWA’s only used or accessible on browsers?

Ona: So a PWA is built as if it’s a Web App, so you access it on a browser with a normal URL e,g www.example.com. Then, once the user opens that website, they are able to save the PWA, without downloading it, to their home screen on their device The PWA acts and looks like a native app on their phone, but the backend of it operates as a web app.

So its a combination of the best of both worlds

Q3: Among the 3 best tools for building a PWA which one of them is advisable to start with?

Ona: I would start with React.js, its relatively easy to learn if you are a beginner and look for a tutorial where they combine React.js with the Gatsby webpack. This can be found on youtube, or just search on google

Q4: Please can you give an example of PWA. I learnt a lot, I am a beginner in tech and this evening is my first time of knowing what PWA is?

Ona: An easy example is using twitter lite. When you go to the twitter lite URL, it will ask you to save it to your homepage, but it won’t download the app on the phone. When you interact with twitter lite on your phone, it will act like its own app (with its own taskbar, etc), though it is run from the browser, you won’t even see that.

Also, twitter lite allows for push notifications, thus if someone dm’s/tweets you, you can see the notification and interact. Furthermore, when you open the twitter app icon from your homepage, it acts fast as if its a normal native app i.e Instagram

To be a part of our women in tech community, get more opportunities to mentorship and participate in more of our upcoming #SCAslackchat and other enlightening sessions to improve your technical and soft skills, do click here.

--

--

Glory Adebowale
Nur: The She Code Africa Blog

I seek to write what I see in my head and the emotions it sparks…