Progressive Web Applications – The Developer's View

The main features of PWA’s are:

• Instant Loading: Service workers (elaborated below) allows your application to load instantly and reliably
• Fast: Fast and smooth navigation, scrolling, animations and transformations provide the best user experience
• Secure: HTTPS secures the connection between the server and the user, the encryption ensures that the user information is kept safe and secure
• Responsive: Users now access information via laptops, tablets and smart phones; apps should reflect the same by structure and code content to look great on screens of any size or any form factor
• Push Notifications: Web push notifications make it easier to re-engage with the user by showing timely, related and contextual-based notifications even after the browser is closed
• Add to Home Screen: PWA’s ‘install’ option in the browser lends capability to the user to seamlessly add the app to the home screen, making it really easy to access

But why PWAs

As per a survey conducted by Google, the number of people visiting the native application is less than three times than that of a web application in browser. User prefers to enter the URL in browser rather than download the application, which otherwise consumes more time and memory.

User is not required to download the app from the app store or play store. By adding the manifest file and using the service workers, we can provide “add to home screen” option to the user so that he can add the app to the screen. As mentioned in the Google I/O `17, the apps added to home screen behave like other regular apps, meaning:

• It works with android intents

• It displays in app launcher

• It can be integrated into android settings

• It can be opened from search

PWAs cost relatively less as compared to native apps because of single code base, whereas for native apps, we need to develop different code bases for Web, Android, IOS or any other OS.

Major Components

App Manifest: 

The app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in areas where they would expect to see apps (for example, a mobile device's home screen), direct what the user can launch, and define its appearance at launch.

JSON file is at the root directory of the application, it specifies how the app will launch (standalone, in the browser, full-screen, or etc), app Icon information, name, short name etc., Refer to the the manifest in the example below:

{
"name": "PWA Demo Application",
"short_name": "PWA Demo",
"icons": [{
"src": "/assets/icon.png",
"size":"192x192"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#fff",
"description": "A Demo Application.",
"scope": "/"
}

For options and configuration, you can refer https://developer.mozilla.org/en-US/docs/Web/Manifest

Service Worker:

JavaScript code acts as programmable proxies and are responsible for intercepting and creating cache for the requests. It stores the actual response including the http headers.

Refer sample service worker code below:

<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log("Service Worker Registered"); });
}
</script>

For app to work offline, we need to integrate service workers into our application. You can refer https://developers.google.com/web/fundamentals/codelabs/offline/ to start with service workers.

Current Possible Native Features

The native features that can be used by PWAs are:

• Full Screen: By configuring the manifest fill the PWA, so that it can open in full screen. And is able to control the notifications bar color
• Push Notifications: Like native apps, PWA can push notifications to the system tray
• Offline Working: Can be done with the help of service workers
• Splash Screen: Is supported to give a more app like feel. It can be controlled by using manifest
• Share: In I/O’17 Google announced the release of web share that allows us to trigger native share feature with simple code. Refer below example:

  If(navigator.share){
  navigator.share({
  title: document.title,
  text: "some text",
  url: window.location.href
  })]
  .then(()=>{})
  .catch((error)=>());

  For more, refer https://developers.google.com/web/updates/2016/09/navigator-share

• Image Capture : In I/O’17 Google announced the release of Image capture that allow PSWs to control camera options programmatically like flash, zoom, brightness, etc.
• Fore Ground Detection
• Geo Location
• Device and Screen Orientation
• Screen lock and many more

Native Features Incompatibility:

The following native features cannot be used by PWAs as of today:

• Bluetooth
• NFC
• Proximity Sensors
• Ambient Light
• Wake Lock
• Contacts
• Alarms
• Modifying System Settings

Conclusion

Currently, companies like Google, Samsung and Mozilla lead the development of standards and supports for PWAs. The future of progressive web apps looks bright in terms of support and scope.

On the other hand, Microsoft is actively focusing on PWAs. Windows has fully integrated PWAs into Edge, including push notifications and splash screen. Windows Store will show PWAs as installable apps in Windows 10.