Saturday, October 14, 2017

At AngularMix I saw Erik Haddad speak on progressive web apps!

I first heard of progressive web apps at this talk out at Google's San Francisco facility, but I didn't really get the big picture until I saw this other talk by Erik and they look about as intimidating as Mr. Haddad does in this photo I snapped of him. There is a lot to learn about service workers that I know I will have to learn one day, but also not soon. PWA support is not going to work in all browsers as not all browsers accommodate service workers yet. Google Chrome has service workers, but not Internet Explorer, etc. and this lack of cross-browser compatibility means that niche things will use them in the short term, not me. One example is progressive web apps in the mobile space. Where as you might use Ionic or Ionic 2 to make a traditional hybrid application in HTML5 in lieu of building natively for both iPhone and Android which sucks, you could alternatively make a PWA which is, yes, technically also a hybrid app, but it is one that goes out of its way to behave like a native app. It will have a local cache managed by a service worker. The service worker will sync things back up to a database at a server somewhere when it can. It thus makes the online/offline thing painless and you may use the PWA disconnected just like a native app. The concept of three-way databinding thus exists in this space with the UI, the cache, and the remote data storage online, be it what it may, being the three actors. Push notifications are a part of PWAs too and this too leans on service workers. You will be able to specify serviceWorker: true somewhere in apps that are Angular 5 or better to empower ngsw for caching. (Again, think of the looming future not the immediacy.) To actually build out a PWA you might use AngularFire2 which is a hodgepodge of modern Angular and Firebase playing nicely together. You can pretty much just drop Firebase into place per Erik with just six lines of configuration and have a real time database, authentication, and storage. Lighthouse was mentioned in this talk too. It used to be a standalone Google Chrome extension but now its abilities are just rolled into the Google Chrome Developer Tools you see when you press F12. Erik said this thing was at an "Audit" option under "Performance" but in the version of Chrome I have on my laptop (61.0.3163.100) I just see an "Audits" header across the top where it says: Elements, Console, Sources, Network, Performance, Memory, Application, Security, Audits ...This tool rates your app on performance and gives you suggestions as to how to clean stuff up to be more compliant with good design in the serverless space. Cloud Functions for Firebase let you defer some heavy lifting to the cloud, when it is available, so that you may do some things there in the name of keeping your app's footprint small. The resizing of images was given as an example.

No comments:

Post a Comment