Progressive Web App Development: A Complete Guide: 2-in-1
- 9.5 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Complex dependency management in modern web applications with NPM
- Building your code with Webpack
- Styling, linting and formatting your application
- Build web apps that look and feel like native mobile apps
- Audit and improve a PWA with different tools
- Increase user engagement by using push notifications
In this video, we’ll learn how to load in modules from npm.
- Learn how to install node and npm
- Set up a project with npm
- Install a dependency with npm
In this video, we will look at what Webpack is and why you should use it for modern web development.
- Look at how a Webpack project is set up
- Talk about plugins and loaders
- Discuss how to run Webpack for local development
We will look at modern ways to make HTTP requests without using a library and with using a library.
- Look at how to use fetch to do HTTP requests without using a library
- Look at Superagent to do requests with best-in-class documentation
- Weight up the pros and cons of each approach
This video aims to show what is manifest. json and will review all properties.
- Understand all manifest.json properties
- Understand icons sizes and main properties as requirements for manifest.json
- Explore tools which will help us to generate manifest.json and icons
This video aims to show how to debug a manifest.json file and what its effects on an emulator.
- Debug an application mode in chrome dev tools
- Run android emulator and test on chrome on android
- Refresh and debug both dev tools and real device
The aim of this video is to add service worker to a project with manifest. json and show how it will appear and how we can defer it.
- Register service worker with simple event listeners
- Define deferred variable to postpone showing install banner prompt
- Test application on emulator and check
In this video, we will learn how to connect a real device and an emulator to chrome dev tools and how to inspect on them.
- Learn how to install real device
- Run Emulator and find it in chrome remote devices
- Test install app banner prompt on emulator and real device
In this video, we will clean up our caches which are not in use any more in order to keep our storage clean and as useful as possible.
- Understand why we need to cache our cache storage
- Learn how to delete item from a cache
- Learn to delete the old cache version when they are not in use any more.
This video aims to show 3rd party libraries which can help to create easier service worker for caching and implementing different strategy.
- Learn about different libraries for generating service workers
- Understand usage of Workbox
- Learn how to start using third parties such as workbox.
The goal of the video is to show one strategy to store data in client side when user is offline and sync them back when user has internet again.
- Understand how to store data in client side
- Get access to indexedDB and store data
- Learn how to fix data from frontend to firebase as our backend
The goal of this video is to show how to setup service worker module in angular and convert an angular app to an offline angular app.
- Understand Angular CLI and service worker module
- Learn how to configure angular cli to leverage service worker
- Register ngsw-worker.js and build for production
This video will show how you can easily leverage using create-react-app to build a progressive web app out of the web and how to do more by ejecting Webpack configuration.
- Learn how to generate a new react app
- Understand manifest.json and sw.js in react project.
- Learn to eject Webpack configuration to set up more in react project
In this video we are going to talk about Ember.js and use Ember cli to make a fully offline single page application.
- Learn how to install Ember-cli and create a new project
- Learn what is the best plugin to create a PWA app in ember ecosystem
- Learn to configure ember-build.js to have a proper PWA while building ember app for production
Web development technology is moving at a very fast pace with new tools and techniques being released daily.
With this comprehensive 2-in-1 training course, you will learn everything you need about the essential tools needed to become a better web developer. Also, build discoverable and engaging progressive web applications to make it offline-ready and tremendously fast service workers to stop network requests and web app manifests.
Contents and Overview
This training program includes 2 complete courses, carefully chosen to give you the most comprehensive training possible.
The first course, Web Developer Toolbox - Essentials for Modern Web Development, starts off by understanding Complex Dependency Management with NPM and YARN and how it will help you simplify application development and deployment. Moving along, you will cover essential tools and frameworks (such as moment.js, a modern date time calculation library) and fetch a high-speed HTTP request library, along with other relevant tools for your developer toolkit. Finally we will set up Webpack.
The second course, Progressive Web Application Development, aims at building engaging PWA’s using Cache API. This will make the web apps offline-ready. Further, we will explore fast service workers, various native-like features and get deep insights on Fetch API, Promise, and App manifest. This way, you will get well acquainted with PWA and get hands-on experience with practical projects..
By the end of this training program, you'll not only be familiar with how progressive web applications work, but will also have built and deployed a production-ready app with top notch-features.
About the Authors
- Majid Hajian is a software engineer with a passion for frontend technologies who has been worked over 9 years in this field. He is very involved in open source projects, he also helps to organize meetups and conferences around the world such as Vue.js, Angular and is a mobile meetup co-organizer in Oslo. Majid is also a public technical speaker, a trainer, and a blogger. If you want to get in touch with him feel free to contact him on Twitter (@mhadaily).
- Developers and architects looking to up skill with the latest and greatest web-based technologies, and the tools required to implement them.