Browsers And Their Capabilities

The web is by far the biggest platform out there.

It’s everywhere or at least it’s on the way to be everywhere. From powerful cutting-edge devices down to devices that can do nothing more then send few bytes of information.

However, this pluralism of ways to consume this information bring a challenge to web developers. We need to understand what are the limitations and what are the capabilities of the browsers that will run our work of art.

Here are set of tools that will help you with that challenge.

Research

• chrome status – Web platform feature support and examples. It’s a great way to see what is coming up… and try to test it today in Chrome Canary. You can also check blink-dev forum. Blink is Chromium’s rendering engine so I found some very interesting discussions.
• status modern ie – Like Chrome Status but for Edge and Internet Explorer. It gives you the current status and the roadmap.
• ES6 compatibility – From server side to browsers. Learn what will run and where. After all, the common technology to ‘run’ things is javascript. OK – ECMAScript, fine.
• caniuse.com – Mobile and desktop browser capabilities.
• what web can do today – Stuff that your browser can do, with links to demos and information about browser support.
• mobile html5 – A table that contain features per mobile browser.
• If you testing a new browser for its CSS3 support this tool will do the work for you – css3test.com

How To Make Money From Your App?

What are the action items that will increase the odds in that battle to improve your monetization?

This is one of the most challenging aspect for every startups. After you build your application (or service) you need to measure all the actions that the users take. This is a learning mechanism that will let you iterate (hopefully quickly) and improve your product. Once you feel that you have a good product market fit and you are out of the alpha (or beta) modes it’s time to put efforts in the ‘Grow’ and ‘Earn’ parts.

Let’s see what are some of the tools that we can use.

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.

The Next Billions Users

This is a short one that is mainly compose from 3 images that tell the story of “The next billions users” and what we should focus on.

From which countries new users will come online?

If you wish to see more about this data. Check this Source.

What to focus on?

When you develop your fast and resilient web app, you should focus on 4 aspects:

How?

The client must be able to render the application regardless of their connectivity. If the user can’t load the app, nothing else is important. Offline is a normal mode of operation for resilient applications. You can do it today with the Service Worker API. It’s not only the offline feature, but the ability to control your users’ experience and improve it (e.g. push notifications).

More in Ilya’s #IO16 Talk and right here.

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.

Accelerate your mobile pages, it’s easy!

In October, Google announced a new open source project called Accelerated Mobile Pages, which aims to dramatically improve the performance of the mobile web.
Why it is important?
Well, one look at the history of these posts will prove you that there is a real need for speed!
The project relies on AMP HTML, a new open framework built entirely out of existing web technologies, which allows websites to build light-weight web pages.  

The basic ‘hello world’ version of your HTML page will look like:

Mobile Trends During 2015

Quick stats that shows why it’s a “mobile world”.
Time spend on mobile grows 117% year over year. One quick look at the image below will show that we have a new form factor that is taking all others in terms of growth.

 

Phablets are rocking

Phablets have become the unstoppable media consumption device. What a proof? Check the quarterly form factor distribution forecast (below).
Amazing. In the next 6 quarters, we might be in a place where phablets are 60% of all mobile devices.

Improving Your Mobile Sites

It’s not a secret that the world is going mobile at a (crazy) rapid pace. We all seen the statistics about it, and we know that the next 4 billion people will see the web only on mobile. This post will focus on how you can build a mobile site that will be ‘in a good relationship’ with Google (and other search engines out there).

Responsive web design is one answer when it comes to ‘how to serve’. You wish to avoid redirects, sniffing for the mobile browsers agents or managing two versions of your sites.

How we can make our site mobile friendly?
Let’s try to think as developers of a search engine. If you were trying to figure out if a site was mobile friendly just by looking at a site, what would you look for? First, the content on our site must be readable on mobile so it should fit within the screen. Second, we will try to make sure that the site is usable.

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.

HTML5 On Mobile

This week we are hosting a lot of developers at Campus TLV. The goal of these talks is (mainly) to harness developers with knowledge and tools they can use today in their current jobs. We lucky to host developers from few government’s organizations. In their case, there are many special regulations that need to be accommodate, so we wish to give them practical tips/tools they can use in order to build open RESTFul APIs and modern web apps. It’s no secret that there is a lot of interesting data that only the government produce.
I hope that movements like codeforamerica.org will flourish around the world quickly.