Jason Grigsby spoke about Progressive Web Apps (or PWAs). He’s not the first AEA speaker to get into the topic, but I think this is the first talk I’ve seen dedicated specifically to how to set them up and use them effectively.
Now @grigs is going to talk to us about Designing Progressive Web Apps.
A team that has to make a plan for a PWA – design decisions about what it’ll do, look like, and impact the users. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
How does the CEO even know about this? Executives are hearing about them in Total Retail, Digiday, etc. where people are talking about the success of them. Many companies are seeing significant increases in positive metrics with PWAs. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
What is a progressive web app?
Responsive
Connectivity-independent
App-like interactions
Fresh
Safe
Discoverable
Re-engageable
Installable
Linkable
Progressive #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Google might be to blame for the confusion around the name. They had the same definition in 2016. But a year later, they’d cut the definition to 6 things:
Instant loading
Fast
Add to home screen
Secure
Push notifications
Responsive— Anne Gibson (@perpendicularme) July 31, 2018
Then they changed it to Then they changed it to 3 items
Reliable
Fast
Engaging#AEADCFor heaven’s sake.
— Anne Gibson (@perpendicularme) July 31, 2018
PWA is a buzzword now.
But @adactio wrote a great article on what a PWA is:
Has https
Uses service workers
Has a manifest#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Everything should be encrypted anyway, for sooo many reasons. Plus, browsers are starting to call out sites that aren’t encrypted.
Doing so also gives us access to service workers #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Service workers allow a web developer to intercept calls back to the server and specify what’s going to be cached. And the service worker will require the browser to go to the cache under the service worker’s terms. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
We an build things that are much faster than they were because we download a bunch of the things we need and we only go get the pieces we need later when we need them. Huge increases in performance #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Service workers are also key to providing offline access and push notifications. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Manifest files are simple JSON documents that describe the application. The browser can prompt people to install the progressive web app to the home screen. Then they can have an icon and launch it full screen or standalone. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
PWAs allow us to build rich experiences that we’d previously need a native application to do. Cue video. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
The hype can be a bit of a turn-off. Most of these are web best practices anyway. The naming has significance and creates interest. “The name isn’t for you and worrying about it is a distraction from just building things that work.” #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
It’s OK to embrace the hype and use it to start discussions in the organization and look at the web again in a way they haven’t look at it in a while. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Do we need a PWA?
– Do you nave a website? Then probably yes. It’s best practices for a reason.
– Does your organization make money on the web? Then definitely yes, for ROI. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
FUD (fear, uncertainty, doubt) about Webapps:
– We already have a native app. But that won’t reach all of your potential customers.
– Native apps are harder than they used to be to market. Most people download 0 apps per month. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
It’s no longer sufficient to just be in the App Store. Mobile web audiences are growing 2x as fast and are 3x as large as native app audiences #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
A good experience with your website will drive native application installs in some cases. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
FUD #2 – the web can’t do [thing here]
And sometimes that’s true
But they support the camera, GPS, the fingerprint sensor, and other features of your device you might not realize they support. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
5 factors that make a difference in the size and scope of your web app.
1. Make it feel like an app
2. Installation and discovery
3. Offline mode
4. Push notifications
5. Beyond PWAs#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
“Make it feel like an app”
Your team will think this is important and no one will know what it means when they say it.It’s possible to declare the system font to make something look like iOS design. But do you really want to do that every time the platform changes?#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Define your own visual design and be consistent across platforms. Tripcase provides an experience that fits whether it’s iOS or Android, feels good on either, and works really well. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Make it more immersive experience – declare a different display mode
Browser
Minimal-ui
Standalone
FullscreenBrowsers provide us with a lot of information, so be careful deciding to get rid of the language of the web. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
If you go with something not-browser, you have to decide to provide the back button, the history state, an app hierarchy whether users can print, what happens if they are using the PWA on a desktop where the browser chrome is still present, etc. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Browsers do give us a media query for the display mode so that we can show the back button we create only when we want to. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Not every customer or potential customer will add your progressive web app to their home screen… but every visitor will “install” your PWA. The service worker installs in the background either way. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Put placeholders in pages instantly and build skeleton pages for smooth scrolling experiences while things load. App shells can be cached in the service worker, so you can paint to the screen really quickly. perceived performance matters much more than actual performance #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
App shell often assumes a single-page application, and that can be a really big change depending on your current architecture. But PWAs don’t need to be single-page. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Personality and polish: attention to detail. Animate transitions between screens that we usually think of as only possible on native apps. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
With SVG and CSS animation we can add bits of delight into progressive web apps so long as they don’t impair people’s ability to access content, and keep accessibility in mind #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Do people care if something feels like an app? Not really, they just want it to work. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
The manifest file: describes what the PWA can do, and it’s read by the browser. Example: decide what the startup screen should look like. Samsung doesn’t honor the background color (whee!)
Define a theme color for the chrome #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
To see the manifest file for any given site, go tot he application tab in Chrome dev tools#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
If the manifest is defined, and there’s a service worker and it’s secure, the browser will prompt to install to the home page. Different browsers do it differently. Most just have a subtle button on the top #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Firefox is trying to teach people about the “add to home screen” button but it might take a while to catch up. Chrome and Opera have banners that appear after the browser is confident the user would want to add it#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
You can decide when to display the banner – Flipkart holds it until the order confirmation page and then ask “do you want to add this to your home screen?”
In the future this will be the only way to get a banner. Chrome is changing to a mini infobar. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
You can use the javascript to ask the browser to prompt the user, but that means you need to understand what the best time to prompt is #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Microsoft can put PWAs in their store – sometimes without you even knowing it. (You can then go claim it.) Anyone can make a PWA store because they only have to look for manifest files. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
PWA Builder will help you build a manifest file and such to make a PWA.
You can also embed a website in a native app and ship to Google’s store. This was a built-in PhoneGap for android #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
PhoneGap lets you wrap any web app in a native container and then put it in the app stores.
It’s still a website, so all normal web marketing also applies #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Offline mode. Offline fallback pages can keep people engaged. They can also cache recently viewed content for offline use. (They get an offline fallback page if they go to something that’s not cached.) #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
If you do cache things, highlight when it’s stale and give a refresh option. Don’t think of pages as either online or offline… you might get part of a page and provide offline content for bits that haven’t downloaded. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
You can let people choose what you want to view offline, like a “daily edition”. Be transparent with your users and give them control to turn off caching articles or images. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Service workers specifications allow for background sync. Clearly inform a user when a change in state occurs, then hold something to send even if the user closes the browser (be transparent about that too) #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Tell people “Hey you’re disconnected, no edits can be made” – or cache what they did so they don’t lose their work when they’re offline. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Push notifications: from a front-end dev perspective this is easier that most of the rest. But push notifications have hidden back-end challenges. Successful ones are personalized. “Your order shipped”. Providing the personalized info is the difficult part #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Notifications are haaaaard and if you don’t believe it, here’s how slack decides whether to send a notification or not. https://t.co/k0acptwpSY
You can subscribe to a service for notifications too #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
You may only want to ask about notifications if someone goes to the notifications page, like Twitter does. Also allow people to turn off notifications. Browsers have provided kill switches – you’ll never be able to ask if someone blocks you. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Ask when you have a reasonable level of confidence where someone’s going to be interested in notifications. Don’t annoy your users. People will block you if you annoy them. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Beyond PWAs:
Auto-login credential management API. Pinterest uses it.
Payment Request API, Apple Pay on the Web.
Other APIs may come in at anytime#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
How do we create a plan for this?
You can do a progressive roadmap. @grigs started with a redesign, then added a service worker later. Then added a nicer offline page and started tracking what people were reading. Then push notifications. Then announced it #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
At every point, deliver something of value to users. Define the ideal progressive web app for your business and your users. Benchmark and measure where you are so you can gain internal organizational capital #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Assess your current website and address your technical debt. If your website is slow now, PWA will not necessarily fix your problems. If your site doesn’t respond to touch well, isn’t usable, PWA won’t fix those. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Build your baseline PWA.
Then you might add specific front-end additions.
Then because you’ve been measuring along the way you can use the capital you’ve gained to add bigger complex initiatives. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018