PWAs are on the rise. Arguably Progressive Web Applications is the future of Web Development & Design. The PWA apps load like a regular web page but provide the feature to work offline, push notification, and device hardware access. Follow along and check the top 22 Progressive Web Applications interview questions and answers every full stack developer would be asked in 2020-2021.

Originally published on FullStack.Cafe - Real Tech Interview Questions And Answers For Devs

Q1: What is a progressive web app?

Topic: PWA
Difficulty: ⭐

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.

🔗 Source: stackoverflow.com

Q2: What are some benefits of PWA?

Topic: PWA
Difficulty: ⭐⭐

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.

🔗 Source: stackoverflow.com

Q3: What makes an app a PWA?

Topic: PWA
Difficulty: ⭐⭐

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.

🔗 Source: developer.mozilla.org

Q4: Why do we need a web manifest for PWA?

Topic: PWA
Difficulty: ⭐⭐

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.

🔗 Source: developer.mozilla.org

Q5: What are some disadvantages of PWA?

Topic: PWA
Difficulty: ⭐⭐⭐

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.

🔗 Source: stackoverflow.com

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

Topic: PWA
Difficulty: ⭐⭐⭐

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.

🔗 Source: stackoverflow.com

Q7: What is a service worker?

Topic: PWA
Difficulty: ⭐⭐⭐

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.

🔗 Source: developers.google.com

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

Topic: PWA
Difficulty: ⭐⭐⭐

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.

🔗 Source: stackoverflow.com

Q9: What is a fetch event?

Topic: PWA
Difficulty: ⭐⭐⭐

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);
      }
    )
  );
});

🔗 Source: developers.google.com

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

Topic: PWA
Difficulty: ⭐⭐⭐

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)

🔗 Source: developer.mozilla.org

Q11: What is IndexedDB and how is it used by PWA?

Topic: PWA
Difficulty: ⭐⭐⭐

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

🔗 Source: developers.google.com

Q12: What is CacheStorage?

Topic: PWA
Difficulty: ⭐⭐⭐

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.

🔗 Source: blog.bitsrc.io

Q13: Explain the service worker lifecycle

Topic: PWA
Difficulty: ⭐⭐⭐⭐

A service worker has a lifecycle that is completely separate from your web page.

To install a service worker for your site, you need to register it, which you do in your page's JavaScript. Registering a service worker will cause the browser to start the service worker install step in the background.

Typically during the install step, you'll want to cache some static assets. If all the files are cached successfully, then the service worker becomes installed. If any of the files fail to download and cache, then the install step will fail and the service worker won't activate (i.e. won't be installed).

When installed, the activation step will follow and this is a great opportunity for handling any management of old caches.

After the activation step, the service worker will control all pages that fall under its scope, though the page that registered the service worker for the first time won't be controlled until it's loaded again. Once a service worker is in control, it will be in one of two states: either the service worker will be terminated to save memory, or it will handle fetch and message events that occur when a network request or message is made from your page.

🔗 Source: developers.google.com

Q14: How to update a service worker?

Topic: PWA
Difficulty: ⭐⭐⭐⭐

There will be a point in time where your service worker will need updating. When that time comes, you'll need to follow these steps:

• Update your service worker JavaScript file. When the user navigates to your site, the browser tries to redownload the script file that defined the service worker in the background. If there is even a byte's difference in the service worker file compared to what it currently has, it considers it new.
• Your new service worker will be started and the install event will be fired.
• At this point the old service worker is still controlling the current pages so the new service worker will enter a waiting state.
• When the currently open pages of your site are closed, the old service worker will be killed and the new service worker will take control.
• Once your new service worker takes control, its activate event will be fired.

🔗 Source: developers.google.com

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

Topic: PWA
Difficulty: ⭐⭐⭐⭐

Those three caching strategies are framework agnostic:

• Cache only - The SW expects to find the requested assets already here.
• Network only - This strategy is exactly the opposite of the previous one: we always access the network, without even querying the cache.
• Stale while revalidate - Similarly to the cache only strategy, the goal is to ensure a fast responses by delivering the data from the cache. However, while the client request is served, a separate request is triggered to the server to fetch a newer version, if available, and store it into the cache.

Angular provides only two kind of caching strategy:

• Performance (default) - Here the goal is to optimise the response time. If a resource is available in the cache, this version is delivered. Otherwise a network request is executed to fetch and then cache it.
• Freshness - Used when it is required to deliver the latest data from the network. We can specify a timeout after which the request falls back to the cache and tries to deliver the required data from there.

🔗 Source: dev.to

Q16: What is App Shell?

Topic: PWA
Difficulty: ⭐⭐⭐⭐

An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users' screens, similar to what you see in native applications.

The app "shell" is the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits. This means the application shell is not loaded from the network every time the user visits. Only the necessary content is needed from the network.

An application shell architecture makes the most sense for apps and sites with relatively unchanging navigation but changing content.

🔗 Source: developers.google.com

Q17: What are some requirements to app shell?

Topic: PWA
Difficulty: ⭐⭐⭐⭐

The app shell should ideally:

• Load fast
• Use as little data as possible
• Use static assets from a local cache
• Separate content from navigation
• Retrieve and display page-specific content (HTML, JSON, etc.)
• Optionally, cache dynamic content

🔗 Source: developers.google.com

Q18: What about PWA for iOS?

Topic: PWA
Difficulty: ⭐⭐⭐⭐⭐

Service worker is available in Safari 11.1, which shipped March 29, 2018 with iOS 11.3 and macOS 10.13.4.

Note:

• Service Worker + Cache API are both supported (Cache API is actually a pre-requisite for Service Worker support)
• There are some noticeable problems with Apple's implementation of Service Worker
• No "Add to Home Screen" prompt
• No Push API
• No Background Sync

🔗 Source: stackoverflow.com

Q19: Is it possible to have multiple service workers?

Topic: PWA
Difficulty: ⭐⭐⭐⭐⭐

There's two things to keep in mind here:

• It's possible to register an arbitrary number of service workers for a given origin, as long as each service worker has its own unique scope
• The Cache Storage API (and other storage mechanisms, like IndexedDB) are shared throughout the entire origin, and by default there's no "sharding" or namespace segregation.

🔗 Source: stackoverflow.com

Q20: What can service workers do that web workers cannot?

Topic: PWA
Difficulty: ⭐⭐⭐⭐⭐

• Web Workers - provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. In addition, they can perform I/O using XMLHttpRequest (although the responseXML and channel attributes are always null). Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa.)

• Service Worker - is essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.
  

               | Web Workers  | Service Workers  |
|--------------|--------------|------------------|
| Instances    | Many per tab | One for all tabs |
| Lifespan     | Same as tab  | Independent      |
| Intended use | Parallelism  | Offline support  |

Web Workers are handy to run expensive scripts without causing the user interface to freeze, while Service Workers are useful to modify the response from network requests (for example, when building an offline app).

🔗 Source: stackoverflow.com

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

Topic: PWA
Difficulty: ⭐⭐⭐⭐⭐

The benefits of an app shell architecture with a service worker include:

• Reliable performance that is consistently fast. Repeat visits are extremely quick. Static assets and the UI (e.g. HTML, JavaScript, images and CSS) are cached on the first visit so that they load instantly on repeat visits. Content may be cached on the first visit, but is typically loaded when it is needed.

• Native-like interactions. By adopting the app shell model, you can create experiences with instant, native-application-like navigation and interactions, complete with offline support.

• Economical use of data. Design for minimal data usage and be judicious in what you cache because listing files that are non-essential (large images that are not shown on every page, for instance) result in browsers downloading more data than is strictly necessary. Even though data is relatively cheap in western countries, this is not the case in emerging markets where connectivity is expensive and data is costly.

🔗 Source: developers.google.com

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

Topic: PWA
Difficulty: ⭐⭐⭐⭐⭐

The answer is No. The user can delete the PWA (if installed on Android) and clear their browser's cache of everything from your PWA.

The Cache API is temporary by design, and the IndexedDB data can be wiped when the user clears their browser cache.

So to persist app's data across PWA installations you should use cloud storage via some API.

🔗 Source: stackoverflow.com

Thanks 🙌 for reading and good luck on your interview!
Please share this article with your fellow devs if you like it!
Check more FullStack Interview Questions & Answers on 👉 www.fullstack.cafe