Top 22 PWA Interview Questions And Answers

Question 1

What is a progressive web app?

Accepted Answer

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.

Question 2

Why do we need a web manifest for PWA?

Accepted Answer

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.

Question 3

What makes an app a PWA?

Accepted Answer

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.

Question 4

What are some benefits of PWA?

Accepted Answer

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.
5. **Offline capabilities:**
Due to the support of service worker API, PWAs are accessible in offline or low internet connections.
6. **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.

Question 5

What is a fetch event?

Accepted Answer

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:
```js
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);
      }
    )
  );
});
```

Question 6

What is CacheStorage?

Accepted Answer

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

Question 7

What are some disadvantages of PWA?

Accepted Answer

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

Question 8

What is a service worker?

Accepted Answer

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.

Question 9

What is IndexedDB and how is it used by PWA?

Accepted Answer

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

Question 10

What features do Progressive Web Apps have that native apps lacks?

Accepted Answer

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](https://medium.com/@krave/apple-s-app-store-review-process-is-hurting-users-but-we-re-not-allowed-to-talk-about-it-55d791451b#.s2bse2bai) or (unintended) [geographic restrictions](https://android.stackexchange.com/questions/12538/how-can-i-circumvent-regional-restrictions-in-googles-play-store)
* **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](https://developers.google.com/web/showcase/2016/konga).
* **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](http://www.businessinsider.com/how-many-apps-people-download-per-month-2014-8)
  * 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.](https://www.youtube.com/watch?v=qmE_jpnYXFo&feature=youtu.be&t=96)

Top 22 PWA Interview Questions

What is a progressive web app?

Why do we need a web manifest for PWA?

What makes an app a PWA?

What are some benefits of PWA?

What is IndexedDB and how is it used by PWA?

What is a service worker?

What is a fetch event?

What are some disadvantages of PWA?

What is CacheStorage?

What are some requirements to make the website installable as PWA?

What is the differences between a Hybrid Mobile App and a Progressive Web App?

What features do Progressive Web Apps have that native apps lacks?

What is App Shell?

How to update a service worker?

Explain the service worker lifecycle

What are some requirements to app shell?

What are some service worker's caching strategies do you know?

Is it possible to have truly persistent storage in a PWA and why may you want one?

What about PWA for iOS?

Is it possible to have multiple service workers?

What can service workers do that web workers cannot?

What are some benefits of an app shell architecture with a service worker?