With the world’s largest companies such as Uber, Twitter, Starbucks, and Forbes already using Progressive Web Applications (PWAs) to keep pace with the fast changing market, most business owners are asking “How can I use this for my business?”.
So what is a PWA? A Progressive Web Application is a web application that can be used offline and installed on a users device that allows businesses to engage their users while bypassing the app store. This maximizes engagement, simplifies marketing channels, and reduces costs — especially for those business that offer In App Purchases or Subscriptions pay the ‘30% Apple Tax’.
In this article; I’ve highlighted PWA’s from a business owners perspective. The content posted here is more ‘vision driven’ than technical, although I do provide tech resources to back up my findings and suggestions.
My goal is to help guide business owners, entrepreneurs, and startup founders better understand this technology and it’s benefits, so that they may recognize new opportunities for their businesses.
Note: PWA’s are supported on iOS & Android as of September 12th, with iOS 12.0.
Let’s get started!
What are Progressive Web Apps?
Many readers may be timid diving into this post; feeling that it will get too technical and the concept will be too difficult. Trust me, it’s not.
A Progressive Web App is fully functional web application that can be used offline and be installed on a users mobile device as a mobile app.
A PWA has two main use cases:
- Web App: Allows your website or web application to be distributed to your user’s devices, without the ‘cost’ of sending the full app every time and without the need for constant data connectivity. This increases speed, SEO, and decreases hosting costs.
- Mobile App: Allows your application to be distributed as a mobile application, via a URL instead of the app store. If you are utilizing a framework such as Ionic, you’ll have the option tobundle your app natively and submit to the app store in addition to hosting it via your URL.
So what does a PWA look like?
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.
This video is of Android; on iOS — click the “Add to Home” button.
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!
Jedi (Jedidiah) Weller is CEO & Head of Technology at OpenForge, a Design & Development agency focused on building cutting edge digital products and educating the Startup Community with open source resources. In addition, Jedi is an entrepreneur, landlord, and dog lover.
Previously, Jedi has worked as CO-CEO @ Webjunto, Director of Operations @ Geekli.st in Silicon Valley, Unisys Corporation, Analytical Graphics Inc., and the Technological Institute of Crete, Greece. He serves on the board of Kitchen Cred, a Philadelphia non-profit 501(3)© that fosters youth through culinary exercises. He has been a speaker and mentor at technology events across the world, such as SXSW (Slashathon), The Web Summit (#hack4good Dublin), Duke University (#hackduke), and University of Penn (Penn Apps).