Progressive Web Apps and JavaScript

How to have a normal website and also let it appear as a traditional application or native mobile application? Want to write apps that are powered by Web technologies and delivered with Web infrastructure? Welcome to Progressive Web Apps. PWAs are secure and installable, can run offline and can display system notifications even when the app is not running. This course will teach all the techniques to create, test and deploy your PWA.

Writing modern web application also involves knowledge of the latest JavaScript, so this course also teaches JavaScript from the basics up until the latest APIs and proposals for future additions.

Debugging and writing (unit) tests for JavaScript is also covered. Options to measure and improve the performance of scripts, as well as asynchronous loading will be discussed.

Course will be updated regularly to keep up with the latests developments.

Audience:

This training is aimed at any developer with 6 month experience that want to write web and mobile web applications with HTML, JavaScript and CSS.

Prerequisites:

Familiarity with any contemporary programming language.

Course content:

ECMAScript 2018 and beyond (JavaScript)

We’ll cover basic syntax as well as useful new additions to the language. Most notable:

• Variable declarations with let, var and const
• Class syntax, incl. methods, inheritance, etc.
• Modules
• Template strings
• Arrow functions
• Default parameters in functions
• for..of loops and iterators
• Promises and async/await asynchronous function handling
• Destructuring
• Rest and Spread operators for quick array and object manipulations
• Maps (key-value pairs) and Sets (unique values)

Progressive Web Apps

Progressive Web Apps (PWA) is a set of technologies you can use to enhance a website with application behaviour:

• Installable: The website can be added to the home screen of the device.
• Web App Manifest: Defining the icon, home screen title, splash screen, background color and home page.
• Fetch: Simple and powerful API to fetch resources (successor of XMLHttpRequest).
• Offline and online behaviour: No matter if there is a network connection, the app will work using Service Workers to control requests and storing responses to requests offline using the Cache API, Web Storage or IndexedDB.
• Notifications. Send updates from the server to the app with the Push API and use the Notification API to generate system notifications even if the app is not running.
• Safe: Only https (or localhost for development).
• Progressive: Use the above technologies if they are available, but the page (app) will work if the device’s browser is less capable.

PWA can even be published to the Microsoft Store and become Windows Apps.

Storage

Data storage within the browser are covered with 3 techniques:

• Storage API, Local & Session storage when you don’t want to store too much data.
• IndexedDB API (version 2), is an object database with more capacity.
• Cache API for use with Progressive Web Apps.

Performance

Subjects:

• Compression and minification.
• To inline or not to inline?
• Async loading of scripts.
• How to measure performance?

Debugging & Testing

Explaining how to use the developer tools in the browser:

• Setting breakpoints in code or when events happen
• Debugging Service Workers
• Debugging Fetch
• Writing unit tests

Other relevant courses