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.

Advertisements

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 – 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.

Chrome 48 Updates And News

As every six weeks (more or less), we got some cool & new features in Chrome. Here are few that I like for version 48:

Presentation API

This version of Chrome Android allows websites to present to external devices via Cast, increasing the form factors available to sites that want to present content. You can also present from your desktop with this Cast extension.

Custom buttons on notifications

Timely, personalized notifications save users the effort of manually checking for updates throughout the day and have enabled a host of new experiences from real-time communication to live updates on breaking news.

Chrome 47 Updates And Web News

• Input Device Capabilities: Chrome 47 has a new feature that makes it easier to understand the how users interact with your site: InputDeviceCapabilities! DOM input events are an abstraction above low-level input events, loosely tied to physical device input (e.g., click events can be fired by a mouse, touchscreen, or keyboard). However, there is a problem: there is no simple method to obtain the details of the physical device responsible for an event. In addition, certain types of input can generate further “fake” DOM input events for compatibility reasons. One such fake DOM event happens when a user taps a touch screen (such as on a mobile phone); it not only fires touch events but, for compatibility reasons, mouse events as well. The new InputDeviceCapabilities API provides details about the underlying sources of input events this come to helps with problems when supporting both mouse and touch input. Read More: developers.google.com/web/updates/2015/10/inputdevicecapabilities

• Adding a Splash screen for installed web apps – Over the past year we saw an effort in the Chrome team to let developers build sites and apps that feel like they are installed on the user’s system. The home screen launch process on Android is a great first step. In Chrome 46 on Android, we got the background_color that removes any delay and paints the screen with a solid color until the browser is ready to paint something from the web page. This was a good addition, yet it still didn’t look fully like an app. Now in Chrome 47 on Android, Beta these days as of October 2015, we are introducing the concept of a “splash screen”. Have a look:

Chrome 46 Updates

Performance

• Hot from the oven: AMP project!
  The web today is many things: an application platform, an e-commerce platform, a content platform, a gaming platform, and so much more. The AMP project decided to focus entirely on static content as it lends itself to more radical optimization approaches that are easier to apply across the board.
  It’s all on Github so join the party. Btw, you can see the WordPress moving into producing AMP pages.
  
• Tools like ‘srcset’ allow developers to serve an optimized image variant in a responsive way, but it can be cumbersome and inefficient to use in practice. Developers can now negotiate with the server (resource selection with client hints) to download the best image variant for a device using straightforward HTTP request headers. These headers communicate DPR, Viewport-Width, and the intended display width of the resource being fetched to the server.
  
  
• Sites can specify origins that Chrome should preconnect to in order to improve performance.

Service Worker

• Cache.addAll() is now supported, removing the need for polyfills enabling bulk interactions with the cache.
• The Fetch API now supports Request.redirect, allowing more control over redirects.
• Resource Timing extensions to the Performance interface are now available without prefixes.
• As part of our continuing policy to remove powerful APIs on insecure origins, the Cache API is now restricted to HTTPS.

Chrome’s Market Share And Service Worker

According to Stat Counter in the past 3 months Chrome made a progress in market share. It’s now got ~31% world wide. But if we dive a bit deeper into the chart below we can see that the situation on mobile is even better.

Take into consideration that Chrome + Android + UC Browser + Opera is ~70% of the market it’s a great news for web developers in terms of APIs. I hope to see soon the power of Service Worker and Push notifications in many more browsers. It’s the start of a new wave of web apps that look and feel similar to native apps.