Back in November 2016 I took some time off work to visit my girlfriend in Vietnam. On the way I stopped off in San Francisco to attend the Chrome Dev Summit (which was awesome). All the talk about progressive web apps, got me itching to build something. I met and got chatting @mustafa_x a design advocate for Google, who inspired me to take one of my old (Google Material Design inspired) projects and overhaul it as a shiny new PWA for 2017.
I certainly learnt a lot building this app. It took me about a week to get everything setup and built. Here are a few things I did differently this time:
- Uses rollup as the bundler instead of browserify. Tree shaking has always seemed logical and although I was unlikely to see huge gains here (as I was trying to use as few libraries as possible) it was a good opportunity to learn the ropes and resulted in a config that I could use on future projects.
- Incorporates a service worker and web manifest. In the vein of everything that was being said at the summit, I tried to incorporate as much progressiveness-ness as possible to maximise the Lighthouse score which is now up at a reasonably respectable 88/100.
- Hosted entirely on github as a static app. I didn't want to maintain a server at all and I knew that this was going to be implemented as static app. Github pages is an excellent free service and with a little hacking works plays just fine with single page apps.
- Continuous integration to gh-pages with Travis. I have used gh-pages for really simple projects before but always found that deploying built artifacts to the pages branch a bit cumbersome. I found a tutorial that demonstrates how to get Travis to do all this hard work, it makes for a great workflow!
It was a fun project to work on and all-in-all I discovered it was not too hard to make an app PWA compliant. The hardest part was trying to make the app and all its features work nicely cross platform. On that note, I would love some feedback especially on the UI/UX! Any improvements you would make or features you would add?