Back to Blog

Become a JavaScript-on-Mobile Pro with PWA’s

Sahil Sanghavi

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”.

Steve Jobs @ "One Last Thing" - June 11, 2007

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”.

The Chrome Dev Summit site installing as a Progressive App.

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:

  1. 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.
  1. 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.
  1. 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.
  1. 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.

App shortcuts menu opened 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:

using the IdleDetector web api to check if the user is inactive 😴 on your app

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.

adding the contacts picker api to a javascript pwa 📱

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.

handy tip: enable device motion in chrome devtools, which can simulate device movements.

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.

If you're here, thanks for reading so far! Feel free to drop any suggestions & have a great time exploring PWAs! :)

More from the Blog

Native Lazy Loading 💤 is coming to our browser

The prospect of lazy-loading is to minimize the load of bundles that are loaded in the initial page fetch. With lazy-loading, these tags’ contents are not loaded until they are scrolled up to the viewport of the browser. This is famously used in Medium.

Read Story

Native FileSystem API is coming to our browser 😍

Accessing the filesystem is a common feature of apps, but coming to the browser it’s an all-out battle with the filesystem. But Chrome is changing all that with the coming of the Native Filesystem API. 

Read Story

Understanding Typeof in JavaScript

Knowing the type of data you are working on is often found crucial. In this post, we will look into the typeof keyword in JS.

Read Story

Stay in the Loop.

Gitstart runs a monthly email newsletter for developers, engineering leaders and CEOs, covering latest tips and trends.
We will never share your email address with third parties.