If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He’ll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.
— Phil Nash @webdirections #code19 (@philnash) June 21, 2019
Many of Jason’s clients had a situation where someone senior came to their web teams and demanded a PWA. Now… that’s not normal. But some common questions would come out…
PM – what is it?
Business owner – do we really need one?
Design – how did the CEO even know about that?
Dev – cool! I’ve wanted to use this stuff for ages!
So how do you make sense of what to build? How do you make decisions and answer your team’s questions?
So how does the CEO end up hearing about PWAs? It’s not just the tech press that’s covering them, general and niche publications are talking about them. There are success stories that are getting peoples attention. PWAstats.com keeps track of these stories.
What is a PWA? The original definition described ten characteristics like app-like interaction, but two key ones are “linkable” (URLs still work) and progressive (they use progressive enhancement). So they are like native apps but they are of the web. But the term is difficult to distill, even for people who have shipped them.
— Klee Thomas (@kleeut) June 21, 2019
Jeremy Keith articulated it well: a PWA is a website that has been enhanced with https, service workers and a manifest.
The key is the service worker. The main power comes from being able to intercept network requests and decide what to do with them. This is what gives people the real fast/instantaneous experiences.
But they can be so much more… PWAs let us build experiences that were previously restricted to native apps.
(video talking up PWAs as the next generation of experiences)
But are they really that much different than regular web best practices?
The name isn’t for you and worrying about it is distraction from just building things that work better for everyone. The name is for your boss, for your investor, for your marketeer. – Frances Berriman
Do you need a PWA?
Well, do you have a website? Then yes you probably would benefit from a PWA! Particularly if you make money on the website (especially ecommerce).
There is a lot of FUD about PWAs.
Why do we need a PWA if we already have a native app?
The two can coexist. Not everyone has your app installed; and none of your potential users have the native app yet either. Also people aren’t installing as many apps any more; and they’re not using the apps they install. Your website is often a customer’s first interaction with your company, and a good experience will increase your changes of them sticking around.
The web can’t do (x)!
Sure, there are some things that require a native app. But often people say it’s not possible and they’re simply wrong! You can access the hardware, geolocation, notifications… it’s hard to work out how people think the web can’t access geolocation given how many websites ask you for it! If you are wondering about any feature, revisit the question.
So the team is keen to build a PWA, what next? What are you actually going to build? People don’t really agree on what “feels like an app” even means.
Does that mean we want to make it look native? There are frameworks to help you do that. Do you make something that feels mobile-y but looks the same across all devices?
How immersive does the experience need to be? You can choose how much browser chrome to show, and it’s tempting to go full screen – but actually keeping some toolbars is really useful. If you take them out, you end up having to add them back in. So don’t assume you should get rid of it all. Adding a back button is a surprising amount of work; and making it work just like the native back button is tricky. There is a
display-mode media query that can help you customise different browsing contexts if you need to.
Work on keeping the app smooth, use placeholders and ghost content to keep the experience feeling fast. There is the app shell model plays into this. Remember that perception of speed is critical. Beware the App Shell model generally leads to conversations about being required to use an SPA, and that’s not true.
Should ‘feeling like an app’ really be the goal? Do users care if it feels like a site or an app, or do they just want the experience to be good? Also consider the cost/benefit of all the work required to make things feel like an app.
Manifests are simple JSON files, and you can do a lot just by defining one.
Add To Home Screen badges vary between browsers; and some had quite intrusive banners but they are moving away from that. It’s likely they’ll all settle on something like a badge in the omnibar, to save the site to home screen. There are events you can fire to prompt the user, but you have to have passed some engagement heuristics. On the up side you can provide the prompt at a much more appropriate moment.
PWAs don’t need app stores, but that doesn’t mean people won’t ask about them! Microsoft lets you add PWAs to the app store and they will live side by side with native apps. Android has trusted web activity which allows you to prove you own both the app and the website, helping you ship to the android store.
PWAs can be marketed in any way you might promote your website. They’re just websites!
Does it matter if people actually ‘install’ your PWA anyway? So much of the benefit is not the bit where you can add to home screen? More effort should be spent on making things work fast, work offline, have a great manifest, etc. Everyone who visits the web page “installs” the PWA anyway. The icon on the home screen is just a cherry on top.
Offline mode gives us lots of cool tricks:
- cache for performance and offline fallback
- cache recently viewed content for offline use
- display the info you have, even if you can’t display the entire page
- pre-cache content – Financial Times do a great job of letting the user control what gets cached
- full offline interactivity is the holy grail, like editing a document while offline and having it sync later… or maybe just disallow offline editing to avoid conflicts and data loss
Recommended resource: Workbox
Push notifications are interesting. Notification JS is relatively easy, but designing notifications people actually want is tricky. Personalised notifications get pretty good engagement, but you still need to be careful when to send them. If you send one at a time people don’t want one, they are likely to be pretty annoyed. Many people just hate them entirely.
Don’t instantly ask people for permission to send notifications, it’s annoying! Maybe add a button at the end of an article that prompts them to give permission if they click it. Twitter uses a “turn on notifications” button. Browsers have added kill switches now, so if you annoy the user you will never get to even ask again. Android requires users to choose between ‘block’ and ‘allow’ and if you ask too soon, they are almost always going to block.
- there are ways to auto-authenticate when you open the PWA
- payment request API
…these aren’t part of PWAs but they may be useful in that same space.
— Phil Nash @webdirections #code19 (@philnash) June 21, 2019
So let’s go back to the project manager… how are you going to make a plan for this?
Create a progressive roadmap for your progressive web app. Start by getting onto HTTPS, then add a service worker, then improve offline, then add notifications…
Whatever you do, benchmark before and after and measure what you are doing. Use data to keep the momentum.
Do a tech debt assessment. If your site takes 30 seconds to load on mobile, a PWA can’t make that suddenly become fast. If it’s not usable, it won’t make a great PWA. Sometimes you just have to make basic improvements first, before you do anything PWA-specific.
But the beauty of PWAs is everything you add makes things better!