Chrome, JavaScript, mobile, webdev

Progressive Web Apps – Noter

noter-1Progressive 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.
Noter - full version with firebase

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.

noter sw ip

 

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.

Standard
Chrome

Progressive Web Apps – Offline And Add To Home Screen

Screenshot 2015-05-13 18.04.53

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.
Screen Shot 2016-03-20 at 2.48.48 PM

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.

Continue reading

Standard
Chrome, JavaScript, mobile, webdev

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: Continue reading

Standard
Chrome, JavaScript, webdev

Chrome 46 Updates

google-chrome-logo

Performance

Service Worker

Continue reading

Standard
Chrome

Chrome 45 New Features

google-chrome-logoTime flies!
Since my last update on Chrome 44 we had the chance to see the market crash and quite a lot of new features that were baked into Chrome 45.
The main improvements you should take a closer look at:

  • A set of new ES2015 features including:
  • SMIL is deprecated – to learn more please check out the discussion.
  • This (long time) bug is fixed.
  • Web Bluetooth is now available in Chrome OS 45.
    It’s still in Developer Preview and the team is actively looking for developer 
    feedback.

Chrome for Android Media controls
On Android, native apps can show media controls in a system notification when playing audio, making it easy for users to control audio while multitasking. Chrome 45 brings this capability to the web by showing a notification with media controls when audio is playing in web content. The controls will automatically show up when <audio> or <video> tags play audio longer than 5 seconds. It will look like this: Continue reading

Standard
Chrome, JavaScript, mobile, webdev

The Latest From The Web

google-chrome-logoA lot of new interesting APIs that are pushing the web platform forward introduced with Chrome 43 (now in Stable). Let see the ones that are going to impact a lot of users.

  • The Fetch API now allows developers to directly operate on and incrementally release the bytes of streamed network responses, in contrast to the equivalent XMLHttpRequest functionality that requires developers keep the entire in-progress stream response in memory.
  • The Cache Storage API, previously only available in service workers, now provides developers full imperative control over their caching in the page context. This is huge! It will enable users to have better (=faster) experience in places where the connections are not good.
  • Autofill and Autocomplete – People hate filling out web forms, especially on mobile devices, learn how to help them complete it up to 30% faster. (And yes! I wrote it).

Continue reading

Standard
Chrome, webdev

Mobile Sites Improvements – Push Your PageSpeed Score Up

In the past, I wrote about ways to improve your mobile website.
In this short post, we will focus on one tool that could help you move the needle. PageSpeed Insights is a free tool for developers to check how their site performs out in the wild. It also got a good API so you could use it during your build process.

Here are the current results I see on my projects’ site: Continue reading

Standard