Golden Gate Relay Run – Progressive Web App

On May, We (a team from Google) are going to run from Napa Valley to Santa Cruz. It’s a relay 191 miles race or as some call it: “The longest party in CA”. There are teams of 12 members that will run 36 legs (3 legs per runner, 3-8 miles each) through 36 cities and… across the Golden Gate Bridge at midnight. All that is in support of Organs R Us.

Btw, if you want to help us, please donate.

In a quick effort from few Googlers, we came with a nice script that took a KML file and compile the information so we see all the legs of the race on one page.
The goal at the beginning was to print it so we could have it with us during the race. However, the final results is a little progressive web app (you can get it also at: https://bit.ly/ggrr1 ) that is working offline so you can save some trees and still see all the details for your next leg. If you do want to print this page, you can find this ‘printer friendly’ document useful.

Advertisement

How To Build A Progressive Web App That Works Everywhere?

Progressive web apps are a huge opportunity for businesses. They are all about an amazing experience and make the user productive from the first visit. We wish them to be fast and reachable everywhere. I wrote in the past on ‘How to build a PWA‘ – But in this post, I will address the issues we face with the gaps in browsers. After all, this is the web and not all browsers are equal in terms of spec (ServiceWorker API) implementation. I see you smiling after the last sentence… That’s good.

There are 3 main parts that we wish to implement:

1. Offline capabilities.
2. Push notification.
3. Installation.

Let’s see what can be done in each part.

Offline

This is the main feature that let us ‘feel’ more like a native app. The user can be productive everywhere, with or without a network connection.

The good news is that Chrome, Firefox, Opera and UC browser are all supporting service worker. This is the API that enables us to give our users the magic of offline capabilities. We even know that Edge will support it soon.

The (big) elephant in the room is 
What can you do about it?
Treat network as a feature, and use Web Storage API to cache content. Your web app will require network connection to load, but then treat the network as a feature. You can use AppCache. It’s a deprecated offline spec, but you can use it to buy time and give your iOS users an offline experience. Make sure you are using it only on a single page app as it got lots of ‘douchebag parts’.
Here is an example of a web app that works with app cache. I’ve created it during 2013, so please take it easy.

Progressive Web Apps Event At Campus TLV

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They load quickly, even on flaky networks, can re-engage with users by sending web push notifications, have an icon on the home screen and load as top-level, full screen experiences.

Here are the slides from the keynote I gave today at Campus TLV.

If you want to see it in action, click on the image below.

Progressive Web Apps – Offline And Add To Home Screen

Why?

Progressive Web Apps are all about an amazing experience. To me, it’s the moment you see your users happy from the quality experience you gave them.
Web apps should be useful to users from the very first visit (where it’s fast and useful even with bad connection), to the launch from a home screen or push notification. There are many good use-cases for a new web apps with these capabilities. However, think on your own site/app today and see if it can benefit from these aspects.
I think that in most cases, the answer will be: Yes Please!

How?

We needs to follow these two steps: Serve our web app over HTTPS and leverage service worker.
The third step, is in the hands of our users. It is a good reflection to our quality of work and if our web app is useful for them.

Let’s see what are some of the good resources we have today in order to jump into the water.

Offer an offline experience

You should serve your site over HTTPs and implement Service Workers. Here are two good tutorials to show you how to implement it on a new project or a current one:

1. Offline code lab – The famous Air Horner web app. It is extra useful during a good football game.
2. Your first PWA – Weather web app.

Building a Progressive Web App

I think the web platform is awesome.
Moreover, it got some impressive APIs that make it even more powerful. The web platform is easy to access (very low friction), no installs, easy distribution (without walled gardens), immediate redeployments and no single organization own it. Let’s see what do we mean when we are talking on progressive web apps.

Progressive Web Apps

• Fast loading – Because we know users love speed and for every delay we are lossing a smile (and a user).

• One click away from accessing content – You should have an icon on the screen and with one click you could get to your content (or task) and smile.

• Smooth animations and navigations – Good UX comes with these aspects.

• Re-engages with push notifications – In many cases, we wish to be able to notify users even when the browser is not open in-front of them. We can!

• Good experience on flaky network connections – Our web app is offline first, so we can deliver our content (just the deltas) on flaky networks much better/faster.

• Consistent experience across browsers – After all, we are talking on the web here. You can’t control from which device users will come to your work. So make sure, you serve them all.

PWAs are about the experience, no the tech: these apps _feel_ better and more app-like. The technology behind Progressive Web Apps is called “Service Worker”; it’s available only since mid 2015 and is seeing large, growing adoption. PWA is expected to be for mobile what AJAX meant for the desktop web.

Enabling app-like capabilities

At the foundational level, there are two core pieces of technology that enable PWAs:

A List Of Great Mobile Web Apps

In the past, I gave few presentations on ‘Modern web apps‘ and each time I tried to show compelling examples.

Here is a new source (mobile web apps ftw) that might help you see what can be done (today) on the mobile web.
Few good examples to checkout:

1. Weather App
2. Lanyrd (For your next conferences).
3. Stanford
4. Financial Times
5. Alerts in Israel (hebrew)
6. Time Tracker (hebrew)
7. GitHub
8. Twitter
9. Gmail

Another good site to get insperation is: mobile-patterns.com
If you have other great suggestions – please use the comments and I’ll add them.