22 PWA Interview Questions Every Developer Should Know

The concept of the progressive web app (PWA) was approached by Google in late 2015. They are basically web applications (Website) but have look and feel like other native mobile apps. The progressive web app enabled websites can offer functionalities such as working offline, push notifications, and device hardware access.

Benefits of the progressive web app:

1. Smaller and Faster: The progressive web apps are much smaller in size than native apps. They don’t even need to install. That’s they are not wasting disc space and load very fast.
2. Responsive Interface: Progressive web app (PWA) supported web pages are capable to fit in every screen sizes automatically. It could be a smartphone, tablet, desktop or laptop.
3. No Updates Required: Most of the mobile apps need regular weekly updates. Like the normal website, progressive web apps (PWA) are always loaded latest updated version whenever the user interaction happens and no App or Play Store approval required.
4. Cost Effective: Native mobile apps need to be developed for both Android and iOS devices separately and their development cost is very high. On the other hand, progressive web apps are had the same features but the fraction of the prior price.
5. SEO Advantage: Progressive web apps are discoverable by search engines and load super-fast. Just like other websites, their links are sharable too. This, in other words, gives good user experience and result in SEO rank boost.
6. Offline capabilities: Due to the support of service worker API, PWAs are accessible in offline or low internet connections.
7. Security: PWAs are delivered over HTTPS connection and secure user-data over each interaction.
8. Push Notifications: By the support of push notifications, PWAs can interact easily with the users and provide a really amazing user experience.
9. Bypass the app stores: PWAs don’t need the App store or Google play store support. Their updated version can be directly loaded from the web server without the requirement of app store approval. On the other hand, native apps need days of approval if any new update required. There are possibilities of getting rejected or banned.
10. Zero installation: During browsing, progressive web app gets its own icon on phones and tablets, just like a mobile application, but without the need to go through the tedious and slow App Store installation process.

There are some key principles a web app should try to observe to be identified as a PWA. It should be:

• Discoverable, so the contents can be found through search engines.
• Installable, so it's available on the device's home screen.
• Linkable, so you can share it by simply sending a URL. * Network independent, so it works offline or with a poor network connection.
• Progressive, so it's still usable on a basic level on older browsers, but fully-functional on the latest ones.
• Re-engageable, so it's able to send notifications whenever there's new content available.
• Responsive, so it's usable on any device with a screen and a browser — mobile phones, tablets, laptops, TVs, fridges, etc.
• Safe, so the connection between you and the app is secured against any third parties trying to get access to your sensitive data.

A web manifest file lists all the information about the website in a JSON format. Having this file is one of the requirements to make the website installable.

It usually resides in the root folder of a web app. It contains useful information, such as the app’s title, paths to different-sized icons that can be used to represent the app on a mobile OS (for example, as the home screen icon), and a background color to use in loading or splash screens. This information is needed for the browser to present the web app properly when installing, and on the home screen.

Disadvantages of the progressive web app:

1. Less access to system features: Currently, Progressive Web Apps have limited access to native system features than native apps. Also, all browsers are not supporting its full features but maybe in near future, it will be the new standard of development.

2. More Android – Less Apple’s iOS: progressive web apps are currently, most supported by Android devices. Apple’s iOS is only partially supporting.

3. No review standard: progressive web apps don’t need any kind of review system which is applicable for native apps from the app store. It may make the process faster but lack of promotional benefits from the app store.

To make the website installable, it needs the following things in place:

• A web manifest, with the correct fields filled in
• The website to be served from a secure (HTTPS) domain
• An icon to represent the app on the device
• A service worker registered, to make the app work offline (this is required only by Chrome for Android currently)

There are some:

• discoverability - content in progressive web apps can easily be found by search engines but a content-centric native app like StackOverflow won't show among app store search results for content that it does offer access to, such as "pwa vs. native". This is a problem for communities like Reddit, which can't expose their numerous sub-communities to the app store as individual "apps".
• linkability - any page/screen can have a direct link, which can be shared easily
• bookmarkability - save that link to access an app's view directly
• always fresh - no need to go through the app stores to push updates
• universal access - not subject by app stores sometimes arbitrary policies or (unintended) geographic restrictions
• large data savings, extremely important in emerging markets with expensive and/or slow Internet access. For example, e-commerce website Konga cut data usage by 92% for the first load by migrating to a PWA.
• low friction of distribution - if your progressive web app is online, it's already accessible for Android (and other mobile) users.
  • 65.5% of US smartphone users don't download any new apps each month
  • PWAs eliminate the need to go to the app store, search for the app, click Install, wait for the download, then open the app. Each of these steps loses 20% of the potential users.

CacheStorage is a storage mechanism in browsers for storing and retrieving network requests and response. It stores a pair of Request and Response objects. The Request as the key and Response as the value.

CacheStorage is not a Service Worker API, but it enables SW to cache network responses so that they can provide offline capabilities when the user is disconnected from the network.

The caches (an instance of CacheStorage) object is used to access the CacheStorage, to retrieve, store and delete objects.

IndexedDB is a large-scale, NoSQL storage system. It lets you store just about anything in the user's browser. In addition to the usual search, get, and put actions, IndexedDB also supports transactions.

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high performance searches of this data. While DOM Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.

In a context of PWA a general recommendation for storing data offline:

• For the network resources necessary to load your app while offline, use the Cache API (part of service workers).
• For all other data, use IndexedDB (with a promises wrapper).

After a service worker is installed and the user navigates to a different page or refreshes, the service worker will begin to receive fetch events.

A fetch event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if index.html makes a cross origin request to embed an image, that still goes through its service worker.)

Consider:

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

A service worker is a specific type of JS Script, which runs in the background of the user’s browser. It acts like a proxy server exists between your app, the browser and the network. Among other things, service workers allow apps to continue functioning offline in case the user loses internet connection.

Service Workers are a virtual proxy between the browser and the network. They finally fix issues that front-end developers have struggled with for years — most notably how to properly cache the assets of a website and make them available when the user’s device is offline.

They run on a separate thread from the main JavaScript code of our page, and don't have any access to the DOM structure. This introduces a different approach from traditional web programming — the API is non-blocking, and can send and receive communication between different contexts. You are able to give a Service Worker something to work on, and receive the result whenever it is ready using a Promise-based approach.

They can do a lot more than "just" offering offline capabilities, including handling notifications, performing heavy calculations on a separate thread, etc. Service workers are quite powerful as they can take control over network requests, modify them, serve custom responses retrieved from the cache, or synthesize responses completely.

A hybrid mobile app usually refers to an application built using a combination of web and native technology that is distributed via a native app store. These apps go through Apple, Google, Microsoft, etc's app store review process.

A Progressive Web App is an application built using web technology that runs in the browser and may be added to the home screen. They do not need to be distributed via native app stores, but can be included in them. Microsoft includes PWAs in its Microsoft Store as of 2018 and Trusted Web Activities make it easier to submit PWAs to the Google Play Store.

Some hybrid mobile app platforms include PhoneGap (aka Cordova), Appcelerator Titanium, and Ionic. You don't need a platform to create a hybrid app, but they are helpful because they've already taken care of creating a bridge between native APIs and JavaScript APIs.

Progressive Web Apps simply run in the browser so they can be built with basic HTML, CSS and JavaScript.