progressive web apps ¯\_(ツ)_/¯
Progressive Web Apps use emerging web browser APIs and features to bring a native app-like user experience to cross-platform web applications.
Responsive design took over the internet back in 2012, however the tech had been brewing since 2007, when Steve Jobs introduced the idea of web-apps to the world at the launch of the first iPhone. Apple was talking about the innovative new way to create web applications “that look exactly and behave exactly like native apps”, a long time before Google defined “Progressive Web Apps”.
In 2014, Forbes ranked Jobs’ early and short-lived fixation on Web Apps among his biggest blunders.
Google introduces PWA:
The name “Progressive Web Apps” was coined by Chrome developer Alex Russel in an article that invited for a “deep shift in our understanding and tools” to “build better experiences across devices and contexts within a single codebase”.
making a web app "Progressive"
In order to term a web-app "progressive", technically speaking, the app should have the following basic three (and one optional) features:
- Secure Contexts [HTTPS]
Most of the features related to a PWA such as geolocation and even service workers are available only once the app has been loaded using HTTPS. It also establishes your web-app as a trusted site, especially if users need to make secure transactions.
- Service worker[s]
A service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. With service workers, web developers can create reliably fast web pages and offline experiences.
- Manifest file
A manifest.json file that controls how your app appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format.
- Favicons [Optional, but highly recommended]
Favicons for your app, that should be described under the Manifest file. The icons then show up as app icons when pinned to the home screen or taskbar.
getting technical with PWAs
Progressive Web Apps represent a collection of capabilities that put web apps on a level playing field with native iOS, Android, and desktops apps.
Since the MDN Docs for PWA are still in draft, here are seven lesser-known web features that can be easily implemented using PWAs.
1. App Shortcuts:
The app shortcuts menu is invoked by right-clicking the app icon in the taskbar (Windows) or dock (macOS) on the user's desktop, or long pressing the app's launcher icon on Android.
HOW?
Simply add in the 'shortcuts' property to your `manifest.json` file.
2. Bluetooth:
The Web Bluetooth API allows websites to communicate with Bluetooth devices.
Note: You'll need to use Secure Contexts here. If developing locally, use Ngrok to setup an SSH tunnel that can broadcast localhost to a secure URL.
Also, this example requires a little knowledge of how Bluetooth Low Energy [BLE] works, be prepared!
I'm using an Adafruit Pulse Sensor hooked up to a NodeMCU ESP8266, programmed via Arduino (more on this coming in a later post).
[Yes, I love playing around with microcontrollers & sensors.]
A detailed guide for this can be found here.
3. Idle Detection:
4. Contact Picker:
The Contact Picker requires an HTTPS connection. If developing locally, use Ngrok to setup an SSH tunnel that can broadcast localhost to a secure URL.
5. Web Share:
On a mobile device, sharing should be as simple as clicking the Share button, choosing an app, and choosing who to share with.
You can use the Share Target API by updating the manifest with a share target:
6. File System:
The File System Access API allows web apps to read or save changes directly to files and folders on the user's device.
7. Device Motion:
The DeviceMotionEvent provides web developers with information about the speed of changes for the device's position and orientation.
Finally,
PWA's cannot replace native apps [YET], but as more devs start to use web-assembly to run native code on modern browsers, PWAs will have a huge boost.
Thanks for reading so far! Have a great time exploring PWAs! :)
