Some of the biggest companies in the world including Uber, Twitter, Starbucks, and Forbes have already adapted their businesses to use Progressive Web Applications (PWAs) keeping up with ever changing demands from not only consumers but also the technologies that they use every day.
But how can you use this for your business?
And what the heck is a PWA?
Progressive Web Applications are a form of web app that can be used on desktops, tablets, mobile devices; both online and offline. They are downloaded directly to a user’s device, bypassing the App Store allowing businesses to increase their user engagement at the same time minimizing their businesses cost.
In this blog post I will be highlighting Progressive web applications from a business owners perspective. I will be focusing less on highly technical specifications and approaching progressive web applications from a point of view that highlights the marketing and financial advantages as well as user benefits.
My goal is to help provide business owners entrepreneurs and startup founders with a better understanding of what progressive web applications do and their benefits so that they can be incorporated into real business applications.
What are Progressive Web Apps?
You may be thinking to yourself, “Oh no here comes a blog about coding and app development”, but fear not for I will not be getting too technical in this post and the concept of progressive web application technology is rather straightforward. Trust me!
A progressive web app is a web app that can be accessed by users online and offline, while also having the ability to be installed on a user’s device. Progressive web apps have two main uses:
- Web App: Your website or web app is distributed to the end users without the heavy hosting costs associated with the data transfers required to send a full application for every use. The constant need for data connectivity is also not a requirement. These features increase SEO value, speed and decrease hosting costs.
- Mobile App: Your PWA can be distributed as a mobile application through a website url BYPASSING the app stores. Ionic Framework gives you the option to create your pwa natively as well and submit to the app store if you want to penetrate both channels.
What does a PWA even look like?
First lets check out a great example of a PWA that Let’s take a quick look at a video example of my company’s home page, which we built as a PWA. You can see from the video that after visiting http://openforge.io, the user is prompted to install it as an application. Once they click yes, it installs instantly on their device and appears the same as every other app.
What are the Pros of a PWA?
User Engagement & Conversions
Smartphones represent the number one form of internet usage across the world, and companies that take advantage of mobile first experiences statistically outperform their counterparts.
There are numerous companies talking about the various reasons for updating to a (web based) mobile first strategy. These companies have released countless case studies detailing how this transition has increased their user conversions, acquisitions, and speed to market.
The data and case studies comes best from these companies themselves. I’d highly recommend checking out the website www.pwastats.com for full details and case studies; however, I will call to attention a couple specific stats that you may find interesting:
- Tinder: cut load times from 11.91 seconds to 4.69 seconds. The PWA is 90% smaller than their old Native app
- WestElm: saw a 15% increase in time spent on site, and 9% lift in revenues
- Pinterest : saw 60% increase in engagement, 44% increase in user ad revenue
As a business owner, you know that the heavier the package, the higher the cost of delivery. This applies to both physical and digital products, and could almost be considered a ‘law of commerce’.
Traditionally, when you build a website you are actually creating a digital ‘package’ of images, text, videos, and other content that add functionality and flare to your website. You may or not be aware, but every time a user enters your URL in their browser, you pay to ‘ship’ each of these assets. If this concept is difficult to grasp, think of the Post Office. You package up your present and deliver it to grandmother. The post office weighs the package and gives you the bill.
The exact same concept applies to digital products. Amazon, Heroku, Microsoft Azure, and other digital hosting providers all do exactly the same thing. The larger the file sizes of images, videos, scripts, and other content — the more expensive and the longer delay for the user.
How does a PWA decrease my costs and load times?
The answer is in something called a “Service Worker”. Service Workers are neat little tools that are installed on the users device, and monitor your application to determine which files need reloaded, and which ones can be cached. When a user comes to your website a second time, the service worker checks what content is new and what’s old, to determine what actually needs sent to the user again.
“Wait! The user already has the latest version of this image. We DONT need to download it again” — Service Worker
This is immensely powerful; as it lets you only pay to deliver new content. This can dramatically decrease your costs as a business, while at the time same increasing speed and user satisfaction with a seamless experience.
Let’s talk Installation! (Add to Home)
An added benefit of PWA’s is the “Installation” feature that is unlocked by including a Manifest file with your web application.
When a user goes to your website, their browser looks for a “Manifest file” that your developers will include in your website. This Manifest file tells the browser to receive a “Add to Home” pop-up, among other things. This downloads the entirety of your web app as a mobile app, registers for push notifications, other functionality as defined by your app. See more on Manifest files here.
NOTE: On iOS, you’ll have to guide your users as Apple has “silent” support as of 11.3. A full write up of how to do this can be found by Maxi Firtman here.
What types of Businesses are best suited for PWA technology?
- E-Commerce businesses
- News & Media organizations
- Bloggers & Influencers
- Social Media businesses
- Review websites
- Any business that focuses on text, image, and video content as the primary offering.
What capabilities do PWA’s have, and what’s the most useful?
A progressive web app has access to everything the browser can; which is quite substantial. The developer community is moving towards a web-first strategy which means that more and more emphasis is being placed on web technologies and web support.
Rather than re-invent the wheel, there’s an amazing website (https://whatwebcando.today/) that lists the capabilities of browser technology. I’ve attached a screenshot below, but please do check it out.
I particularly recommend taking advantage of the following, which seem to me to be the most advantageous for businesses and consumers alike:
- Push Notifications
- Offline Storage
- Background Sync
- Audio/Video capture
Let’s get a ‘little’ technical — How Can I Migrate My Web Application to a PWA?
A PWA by itself is not a framework or a language; it’s simply a web application that contains some key components that browsers know to recognize. When I say “migration”, it may not be an 100% accurate term because your company may already be utilizing web technologies; however, since many companies are moving from ‘native-first’ to ‘hybrid-first’ strategies for their applications, I’ll use the traditional term of ‘migration’ assuming your company falls into this category.
If you have an existing web application; creating a PWA out of your existing application should be relatively straightforward. A PWA is essentially a web application with a couple key elements:
- Architecture — The App Shell pattern is ideal for SPA (Single Page Applications)
- Service Workers — I’d recommend using Google Workbox
- Manifest File — A simple file that tells the browser information about how to behave when installing your app. See description here
- Responsive Design — Obviously, important for mobile.
- Background Sync — For handling poor connections, see here
- Push Notifications
If you have a mobile application built using Angular, React, or Vue.js and wish to make it available both natively and web based, migrating to a single code base may not be as difficult as you fear. Ionic Framework v4 has adopted a language agnostic approach for their new architecture that makes it easy to utilize existing technologies such as Angular, React.js, and Vue.js.
Confused? Send your developer this link and talk to them!
What’s in the future?
Think about this — A company makes it’s money by unlocking in-app content for their users, either via a subscription or single purchase model. The company charges $1.00, the App Stores take $0.30 cents, and then the user is happy.
However, now a company adopts PWA technology and offers the same in-app content while bypassing the app store. The app does not go through a review process, and only requires a single landing page, and supports many of the same features. To good to be true?
Maybe. It’s no doubt that adoption of this technology poses a risk to Apple & Google’s monetization strategy; however, the benefits of the technology are so great I see only one of two things happening.
- Apple & Google adapt to rely more heavily on play-center content and monetization through gaming, especially with the growing trend of e-sports. They allow other forms of subscription/in-app content to go untouched.
- Apple & Google create a mechanism in their OS to detect PWA’s, and make them go through the same review process as other applications. I have some IP concerns with this theory that makes it less likely; but it’s possible.
No matter what the future brings, PWA technology can immediately make a huge impact for your business. Building a single application for ALL platforms in record time (think, a new feature every 4 weeks) provides an immense business advantage, don’t ignore it.
I hope you’ve enjoyed this write-up on PWA’s, the resources I’ve gathered, and some of the opinions I’ve highlighted. Please comment with opinions and questions, and if you’d to talk over ideas on how this could affect your business I’m always available via twitter @jedihacks
Enjoy your business adventures!