Progressive Web App (React)
LIVE DEMO
A simple demonstration of a Progressive Web App built with React, built while studying the 'Progressive Web Applications with React Jumpstart' course from Udemy. Although the UI leaves much to be desired, the functionality of the app showcases many new technologies that can be leveraged to enable a web application to look and behave more like a native app, and so hopefully increase user engagement. The app demonstrates 'add to home screen' functionality, offline loading, offline/online pop-up notifications, local storage, a splash screen, automatic full screen browsing, and a custom app icon.
Please note: the UI of this app isn't responsive on mobile, or at least I haven't had a chance to make it so yet - but in this case, how the app looks is besides the point. I'm more interested in its underlying technologies. I believe within 3 years nobody's going to be writing apps in Swift, Java, Objective C, or even React Native. We'll all be writing progressive web apps! I'm pretty eager to learn the most I can about them.
Getting Started
Visit the live demo link above, either on an Android phone or on an Android emulator. I recommend Android Studio or Genymotion.
After loading the app, put your phone into 'airplane' mode then refresh, you'll see that the app still loads, menu is still animating, images are being displayed from cache, scrolling still works as expected - it's magic! You'll also see a pop up notification that tells you you're browsing in offline mode. You'll see another pop up if you go back online. Now click on the browser options and select 'Add To Home Screen'. You can name the shortcut whatever you want and it will be added to your home screen with a custom icon - looking just like a native app. When you click on that you'll be presented with a splash screen, then the browser window will automatically go full screen and at this point you'll start to feel very nervous if you're a iOS/Android developer hoping to still have a job in 5 years! :)