Select Page

Designing Progressive Web Apps | Jason Grigsby

Apr 3, 2018 | An Event Apart 2018

website maker

April 3 @ 3:30pm
An Event Apart Seattle 2018
You may find yourself in a situation where your company or client decides they want a Progressive Web App.
This will lead to some questions.
What is a Progressive Web App? The project manager might ask ‘how do we create a plan for this?’ The Business Owner might ask ‘why do we need this if we already have a native app?’ There may be someone that says ‘how does the CEO even know about Progressive Web Apps?’ And then there may be a super excited developer that can’t wait to play with service worker.
Created a site called PWAStats specifically to help decide if a PWA is the right choice.
If you’er trying to convince someone in your organization that a PWA makes sense, you may be able to find stats from a similar company to help make your decision.

What is a Progressive Web App?

Answering the question WHAT IS A PROGRESSIVE WEB APP is harder than it should be.
Original definition was by Frances Berriman and Alex Russell defined 10 characteristics of a Progressive Web App:
The last 2: Linkable and Progressive, make these really exciting.
Progressive Web apps ARE just websites. But if the browser someone is using support service worker or these other technologies, they get an enhanced experience.
Part of the confusion we may be able to blame on Google… Here’s why:
Google originally had the 10 original characteristics listed above as their definition of a Progressive Web App.
Then they changed it to 6 characteristics, and finally reduced is to: Reliable, Fast, and Engaging. But what does that mean in this context? Then they added ‘Integrated’ so now you have FIRE and he wants to burn the whole things down.

So, here’s what we’re looking at with a PWA. A PWA is a website that has been enhanced with: 
  1. https://  (a secure connection)
  2. a service worker
  3. a {manifest} file
Having a secure connection is something that’s just a requirement now.
Service Workers are really where the power is. They act as a proxy and allow to specify what we want to cache, what we want to look to the network for… it allows us to do the sorts of things native apps have done without requiring the user to download the native app ahead of time to use it.
When we use service workers we see a real increase in performance.
They are key to providing an off-line experience and push notifications.
Manifest files are just JSON files, they’re really short, there’s not a lot to them. They’re the kind of thing someone can just read and just understand. They declare the name of the app, colors, where icons are, etc.
If you’re on a phone and you hit a progressive web app you’re asked if you want to add that to your home screen.

Progressive Web Apps allow us to build experiences that previous required a native application.

Google made a video talking about the exciting possibilities of Progressive Web Apps. “This is the future of the mobile web.” It’s SO INSPIRATIONAL! Hahahaha I mean it’s a bit over the top….
All of the hype can be a put off.
Even though the technology doesn’t seem that amazing, people’s expectations about what is possible on the web was set 5 or 10 years ago and so that’s what is so exciting – new things are possible.
The name “Progressive Web Apps” isn’t for us in this room. It’s for your boss, your investor, etc. So, embrace the hype! We can use this to build the experiences our users deserve.
Jeffrey said it’s important to use the right language for the right people. Change your language appropriately.

Do we really need a progressive web app?
Does your organization have a website? If yes, it would benefit from a PWA.
Does your organization make money on your website via ecommerce, advertising, or some other method? If yes, then absolutely because a PWA improves the experience and speeds it up increasing business.

Not all of your customers have your native app installed. In fact, 100% of your potential customers don’t have it installed. 
Even some of your customers that DO have it installed don’t have access to it (they’re on their desktop computer or they don’t have an internet connection).
Your website is often a customer’s first interaction with your company, so an enhanced experience will improve conversions/ business.
There are things the web can’t do.
At one point it was written by an author that PWA’s can’t currently access the camera, GPA, and fingerprint sensors on mobile phones. But that’s not true!!
  • Instagram has a PWA. You can take photos, use background sync, use filters (so obviously the camera works). It’s a great experience. 
  • In 2009 an article came out about how to use Geolocation on an iPhone (in iOS 2!!)… so Geolocation works. I mean you can’t visit a website on your phone without getting asked if you want to share your damn location!
  • JCrew allows you to buy things with your fingerprint (he found this out on accident). This idea that you can’t user fingerprint sensors on the web is not true. 
In fact, the web can do a lot more than we think it can. That’s what Jen Simmons is trying to get people to do with Intrinsic Web Design – to look again at what’s possible in a way that we’re not looking at it right now.
LAST WEEK iOS SHIPPED SERVICE WORKERS!! It’s now available on iOS and Macs!

When people start thinking about Progressive Web Apps it makes them look at their website and consider how it could be improved which is a great thing!
In fact, Jason thinks that PWAs are just a Trojan Horse for performance.
So here are the questions a team will ask as they’re working on a PWA:
  1. Making it feel like an app 
  2. Installation and Discovery
  3. Offline mode
  4. Push Notifications
“Like obscenity and brunch, web apps can be described but not defined” – Jeremy Keith
Here’s something you can count on when creating a PWA:
  1. The vast majority of people will THINK the fact that it’s a Progressive Web App is important.
  2. They will all think that means different things. 
So it’s very important that your team is all on the same page. 
 
Let’s dive into these goals one by one: 
 

1. MAKING IT FEEL LIKE AN APP

 
  1. But, it doesn’t need to look native!
  2. Define your own design and be consistent. Make sure it’s an exceptional experience despite the device and be consistent across platforms.
  3. Define app-like goals. Write goals and possible solutions for what you think makes something ‘app-y’ and then work to achieve those. That way we talk about what is actually important and not just ‘being app-y
 
 
Addressing Goal 1: Creating a more immersive experience: 
 
Be wary of creating a ‘fullscreen’ experience like a native app: 
 
When you take away the browser edges and controls, you lose a lot of stuff and take a lot of burden on yourself. So if you move to a fullscreen application, you’re basically going off and roughing it like people do in native app land. You lose things like the back button which is the second most used feature in a browser, which is not that simple to recreate and manage!! 
 
Why would you do that?! 
So do you even need a back button? Maybe you set a query so it’s displayed only in fullscreen mode but not otherwise. 
 
Remember, not everybody will add your PWA to their home screen. However, every visitor will install your progressive web app because of service worker. 
 
 
Addressing Goal 2: Creating a fast and fluid app
Make sure the pages don’t jump as it loads. Use skeleton pages. 
Perceived performance matters.
 
Addressing Goal 3: Create an app with personality
Animation and transitions are a great way to add personality and polish.
* * *
But Is feeling like an app really something that should be a goal?
Not in Jason’s opinion.
You don’t HAVE to do this stuff. If you look at what it means to be an app, there’s a continuum from a website with performance improvements and a full screen app shell wit native design language. Both are progressive web apps

2. INSTALLATION AND DISCOVERY
You build the manifest file and declare things that affect the appearance of it like background color and theme color. These things aren’t supported in all browsers BUT they’re worth doing because when they are supported they really change the experience in a great way for the user.
Once you’ve done this stuff, browsers ask users if they want to add it to their home screen.
Remember that there are engagement heuristics to get the Add to Homescreen banner to appear in a browser. You also manually trigger the add to home screen button within Chrome dev tools.
You can also pick the optimal time to ask for Install. Like Flipkart – they decided to wait to show the Add to Home Screen button until the order confirmation page. And that change resulted in a 3x increase in that action!
PWA’s don’t need an app store!! YAY!
But, if you WANT to be in app stores, Microsoft Store is going to accept progressive web apps. You can:
  1. Actively submit your website – use PWABuilder to help you do this. 
  2. Bing’s spider is going to look for a PWA and just go ahead and add it to the app store
 
Adobe’s PhoneGap is a native wrapper that allows you to wrap web technology and distribute it in any of the app stores. Trusted Web Activity (by Google) is similar. You can basically just build a project and submit the URL, and since you’re a developer that owns both the site and the app, you’re trusted.
Remember, your PWA is your website, so all the normal web marketing applies!

3. OFFLINE NEEDS

Every PWA will have a baseline need for being offline. If nothing else, we’re going to use service workers to cache common assets for performance, and while we’re doing that we’ll probably provide a fallback page.
The fallback page can be very generic or like Trivago which provides a really fun maze game. That worked for them, because 67% of people came back to their page when they got back online.
If you are going to cache some information offline, it would be nice to note / highlight stale or old information. Like if currency information was cached, show that the last time it was updated was 2 days ago, for example.
Offline Interactivity considerations – do you allow people to interact with a page offline, or do you disallow editing / interacting? I mean it sucks to see you can’t interact with something but isn’t that better than doing a bunch of work in a browser and then losing it because you’re offline and can’t really save it?

4. PUSH NOTIFICATIONS

Notification JS is relatively easy. The frontend stuff is easy.
The backend pieces are pretty hard. Almost every client of theirs doing a PWA has delayed doing push notifications to a second phase.
Push notifications that are successful are personalized. People want personalized, relevant push messages. When that’s true you see increased conversions from push notifications.
You need to figure out how to integrate with other systems, how to segment the audience, etc.
Push Notification Services:
OneSignal, Localytics, CleverTap, WebEngage, Urban Airship, braze…
They chose to use OneSignal because it has a nice WordPress plugin that sends a push notification every time a new article is published.
Remember that people are generally super annoyed with push notifications. So, when we ask people about getting notifications we need to show value. You shouldn’t IMMEDIATELY ASK to send push notifications. That’s like asking someone to marry you on a first date! Get to know each other first!
What they do is have a button to Turn on Notifications at the end of an article, and then you can turn off notifications through that exact same button.
It’s important that you do this well because browsers have a kill switch. If you ask someone if you can send them push notifications and they say NO, you can never send them a message again. Or if they say yes and then change their mind and block you, you can never send them a message again.
Firefox is also going to start allowing users to turn off the popups asking for notifications from geolocation or push notifications in their settings, so we really need to be careful about how we use these!

5. BEYOND PWAs

Credential Management API
Payment Request API
These are non-PWA features that can further improve the experience.

SO HOW TO DO THIS IN A COMPANY? 
For organizations looking to create a Progressive Web App, looking at it as a PROGRESSIVE process is smart! You don’t have to do it all at once, and you can choose where on the spectrum for each consideration.
Start with planning and definition work. Bring everyone in the room and discuss so they get to some common understanding of what that PWA would look like.
Before you start building stuff, benchmark your site. Put in a plan to measure because this will help you better on.
Assess the current website and look to see if there’s technical debt you need to address.
If the current website is pretty ugly, hacked together, and slow to load, those problems need to be addressed before you work on a PWA. You need to get to a baseline before you can work on a PWA.
Once you hit the baseline requirements, just set up the Baseline PWA (Manifest, HTTPs, Service worker, off-line fallback). You can do this mostly with the front end team only! Deliver each of these. Ship each when you’re done, don’t wait for all the pieces. Each piece will benefit people.
Then, do some additional Front-End Only things. Cache recently viewed pages, recache popular or important pages, add third-party push notifications or use a CMS plugin for push notifications.
Then you can work on some larger initiatives like payment request api, a credentials management api, you can integrate notifications with backed systems to personalize them, add background sync, and move to app shell.
There are all these points along the way when you can ship things! You don’t have to bundle things up and wait to ship them all together.
When you break these into multiple pieces, each piece makes sense on its own.
We just need to figure out where we want to go and start that journey.
@grigs

0 Comments

Trackbacks/Pingbacks

  1. Progressive Web Apps – Chris Gargiulo - […] Designing Progressive Web Apps by Jason Grigsby […]

Submit a Comment

Your email address will not be published. Required fields are marked *

how-to-choose-a-wordpress-theme-thumbnail

How To Choose A WordPress Theme For Your Website

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier. This is a 5 page guide with an approximately 4 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

where-to-host-thumbnail

Where To Host Your WordPress Website and Why It Matters

In this guide we discuss what makes 'good hosting' including security, speed, and support. We tell you who we use and why, and give you a coupon! YAY COUPONS! This is a 45 page guide with an approximately 3 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

8-next-level-plugins-cover

8 WordPress Plugins That Can Take Your Website To The Next Level

For our business clients, we install some specialized WordPress plugins. Get our list of the 8 next level plugins we love and the use case for each. 

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm

5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.