As we briefly mentioned in our software technology cheat sheet, PWA simply stands for Progressive Web App. It is essentially a website that provides a native mobile app experience with a ton of advantages attached. But, How does it really work? How is it built? and the most important question of all: Why isn’t every new app getting built as a PWA?
A brief history
Back in 2007 when the 1st generation of the iPhone hit the market everything changed overnight and since this point all our phones became smart. The new generation of mobile applications offered a bunch of new features that web developers back then simply could not get access to. Remember, Internet Explorer was powering the web of this era…
These in-device features were:
- Camera access
- Push notifications
- Offline mode
- Geo location – GPS
- Bluetooth
- Background synch
- Device motion
- Contacts
- File access
- Touch gestures
However, app technology has come a long way since the early days thanks to the incredible boom and interest. Datareportal’s 2021 digital global overview research shows that there are 5.22 billion mobile users today, which is 66.6% of the total population so as a result developers have also improved all the connecting frameworks, plugins, endpoints.. etc. opening up new possibilities for the web platform and offering near feature parity with native apps.
How do you make a web app “progressive”?
It is actually easier than you would think. Here are the actual steps:
- You can run an audit on your site with Lighthouse within Chrome Dev Tools that can tell you how well your website performs and what needs to be done to qualify as a PWA. The minimum requirement here is that the site needs to load fast, be easily accessible on mobile and use encrypted HTTP protocol (HTTPS). Most modern websites easily tick these off.
- The second and trickier requirement is that the site needs to be able to work offline. This requires a so-called Service Worker which is essentially a script (JS) that runs in the background and can perform tasks like background sync, caching, handling push notifications.. Etc. enabling offline use.
- The third step is to create a Manifest file (JSON) that contains metadata such as icons, the name of the app, start URL, and any additional information to shift it from website format into an app appearance.
What are the advantages?
According to clutch.co nearly half (42%) of small businesses already have a mobile app, and 30% plan to build one in the future. At the same time, small business app growth seems to be stagnant when compared to data from 2017 as it shows the same percentage (42%) of small businesses currently having a mobile app. At the same time (although I could not find a reliable number but my tip would be) 98% of the small businesses already have a functioning website.
Canecom has a really long history in developing mobile apps so I can speak from personal experience when I say that a mobile app project can be quite challenging, resource-heavy and it’s not always the best choice but luckily some of its inherent drawbacks are well answered with PWAs.
- A single codebase that can run on Android, iOS and the Web so it is easier to develop and easier to maintain as it doesn’t require separate native teams which can save an awful lot of development cost.
- The web offers much better distribution than platform-specific app stores so you can make your PWA accessible right from your website or any other place and make it available on any device. The installation is quicker and easier as it doesn’t need to go through the app stores which also means they won’t make a 30% cut of your app revenue.
- Due to its web based technology it also offers: short loading times, good performance in poor network conditions, small size, real app-like features (add to home screen, offline mode, push notifications) and instant updates.
To go even further, they come with some business-specific advantages too:
- Higher user engagement and conversion rates due to easier access
- Good SEO, support in search results (thanks to mobile-first approach)
- Seamless onboarding from social channels (Instagram, etc). and higher marketing ROI
- Decreased Cost of User Acquisition (CAC) due to its lower costs
- Increased cross-platform conversion due to its platform independence
This is why you can see some of the biggest brands adapting the technology and releasing PWAs in recent years. Twitter (Lite) is probably the most well-known example but Pinterest, Starbucks, Uber, The Washington Post, and Forbes all could be famous PWA examples.
Where is the trick then?
This makes PWAs sound like the greatest thing since sliced bread so why doesn’t everyone immediately switch to them.
Well, partly it is because not many people actually know about them. Since they are very well disguised as native apps, you might already use one on a daily basis and don’t even know about it. It is well regarded and well supported by developers since Google introduced the idea in 2017 but it is still not quite mainstream. This also highlights another difficulty, namely that it is a Google incentive and without going really deeply into some technical browser ‘psychology’ let’s just say that Android and Chrome are not exactly the same as iOS, Safari and its WebKit. Although Apple might not be the top worldwide in terms of the number of mobiles sold, they are still the leader of smartphones that everyone follows. Remember how notches got introduced into our lives?
This made me curious to dig deeper and ask our CTO about his own personal opinion on the very same topic and he mentioned two main things. The first is related to UX (user experience) as some things are harder to build and harder to make “feel right” if you are not going the native app route. Platform-specific UI kits come with their own user experience patterns, buttons, animations.. etc. that are not necessarily available through web APIs. Also, people are naturally looking for and discovering apps in the app stores and PWAs are meant to avoid that trusty route. The second thing is also closely connected, there is a much shorter history and more limited team working on the PWA-related technology so some of the latest innovations get introduced slower and are not immediately available.
TWA vs SPA vs Native
If you are so lucky that cost is not a concern, you are also not in a hurry but there is a demanding task that needs some specific “demanding” feature, you might still consider maintaining two (iOS and Android) native development teams. However, if you are not in that lucky minority and you have to make the most out of a restricted budget or timeframe, you might consider some alternatives and I think this is the main takeaway of this post and this is where PWAs can really shine.
- Trusted Web Activity (TWA) allows you to “package” a PWA in a special container based on the Chrome web browser which will act like a standard application. From a technical standpoint, a TWA is a browser instance without its own graphic interface (URL bar and menu) that works in a verified mode (Trusted) and is limited to only connecting to a specific domain. The main advantage of this is that TWAs can be published in the Google Play Store.
- A SPA application is a single page that continuously interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. Trello, Facebook, Gmail, and Twitter are a few single-page app examples. This implementation can result in performance gains by cutting down loading times and a more dynamic experience but with some tradeoff disadvantages such as SEO, more effort required to maintain state, implement navigation, and do meaningful performance monitoring.
As you could see, all methods have some pros and cons that we need to take into consideration before jumping into a project and this needs some experience and technical knowledge. If you are hesitant and can’t decide between options or just want a nerdy chat about software technology, feel free to reach out and leave us your comments. We would love to hear from you.
