Difference between revisions of "PWA (Progressive Web Apps)"

Revision as of 16:22, 17 July 2020

Definition

Progressive web apps (PWAs) are web apps that look, feel, and behave like native apps. Instead of a clear distinction between a native app you download and a web app you access through a browser, progressive web apps sit somewhere between the two, with the goal of providing a native-like app experience while maintaining a single code base that runs on all devices.

A native app is an app that runs directly on your device, like a phone or PC. It has to be developed specifically for that platform, but that also means that it can take full advantage of your device's capabilities. A web app is built for the web and run through a web browser. This means it can run on any device that supports a web browser, without the need to maintain device-specific code bases. On the other hand, its feature set is more limited, as it also cannot take advantage of device-specific features.

A progressive web app is built for the browser, using web technologies like HTML, CSS, and Javascript, but can also access device hardware, send push notifications, and function like a native app.

Characteristics of progressive web apps

Any web app is capable of becoming a progressive web app, as PWAs are built using the same technology, like HTML, CSS, and Javascript. However, PWAs behave and function differently from websites in a number of ways.

At a structural level, PWAs contain a manifest file in JSON format. This is a file containing metadata about your app, such as its name and icon. The manifest is used so that your app can be added to the home screen of devices and treated as a native app by the user. PWAs will open like a native app, but they are actually a dedicated browser tab.

PWAs need to be lightweight. They must match the performance of native apps, so they need to load quickly while delivering the same cross-device experience, whether a user is on a mobile phone or desktop PC. They do this by relying heavily on micro-services.

Micro-services are a way of breaking app functions down into discrete tasks that can run independently of the rest of the app. This is mostly for processing tasks and to both send and receive data, but they can also be used to provide offline functionality to apps.

These tasks are called service workers. They are a type of web worker and are treated as threads separate to the browser, which makes them useful for computationally intensive tasks, or when connections are poor. Instead of slowing down the user experience, these tasks are offloaded to a process that runs in the background. Once the task is completed, the app can retrieve the result, all without interrupting the user experience.

Service workers are installed on the device using a standard web worker API. A typical use for a service worker is to monitor and send push notifications. The user experience is not impacted when checking for new notifications, and it can run even when the user is not using your app.

What can PWAs be used for?

Progressive web apps are typically used with apps that function as software as a service; they are apps for services that exist on the cloud and are intended to be accessible anywhere from any device.

A well-known example of a progressive web app is Facebook. When users visit the Facebook website on a PWA compatible device, a notification will pop up that will allow the user to install Facebook as an app on their device. It will then live on the user's home screen and open up a dedicated browser window for Facebook's app when launched. PWAs are very good for branding and many PWAs see increased user engagement rates and lower bounce rates as compared to website sessions.

How do progressive web apps work?

PWAs rely on a number of technologies to provide the functionality and experience of a native app. In addition to the manifest file and use of service workers, many also make use of Web Storage and WebAssembly technologies.

Web Storage provides key-value database storage functionality using local device storage, which allows for both per-session and persistent data storage. Not only does this allow you to offload data storage onto the user's device, but it also means that data retrieval is much faster and it can also work while the user is offline.

WebAssembly allows for precompiled code to run in the web browser. This means that code written in languages like C, C++, and Java can be used in a PWA. This can be useful in tandem with web workers, as it allows PWAs to offload processor-intensive tasks from user devices to remote servers and into programming languages that are more efficient at specific tasks than Javascript, all without slowing down the user experience.

Importance of PWAs for SEO

Progressive web apps do not inherently benefit SEO, but the proper implementation of best practices can ensure a PWA is just as well-optimized for SEO as your website. Developers must be careful, due to a problem that also affects single-page apps.

Traditional websites render on a server and send the entire HTML document to the client. Clicking links results in moving to a different page, which loads a new HTML document. Search engines can scan and index these documents for content, like keywords, and use them in relevant search results.

PWAs and single page applications move most of the rendering to the client side, while new data is updated live and in discrete units, without requiring the user to change or refresh the whole page. Initially, search engines had trouble scanning and indexing PWAs, as they expected web pages to have unique URLs to index.

However, search engine technology has matured thanks to the HTML5 history API. This provides a way for PWAs to generate a linkable URL. A linkable URL enables search engine indexing and can direct users to the correct content directly within your progressive app.

Related links

• https://web.dev/progressive-web-apps/
• https://brainhub.eu/blog/advantages-disadvantages-progressive-web-apps/

Similar articles

• AMP (Accelerated Mobile Pages)
• App Store Optimization (ASO)