PWAs with React, Angular, and Vue: Framework-Specific Quiz Quiz

Delve into progressive web app (PWA) capabilities and techniques tailored to React, Angular, and Vue frameworks. Assess your grasp on key concepts, configuration steps, and best practices for building robust PWAs with these popular JavaScript frameworks.

1. React and PWAs

   When configuring a React-based app as a PWA, what is the main purpose of the service worker file, and where is it typically registered?

   1. To enable offline functionality by intercepting network requests, usually registered in the app’s entry point file
   2. To manage the app’s routing, usually registered in the index.html file
   3. To optimize CSS delivery, usually registered in the manifest.json file
   4. To handle component state updates, usually registered in the component tree

   Explanation: A service worker in a React PWA acts as a network proxy enabling offline capabilities by intercepting network requests, and it’s commonly registered in the app’s main entry point file. The other choices are incorrect: service workers do not manage routing (that’s handled by framework routers), are not concerned with component state, and do not optimize CSS directly. Registration in manifest.json or within the component tree is not standard practice.

2. Angular PWA Integration

   If you want to transform an Angular app into a PWA, which configuration step is necessary to ensure support for features like offline caching and background sync?

   1. Switching the default stylesheets to SCSS format
   2. Importing platform-browser-dynamic before platform-browser
   3. Enabling the template-driven forms option in the project settings
   4. Installing the PWA support module, which adds a manifest and service worker configuration

   Explanation: Adding PWA features to an Angular project requires installing a specific module designed to generate a manifest and configure a service worker, which enables caching and background operations. Template-driven forms and stylesheet formats are unrelated to PWA capabilities. The import order of browser modules does not activate PWA functionality.

3. Vue Manifest Handling

   In a Vue-based PWA, what is the primary purpose of the web app manifest file with reference to installation prompts and home screen behavior?

   1. It manages build optimizations like code splitting and minification
   2. It defines app metadata for installability and home screen appearance, such as the icon and theme color
   3. It automatically updates dependencies during deployment
   4. It enables data binding between components using props and events

   Explanation: The manifest file in a Vue PWA contains essential metadata such as name, icons, and theme color, enabling install prompts and determining how the app appears on the home screen. Data binding and build optimization are handled by different configuration files and framework features. Automatic updates of dependencies do not relate to the web app manifest.

4. Cross-Framework PWA Limitation

   Which limitation is common to PWAs built with React, Angular, or Vue, regardless of the chosen framework?

   1. They always require internet connectivity to run
   2. They do not support push notifications
   3. They are not granted full access to device hardware features such as Bluetooth and NFC
   4. They cannot be deployed to static web servers

   Explanation: PWAs, no matter the framework, have restricted access to certain device features like Bluetooth and NFC due to browser security limitations. All three frameworks support deployment to static servers and offer offline capabilities. Push notification support is available in modern PWAs, provided the browser and device permit it.

5. Framework-Specific Build Tools for PWAs

   Which build tool or configuration is usually essential for generating the service worker and manifest when building a PWA with React, Angular, or Vue?

   1. The core JavaScript runtime without additional tools
   2. A static site generator unrelated to the framework’s ecosystem
   3. A CSS preprocessor like SASS or LESS
   4. A plugin or command offered by the framework's build system, such as specific CLI options or plugins

   Explanation: Most frameworks provide dedicated build commands, CLI options, or plugins that automate the setup of service workers and manifest files for PWAs. Relying solely on the core JavaScript runtime does not generate these assets automatically. CSS preprocessors and unrelated static site generators are not responsible for PWA setup within framework projects.