Progressive Web Apps - Beginner to Expert - 2021

Explore why 2021 prompts a choice between progressive web apps and native mobile apps, and how app stores, operating system version compatibility, offline behavior, and memory constraints shape development decisions.

Describe progressive web apps as a set of APIs and techniques that make web apps feel native. They support offline use, service workers, push notifications, desktop installation, and progressive enhancement.

Explore how progressive web apps bring native app capabilities to the browser, including push notifications, offline support, home screen presence, camera access, and geolocation, all via your web app.

Explore how progressive web apps counter native app competition amid top apps dominated by Google and Facebook, boosting engagement through cross-platform accessibility.

Explain how native apps dominate usage while new app installs are virtually zero, and how progressive web apps improve discovery, home screen installation, and search engine rankings.

Discover the core technologies behind progressive web apps, including service workers, offline support, background sync, push notifications, app manifest, geolocation, and camera APIs for mobile-ready, responsive experiences.

Define and apply progressive enhancement to progressive web apps, adding features step by step from legacy or new projects, and balance 10–100 percent feature adoption with browser compatibility.

Learn to build fast, installable progressive web apps with a single code base, using service workers for offline experiences and responsive design; use Google's checklist and Lighthouse to ensure compliance.

Set up your development environment and explore the layered architecture of progressive web apps with JavaScript APIs. Use npm, package.json, and a local server with a Chrome V8 runtime.

Explore Node.js as a JavaScript runtime on the server, enabling asynchronous, event-driven, non blocking IO for fast, scalable web applications like chat applications, news applications, and push notifications.

Check your node version by running node --version in the command prompt; if not installed, you’ll see command not found, otherwise update to the latest version for the next lesson.

Download node js and npm, using the stable version on Windows or Mac; open command prompt or terminal to install, and proceed with the remaining lessons.

Install Nagios on your machine using the installer, accept terms, and authenticate, then verify the installed version in the command prompt before proceeding to the next lesson.

Download and install Visual Studio Code on Mac, Windows, or Linux, selecting the correct 32- or 64-bit installer, and explore its support for C++, C#, Java, Python, and Unity.

Learn to set up your development environment and navigate the code editor, open folders, create a new project folder, and add an index.html file for your progressive web app.

Create a basic html file with a title and body, save it, and run it on a local web server to explore http vs https for progressive web apps.

Learn to run your first HTML file as a foundation for progressive web apps, discover why a local web server matters, and test on Chrome while planning HTTPS in production.

Explore how npm manages node modules and how package.json documents dependencies and versions to enable reproducible builds for hosting progressive web apps on the EDP server.

Initialize and configure the package.json file for your project using npm init, then define name, version, description, entry point index.js, and metadata like repository, keywords, author, and license.

Modify the package.json file to configure scripts and install dev dependencies and node modules for the HDB server, enabling a local environment to run progressive web apps.

Modify the package.json for a progressive web apps project by updating dependencies, editing the scripts section, removing the test entry, and adding a new HDB script with specific switches.

Explore the HDB server, a popular node module installable via npm; learn its zero-configuration setup, production-capable features, and options for cache time and port customization.

Explore how the start keyword expands into a full command with a quoted key and value, and how the http server, cache, and port 8080 enable offline service workers.

Install and start the HDB server using npm and the start script, then access localhost:3000 and stop the server with Ctrl+C.

Run the HDB server, copy the terminal URL, and view your HTML page in the browser on the assigned port, while introducing microservices concepts and docker containers.

Explore why HTTPS is essential for progressive web apps, guard against man-in-the-middle attacks, and leverage service workers, push notifications, offline access, and the web app manifest.

Open your project folder in Windows or Mac, inspect the folder structure, review node_modules for scaffolders like pizzica colors and a proxy server, and ignore the lock file.

Apply the progressive web apps completed checklist by installing and configuring the environment, running a hello world html on a server, and reviewing service workers and the app manifest.

Download and configure course resources for the news progressive web app, set up the skeleton with sample code, and ensure the correct folder and file structure for a smooth build.

Close any previously opened projects, then open the News PWA project resource by using the file menu to open the downloaded project folder.

Explore the pwa project structure by reviewing key files such as index.html, package.json, and the service worker, while noting the lock file, images, and app icons.

Download the news progressive web app from the resources folder, review its file structure, start the HDB server with npm start, and run it in Chrome via localhost.

Audit your progressive web apps with Google Lighthouse to measure performance, auditability, and compliance to PWA standards, using the Chrome extension for on-the-fly reports.

Use the browser's debugging tools to debug a progressive web app by right-clicking and selecting inspect, then explore elements, console, sources, network, performance, application, security, and audits in debug environment.

Use chrome's inspect tool to simulate a progressive web app across multiple devices, testing responsive layouts, zoom levels, online throttling, offline mode, and portrait or landscape orientations.

Experiment with a PWA offline test using a debug environment on a low-end mobile, observe service workers enabling the app shell to load offline, and verify resilience.

Explore how the elements panel powers debugging for progressive web apps, using hover and select-inspect workflows to view and edit HTML, CSS, and layout in a non-saving debug environment.

Master eye-movement debugging for progressive web apps by following visual cues across elements, styles, and event listeners, then inspecting and editing the highlighted code segments.

Troubleshoot a Node.js http server for a progressive web app by restarting with npm start, validating localhost and an alternate IP, and clearing browser cache.

Practice debugging in the browser by inspecting elements and using the debug environment to replace image sources and change dates. Learn to track source lines and verify changes before refreshing.

Explore the browser console tab to view errors and warnings, log messages, and perform basic arithmetic, while learning how to debug and monitor your progressive web app during development.

Explore the browser sources panel to inspect and debug a progressive web app, including index.html, service workers, and manifest, while noting browser compatibility across Chrome, Firefox, Opera, and Safari.

Explore line-by-line debugging of JavaScript in a progressive web app by using breakpoints, stepping through code, and inspecting sources, service workers, and assets.

Discover how the Can I Use website helps identify browser support for service workers and PWA APIs, comparing Firefox, Chrome, Safari, and Opera.

Use the network tab to inspect assets, status, types, and load times for your progressive web app. See how the service worker caches files to support offline-first behavior.

Explore how the manifest file defines icons, names, and start url to enable install on devices. Examine the service workers and cache api to understand background caching and offline access.

Audit a progressive web app with Lighthouse, inspect offline capability powered by service workers, and evaluate manifest and installation features using the Financial Times PWA as a practical example.

Build and understand the app manifest to turn a website into an installable progressive web app. See how chrome://apps exposes installed browser apps and enable desktop and mobile installation.

Learn how the progressive web app install button uses the manifest to install PWAs on mobile and desktop, with examples like Starbucks, Twitter, and Wego, and offline behavior.

Remove a progressive web app from Chrome by visiting chrome://apps, right-clicking to remove, and note that these apps open in Chrome as home icons on desktop and mobile.

Study how to create a manifest.json in the app root, specify name, short_name, icons, start_url, scope, display, background_color, theme_color, orientation, and ensure service worker registration and lighthouse-ready audits.

Removing the manifest.json file breaks installability, triggers Lighthouse errors for start url and service worker, and erodes the app shell, splash screen, and install ability icon.

Create and configure the manifest file for a progressive web app by defining name, short name, scope, display, background color, theme color, description, direction, language, and index.html as entry point.

Run a Lighthouse audit to verify manifest and service worker setup, inspect icons and splash screens, and fix the manifest's missing PMG icon of 192 pixels for fast, reliable load.

Learn to fix Lighthouse audit errors by generating app icons, updating the manifest, and re-running the audit to ensure green results.

Develop debugging skills by identifying root causes from error logs and browser tools, fix simple typos like missing braces or extra commas, and use Lighthouse to uphold PWA quality standards.

Learn to link the manifest.json from the index.html and apply a consistent project structure with assets and multiple HTML files to ensure proper manifest reference.

Verify installability of our news progressive web app by debugging the manifest, correcting orientation errors, clearing cache, refreshing the service worker, and reinstalling from Chrome apps.

Open your progressive web app in Android Studio's simulator to preview how it looks on real phones. Download and install Android Studio on Windows or Mac to run pwa locally.

Launch the android emulator, load your progressive web app from localhost, then install it to the home screen using the manifest icons, short name, long name, and theme color.

Learn to set up the android simulator to run progressive web apps by creating an android virtual device in android studio and launching the emulator.

Explore Chrome experimental features and the evolving role of progressive web apps, including a 50 percent replacement forecast, and how PWAs act like native apps on the home screen.

Summarize how the manifest file powers installability and splash screens across mobile and desktop, with icons and theme color, and compare memory use of PWAs versus native apps.

Learn the service worker lifecycle, registration, and offline capabilities using cache storage and a caching strategy, including how it proxies between the web server, the Internet, and your app.

Explore how the web operated without service workers and why these client-side, background workers—without a user interface—enable progressive web apps, including single or multiple workers.

Learn how a service worker sits between server and client, acting as a man in the middle to intercept requests and responses in progressive web apps.

Explore how the service worker, a man-in-the-middle extension with its own independent life cycle, can run in the background and receive push notifications even when the browser is closed.

Intercept client requests with the service worker and serve from the offline cache when available. Fetch from the server when not cached and store the response for offline use.

Understand how service workers run in the background, intercept requests and responses, enable offline capability, and deliver faster, cheaper progressive web apps.

Learn the differences between synchronous and asynchronous JavaScript, including promises and the Fetch API, and lay the foundation for service workers and caching strategies like cache-first, network-first, and offline-first.

Open a new project in Visual Studio, create a brand new file via File > New File, name it index.html, and save it to your documents folder.

Develop a synchronous JavaScript module by building an index.html, linking an index.js, and running it as a simple html page to see synchronous behavior; then explore asynchronous concepts and promises.

Learn how to reference a JavaScript file in HTML and understand synchronous versus asynchronous JavaScript. Explore promises, the Fetch API, the Cache API, and using console.log for debugging.

Run a simple html file locally to explore synchronous and asynchronous javascript, inspect the console for messages, fix errors in index.js, and understand how promises and the api concepts appear.

Learn that JavaScript executes lines synchronously, creating a blocking UI where each step waits for the previous one. Restaurant analogy shows the next action only after the longest step finishes.

Replace console.log with alert to show how the prepared food line blocks the next line, illustrating blocking UI in synchronous JavaScript on a single thread.

See how a blocking alert freezes the user interface during long and short processes, with console logs revealing progress as you learn asynchronous programming concepts.

Explore how asynchronous programming prevents a blocking UI by running tasks in parallel across threads, and see how promises support non-blocking database fetches and image loading.

Set up a new project for functions by organizing resources from the synchronous JavaScript chapter into an arrow functions folder and starting a Visual Studio project.

Open the existing project in visual Studio by navigating to the documents folder and loading the arrow function folder for modification in this lesson.

Learn how to convert index content into a JavaScript function, declare and name it, and call it to execute console output in a simple progressive web app workflow.

Explore how to convert normal functions to arrow functions in JavaScript, remove braces, enable implicit returns, and use single-argument and no-argument forms.