Progressive web app

A Progressive Web App is an application that has been built using a set of web development techniques and technologies that help enable a web site to be progressively installed and act like a mobile application as the user becomes increasingly engaged with the experience. A Progressive Web App should work offline and be launchable as a standalone experience, and may also offer enhanced experiences such as Push Notifications, integrations with the system's "Share" experience and other device capabilities.

A core tenant of a Progressive Web Apps is Progressive Enhancement which enables a developer to build an experience that works across as many platforms as possible and be enhanced on platforms where technologies (most significantly, perhaps, Service Worker) exist.

History

2005-15

The web and its technologies are ever evolving with the pace of time. From static websites to dynamic web pages through Ajax and now responsive web design at its stack.

Dynamic Web

Between 2000 and 2010, we have seen web technologies develop from static HTML sites to sites utilizing dynamic PHP, ASP.NET, and Ajax, as well as various server and client-side languages/scripts.

While the web was being used on mobile devices well before, the introduction of the iPhone by Apple in 2007 heralded the beginning of a large increase in users accessing the web via mobile devices. This meant that developers needed to pay more attention to the challenges specific to mobile device form factors and to touch-screen experiences.

While the initial iPhone was designed primarily as a device for accessing the web, it wasn't long before it joined other such devices (eg the Nokia Internet Tablet range) in allowing native applications to be developed for it. Native applications provided a superior end-user experience when compared to web sites of the time.

Responsive Web

Eventually, RWD (Responsive Web Design) evolved. This came with the introduction of HTML5, CSS3, and JavaScript and web sites became increasingly dynamic and were able to target multiple devices. However, the capabilities of native applications continued to outpace web sites since they were able to easily take advantage of the devices' features, which weren't available to web sites since they were run in a web browser.

Raising Mobile UX Aspirations

For web experiences, browser-based web apps are essential while pure native mobile app experiences come through native mobile apps only. Technologies were developed to enable web technologies to be used to make installable apps. The typically ran in a browser-like environment which was enhanced to allow access to the same platform features to whic native apps had access.

Of course, hybrid apps mimic the native mobile characteristics and typically needed to be downloaded and installed from an online application store, and they consumed significant space on the device's storage, as well as on home screens, both usually quite small (compared to, eg, desktop computers).

Even though hybrid apps run in mobile browsers, they don’t maintain the shared principles of the web, such as

• They don’t have a URL and so are not linkable, and as such they never become the part of the web
• Markup and styling render them accessible to humans as well as search engines
• User Interface richness and system capabilities serve as an additional functionality
• Open source by nature so free to implement and use

Many attempted to close the gap between the installed applications and the web experiences, but they abandoned one or two aspects of the shared value system described above.

Progressive Web Apps

In 2015, Alex Russell, a web developer at Google working on Chrome Blink, have put the web tab out-of-box and turned it into the mobile application, working offline with desired personalization, and touch experiences.

Alex has freed web app from packaging and deploying process on the App Store by turning the website, with right ingredients, into the mobile capable web app. He had done it progressively by adding new capabilities like personalization, place on home screen, seats into the notification tray, working offline, touch experiences, and much more in an unimaginative way.

Thus, it had surpassed all constraints of the traditional web apps as well as cross-platform mobile apps by progressive enhancement and tangible improvements in a web site or web page.

Therefore, Progressive Web Apps never compel users to take hard choices up front, instead, take permissions of the users for the inclusion of each new feature or functionality, over the time, and with proven experiences.

Characteristics

According to the Google Developers, progressive web apps are:

• Progressive: as they built along with progressive enhancement as core tenet
• Responsive: to fit with any device form factor ranging from desktops to tablets, smartphones, and wearables like next things
• Work Offline: as enhanced with service workers to work with no connectivity or with poor connectivity without degradation in performance because they had downloaded and installed all comp
• Native Mobile Like: as it has native hardware and software compatibility to give mobile user experiences
• Real-time Updates: due to updating process of the service workers, Progressive Web Apps are always up-to-date
• Safe & Secure: as they are always served via HTTPS so safe against snooping and leave no chance for tempered content
• Visible on the Web: as W3C manifest and service worker registration scope, search engines can index them
• Engaging: push notifications like features make them engaging and re-engaging
• No Download & No Installation: as Progressive Web Apps enhancing and becoming powerful progressively with each interaction of user and user permissions, don’t need download or installation at a time
• Linkable: as the Progressive Web App has a valid URL it can link on the web and free from complex installation process
• Free: as they are turning into the mobile app over the time from the website or webpage, which is accessible on the web server, no App Store approval, hence no charges at all

Technologies

The term Progressive Web App represents a broad range methodologies and technoliges that can be used to build an experience that can be progressively installed on the users device:

• HTML5, CSS3, JavaScript, Media Queries, and Responsive Web Designing technologies
• Web Manifest to define how the app should appear on the user's system (Launch Icon and title) and how it should be launched (Fullscreen or in a window)
• Service Workers to introduce an app-like lifecycle to a web-site and to define what can be installed
• Transport Layer Security (TLS) to ensure end-to-end integrity of the page so that powerful features can't be maliciously injected into the page
• Progressive Enhancement to ensure that the experiences works across all browsers and devices

Manifest

It is W3C specification to define JSON-based manifest to provide developers a centralized place to put Metadata associated with web application including

• The name of the web application
• Links to the web app icons or image objects
• The preferred URL to launch or open the web app
• The web app configuration data for a number of characteristics
• Declaration for Default orientation of the web app
• Enables to set the display mode e.g. full screen

By setting and manipulating the Metadata for the web manifest file, developers enable user agents to create seamless native-like mobile experiences through the Progressive Web App.

Service Workers

Native mobile apps are rich in experiences and performance because they have required content, components, and resources are ready for the client device due to the mobile app installation process and the price they pay for it such as the disc space occupation, no real-time updates, and no search engine visibility.

Whereas, traditional web apps are suffering from unreliable web connectivity and loading constraints. To overcome all the Service Worker designed with the Web Worker context to offer seamless loading experiences.

Technically, Service Workers provide a scriptable network proxy in the web browser to manage the web/HTTP requests programmatically. The Service Workers stay in between the network and device to supplement the content. They are capable of using the Cache mechanism efficiently and error free during offline mode.

Properties of Service Workers

• Trigger and keep alive by the relationship to the events, not by the documents
• Generic in nature
• Event-driven with time limit scripting contexts and running at the origin
• With natural endpoints for a wide range of run-time services
• Have a state
• With a script URL
• Containing registration
• Allocated ID or UUID
• With life cycle events
• Have script resource map
• Can skip waiting for the flags

Benefits of Service Workers

• Capable of handling the Push Notification easily
• Sync the background data
• Capable of responding to the resource requests originate elsewhere
• Receive centralized updates

Application Shell Architecture

To load the application layout and content rapidly, the service workers always store the components for the “Basic User Interface” of the RWD web application. The Basic User Interface terms as the “Shell” of the application.

The Shell provides an initial static frame, a layout or architecture to load content progressively as well as dynamically. Technically, Shell is a bundle of code stored locally in the browser cache of the mobile device. Thus, the Shell can keep the Progressive Web App users engage while loading of content taking place with a different degree of the web connectivity.

The real power of progressive web apps is to keep us using the excellence of the web technologies yet get out of the tab, though with decent mobile experiences.

It is true that at present, the Progressive Web Apps are only for the Chrome browser, but it may be for all browsers in near future.