Share Location On The Web With Waze

If you have a website that contain ‘just’ your (business) address you can do better.

How?

You can use the links below to help your users navigate to you with one click.

This will save them the trouble to ‘select’, ‘copy’ and open their map app in order to get to you. Waze supports an API which enables developers to open the Waze client application through an external URL. The URL can be accessed from within your mobile web page or web app.

The following are the available parameters you can insert to your ‘a href’ tag:

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.

Go North Innovation Event

The founder of Research In Motion talking about quantum computing

I’ve just finish to give me talk at the Go North event. The goal of this talk was to expose young entrepreneurs to the power of the web platform and how they could leverage progressive web apps in order to improve their businesses. It was very cool to meet with a lot of developers and entrepreneurs that are passion about the mobile web. One of the interesting questions I got was around AMP and PWA and how to bridge between them. Here is the detailed answer. The shorter version is that you want to start with AMP as a great first impression that you give your users (it’s all about speed!) and later stay engage/productive with PWA.
The two scenarios below tell this story in a nutshell.

Progressive Web Apps For Startups

Today I gave a talk at our Startup Space in San Francisco to a group of startups from Mexico.

The goal of this talk was to expose young entrepreneurs to the power of the web platform and how they could leverage progressive web apps in order to improve their businesses. The first section is talking about ‘startups best practices’. Since most of them are in their first steps, I figure it would be valuable to them to hear what they can do better.

The second section is telling the story of progressive web app revolution and how it can help them.
The TL;DR is in the picture below.

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.

From AMP To PWA

The slides from my talk today at Google IL office.
It’s all about building a great mobile experience for your users.
From AMP (=Accelerated Mobile Pages) as a starting point up to PWA (=Progressive Web Apps).
As a bonus, we also showed new APIs like: Payment API, One Tab Sign-in and Physical Web that expending the web even farther.

How To Build A Progressive Web App?

Why?

Progressive Web Apps are all about an amazing experience. You PWA should combine the best of the web and the best of apps. In the example above (yep, the ‘Noter web app‘) you can see that it is useful from the very first visit in a browser tab, to the launch from a home screen. As the user progressively builds a relationship with the App over time, it becomes more and more powerful. It loads quickly, even on flaky networks, it persistent and your notes are always there. It got an icon on the home screen and loads as a top-level, full screen experience. If you wish to add push notifications (which are great way to re-engage with your users) – pay attention to the tips in the image below.

How?

• First step: I strongly recommend trying out the PWA code lab so you understand how the approach to this type of app may be similar (or not) from what you’re used to do.
• Tech: Evaluate whether you’re going to just use vanilla JS for your app or a library/framework. See here for barebones PWA config or try Web Starter Kit for a starting point with a build process (=Gulp). Your PWA should supports the application shell architecture for faster first-paint and persistent.
  • Offline support: There are few libraries  for helping you with Service Worker pre-caching (sw-precache) and runtime caching (sw-toolbox). You can check this code lab for building your first offline web app as a starting point.
  • User Interface: Like anything on the web, there are lots of options for your UI. Some of the example PWAs take advantage of Material Design and there are libraries for using it available for vanilla JS, Polymer Paper elements, Angular Material and community efforts like Material UI for React.
  • Icons: I find both iconfinder.com and realfavicongenerator to be good resources. If you have the budget, it’s always great to get something polish from a designer.
  • Performance: Please follow the RAIL performance model:
    • Cable:
      • First load (network-bound), First paint at 1s or sooner, Speed Index of 1,000 or less, <100ms for response, <16ms for each frame.
      • Second load: first paint at 300ms or sooner, Speed Index of 1,000 or less.
    • 3G:
      • First load (network-bound), 3G (normal, as defined by WPT): First paint at 2s or sooner (including TLS handshake), Speed Index of 3,000 or less.
      • Second load (disk-bound because SW): First paint at 300ms or sooner, Speed Index of 1,000 or less.
    • Test your work with WebPageTest and Chrome DevTools.
• Examples
  • Smaller Pictures – A great web app that will help you shrink photos.
  • Air Horner – The ‘must have’ web app for the olympics in the summer.
  • Voice Memos – Very useful when you have conversations with your spouse.
  • Offline Wikipedia – If you need to read something on the plane.
  • Guitar Tuner – For the ones that needs to tune their guitar.
  • Zuperkulblog – Good if you thinking on a PWA for publishers.
  • Snapdrop – an Apple Airdrop in HTML.
  • More on this pwa-list.

The main features for progressive web app

Misc

• Alex Russell – intro post to the topic.
• The Angular team have also started an early ng2-application-shell project based on the app-shell architecture.
• Addy Osmai great post: “Getting started with PWA”
• FlipKart’s case study – With lots of good technical tips.

 Be strong and build something amazing!

Progressive Web Apps – Noter

Progressive web apps are the future, and here is a demo that I built in order to feel the current challenges.
How about a little tool that let you take notes?
Yes, not too original, but still useful.

It is currently can be found with 2 versions:

1. Basic version – It contain service worker for offline, manifest and a simple text area. All the basic functionality, that allow you to take notes the are saved automatically with or without connection. I used jQuery and bootstrap to keep it simple and to make it easy to extended it in the future.
2. Full version with Firebase – Similar to the basic version, but this time, I added the ability to save the notes in the cloud (=firebase). You can add notes, edit current ones and (of course) delete the ones that you don’t really like. The text area was upgrades to a markdown editor. A simple one, but still something that will give you the ability to get a preview of the note in a markdown.
   You can use:
   User –  demo@demo.com
   Password – demo

See below how it will look like after you login.

It’s still “work in progress” and you can see at the current TODOs at the bottom of the code repository.

Challenges and Tips

You can see the main tips that I got from working on this demo in the image below.
The most important checkbox is “force update on page load” – It will make sure you are getting your new version and not the one that the service worker already cached.
Another good way to see what is going inside your service worker is to click on the link ‘sw.js’ above this checkbox.

 

So to wrap-up, the code for this demo can be found at Noter on github and the live demo.
Please try it on your Android and let me know if you find something that is broken or can be better.

Happy note taking and may you always write good and productive ones.

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: