Did you know that 53% of users will abandon a site if it takes longer than 3 seconds to load? So by the time you’ve said “Well that’s quick”, they’re long gone! Luckily there are several solutions to create fast, reliable and engaging sites and one of them is working with PWAs. P-whut? As you’re probably one of those people with no time to lose, we’ll quickly explain what they are, their advantages, how & why to implement them and our vision at Wax. Let’s go!
What are PWAs?
We know, we know. Your time is precious! So either you first want to find out what PWAs are and keep on reading, or you immediately deep-dive into the less dummy-proof part of this blog post by skipping the following paragraph. You’re welcome.
PWA stands for Progressive Web App. PWAs are a type of mobile app delivered through the web; Roughly said, a website with superpowers. They can be used as an installed app or application (some examples: Pinterest, Uber, Youtube, Spotify …) and are accessible with or without an internet connection. You could say they’re like the Teslas of the internet, only less expensive.
Why should you opt for a PWA?
Now let’s get more into the tech-savvy stuff. What do these PWAs have that normal web and native apps don’t? Warning: the following content contains a lot of digital slang. To guard your time, eh.
It’s all about efficiency! Both for users and developers. Due to their flexibility, cross-platform strength, and low-footprint, they exceed any web app, website, mobile app or desktop app.
Overview of advantages of PWAs
- Streamlined codebase – maintain a single version for all platforms
- Converging (iOS/Android/Web) dev teams = lower development and maintenance costs
- Offline functionality in cases of poor mobile connectivity
- Potential performance increases (caching, offline browsing), through ‘service workers’
- Extra functionalities (e.g. push notifications) without breaking the site for users without PWA support
- Automatic updates
- Ease of distribution (publish without the need for approval from Apple or Google)
- Quick Installation (easy to ‘Add to Home Screen’)
- Search-engine friendly(ier) – although this may create a new challenge – helping users find your certified PWA app
- Continues to work (minus some extra features) if loaded on unsupported browsers (becomes a shortcut link rather than a full PWA)
Some disadvantages of PWAs
So, we get the point: give us those Teslas! But what are things to consider when you’re all “I need a PWA right now”? Some minor downsides are:
- Inconsistent access to hardware features – sensors, faceID, fingerprint, GPS (some are supported on Android now, less on iOS as of today)
- 3rd-Party authentication can be tricky (login with Google, Facebook)
- No easily-accessible central repository for installation e.g. App Store (the downside of decentralization is potential difficulties finding your app)
- Good browser support as of June 2018, but not a 100% coverage (e.g. iOS 11.3 or newer)
- Getting users to take the extra step of ‘add to home screen’ could be a challenge (promotion, education)
- Spoofing using a similar link
- No automatic carry-over on users upgrading to new phones
- Requires iOS 11.3 or newer on Apple devices
- No push, Siri, voice, payment, background code execution support on iOS yet
How to use or install a PWA
You go to a website (for example www.washingtonpost.com) and when visited a couple of times, you will get asked if you want to add the site to your homescreen. If you accept, you’ll find the icon on your home screen. When you tap the app icon, the PWA will start with a splash screen, and run full screen.
You’ll find that the Progressive Web App exists alongside the native apps on your device. If you go back to the website using a browser, you’ll be asked to launch the app instead.
PWAs feel integrated because they launch in the same way as other apps, without an address bar or tabs. Plus, they create an engaging experience for users.
WAX and PWAs
So, there’s the pros and the cons. We’ve learned now that PWA are an easy-to-install mix of apps and websites with quite a few advantages but also some minor downsides. Which is why we usually apply some PWA features by default and always consider or propose some interesting extras for the projects we’re working on.
PWA features we apply by default:
- Brand our browser colors
- Make our page load as quickly as possible
- Optimize every image
- Serve our content over HTTPS
- Provide an icon for the home screen
With some minor efforts we can also:
- Allow to send push notifications
- Create a splash page
- Make your website offline accessible
- Push an installation notification
Brands like Twitter, Starbucks, Burger King and NASA are already engaging into PWAs, and now that they have finally arrived for Windows too, maybe it’s time to consider them for your organisation. We’d be happy to discuss!
Thanks Geoffrey for taking the time to write this interesting explanation and blog post!