Wednesday, September 9, 2020


Purnama Academy 0838-0838-0001 PWA training Syllabuss
Basic HTML, CSS and JavaScript knowledge is required
NO experience with JavaScript frameworks is required
Progressive Web Apps (PWAs) are the next big thing in web development as they bring mobile-app-like experiences to your users without requiring them to install an app from the app store/ play store.
You still create a web application (HTML, CSS, JavaScript) but this course will teach you how to add features such as camera access, service workers for offline support, push notifications and more. This combines the best of both worlds You deliver fast, engaging and reliable experiences whilst still having the reach and accessibility of a web page.
"Progressive Web App" simply is a term summarizing all the features allowing you to deliver mobile-like experiences. The topic is highly trending and it also is a topic which is here to stay! Not only is it strongly promoted by Google (actually a lot of talks at Google I/O , Google's developer conference, were devoted to PWAs), it's also quickly being adopted by big companies like Twitter or the Washington Post.
Having the skills to build and optimize these kind of web apps is already an important and highly demanded skill for modern web developers, a trend which is only going to accelerate! Therefore, learning how to build PWAs will give you a competitive edge!
In detail, this course will cover everything you need to build amazing PWAs - leading to a score of  (out of ) in Google's PWA auditing tool "Lighthouse"
Detailed explanation about what a PWA exactly is
How to use an app manifest to make your web app installable on device homescreens
Using service workers to offer offline support by caching assets
Advanced service worker usage and caching strategies
A refresher on Promises and the Fetch API as both concepts are heavily used in PWAs
How to improve user engagement by adding push notifications
A way to synchronize data in the background, even if connection is lost
How to access native device features like the camera or geolocation
Using Workbox to make service worker management easier
Explanations on how to turn your next SPA project into a PWA
And more
All these things are of course put into practice by building a course project. To ensure that you can apply the knowledge to ANY of your projects, the course project doesn't assume any JavaScript framework but focuses on the core features mentioned above!
So this course has a lot to offer, how do you tell if it's for you though?
It definitely is the right choice if ...
... you already are a web developer (no matter if experienced or still new to the business) and want to prepare for the future
... you enjoy working with HTML, CSS and JavaScript and want to leverage the full power the web and browser technologies have to offer
... you want to deliver the best possible experiences to your users, using technologies like web push notifications or offline support
What do you need to know to get the most out of the course?
You need to know at least the basics of HTML, CSS and JavaScript
No advanced knowledge of these technologies required though
You DON'T need to know any JavaScript framework like Angular or React - PWAs work with ANY JavaScript app, even if you don't use a framework at all (actually, that's what we'll build in the course!)
I'd be very happy to welcome you on board of this course and start this journey together with you!
Untuk siapa kursus ini
Students who want to build web apps that look and behave like native mobile apps
Students who want to build offline-ready web apps (yes, that works!)
Anyone who wants to build web apps that offer access to the device camera, geolocation, push notifications and provide offline support
Students who want to leverage latest browser features whilst still supporting older browsers


Understanding the App Manifest
Module Introduction

Using an App Manifest to Make your App Installable

Adding the Manifest

Understanding App Manifest Properties

Adding Properties to the App Manifest

PWAs and Browser Support

Using the Chrome Developer Tools

Simulating the Web App on an Emulator

Preparing the Emulated Device for ALL PWA Features

Installing the Web App - Prerequisites

Understanding manifest.json
Adding Properties for Safari

Adding Properties for the Internet Explorer

Wrap Up

Useful Resources & Links

The Service Workers
pelajaran • m
Module Introduction

Why Service Workers Are Amazing!

Understanding Service Worker Events

The Service Worker Lifecycle

Service Worker Browser Support

Registering a Service Worker

Reacting to Incoming Events (in SW)

Updating & Activating Service Workers

Non-Lifecycle Events

The App Install Banner & Chrome +

Getting that "App Install Banner"

Connecting Chrome Developer Tools to a Real/ Emulated Device

Testing the App on Real Device (and Installing the App!)

Deferring the App Install Banner

Wrap Up

Service Worker FAQ

Useful Resources & Links

Promise and Fetch
pelajaran • m
Module Introduction

Async Code in JavaScript

Promises - Basics

Rejecting Promises

Where we Use Promises in our Project

Fetch - Basics

Sending Post Requests via Fetch

Fetch and CORS

Comparing Fetch and Ajax

Adding Polyfills (for Legacy Browser Support)

Fetch & Service Workers

Time to Practice - Promises & Fetch API
[OPTIONAL] Assignment Solution

Wrap Up

Useful Resources & Links

Service Workers - Caching
pelajaran • j m
Module Introduction

Why Caching?

Understanding the Cache API

Browser Support

Adjusting the Course Project

Identifying (Pre-)Cacheable Items

Static Caching/ Precaching

Retrieving Items from the Cache

Adding & Retrieving Multiple Files (to/ from Cache)

Cache Multiple Files with addAll

Dynamic Caching - The Basics

Implementing Dynamic Caching

Handling Errors

Adding Cache Versioning

Different Cache Versions & Cleanup

Optimizing Cache Management

Time to Practice Service Workers & Caching
[OPTIONAL] Assignment Solution

Wrap Up

Useful Resources & Links

Service Workers - Advanced Caching
pelajaran • j m
Module Introduction

Module Preparation Adding a Button

Offering "Cache on Demand"

Providing an Offline Fallback Page

Strategy Cache with Network Fallback

Strategy Cache Only

Strategy Network Only

Strategy Network with Cache Fallback

Strategy Cache then Network

Cache then Network & Dynamic Caching

Cache then Network with Offline Support

Cache Strategies & "Routing"

Applying Cache Only

Time to Practice - Advanced Caching
[OPTIONAL] Assignment Solution

A Better Way Of Parsing Static Cache URLs

Making Route Matching More Precise

A Better Way Of Serving Fallback Files

Post Request and Cache API

Cleaning/ Trimming the Cache

Getting Rid of a Service Worker

Preparing the Project for the Next Steps

Wrap Up

Useful Resources & Links

IndexedDB and Dynamic Data
pelajaran • j m
Module Introduction

Understanding the Basics

Changed Firebase Console Layout

Setting Up Firebase

Connecting Frontend to Backend

Dynamic Caching vs. Caching Dynamic Content

Introducing IndexedDB

IndexedDB Browser Support

Adding the IDB File

Storing Fetched Posts in IndexedDB

Using IndexedDB in the Service Worker

Reading Data from IDB

Clearing IDB & Handling Server-Client Mismatch

Implementing the Clear Database Method

Deleting Single Items from the Database

IndexedDB and Caching Strategies

Wrap Up

Useful Resources & Links

Creating a Responsive User Interface (UI)
pelajaran • m
Module Introduction

Responsive Design in this Course

Understanding Responsive Design in our Project

CSS and Media Queries

Want to see more of your Images?

Using Images in a Responsive Way

Adding Animations

The Viewport & Scaling

Wrap Up

Useful Resources & Links

Background Sync
pelajaran • j m
Module Introduction

How does Background Sync Work?

Adding the Basic Setup to our Project

Registering a Synchronization Task

Storing our Post in IndexedDB

Adding a Fallback

Syncing Data in the Service Worker

Understanding Periodic Sync

MUST READ Firebase Cloud Functions & Billing

Adding Server Side Code

Fixing Errors

Wrap Up

Useful Resources & Links

Web Push Notifications
pelajaran • j m
Module Introduction

Why we need Web Push Notifications

How Push & Notifications Work

Displaying Notifications - Some Theory First

Browser Support

Requesting Permissions

Displaying Notifications

Notifications from Within the Service Worker

Understanding Notifications' Options

Advanced Options

Adding Actions to Notifications

Reacting to Notification Interaction - Clicks

Reacting to Notification Interaction - Closing

From Notifications to Push Messages

Creating a Push Subscription

Storing Subscriptions

Connecting Server & Client (PWA)

Sending Push Messages from the Server

Listening to Push Messages

Displaying Push Notifications on a Real Device

Opening a Page upon User Interaction

Improving our Code

Wrap Up

Useful Resources & Links

Native Device Features
pelajaran • j m
Module Introduction

Preparing the Project

Getting DOM Access

Creating our own Polyfills

Getting the Video Image

Hooking Up the Capture Button

Storing the Image on a Server

Accepting File Upload Example with Firebase

MUST READ Required Changes to Cloud Function Code

Testing the Camera & Upload

Implementing a Fallback

Getting the User Position

Fixing Bugs

Testing the App on a Real Device

Wrap Up

Useful Resources & Links

Service Worker Management with Workbox
pelajaran • j m
Module Introduction

Understanding the Basics

The Workbox Version Used In This Course

Installing Workbox & Using It

Configuring Workbox Precaching

Customizing the Service Worker

Implementing Routing with the Workbox Router

Expanding Dynamic Caching

Options and Setting Up Strategies

Custom Handlers (Example For IndexedDB)

Providing an Offline HTML Fallback

Handling Background Synchronisation and Push Notifications

Understanding the Workbox Documentation

Enhancing the Build Workflow

Running our App on a Real Server

Auditing our Webpage with Lighthouse

Wrap Up

Useful Resources & Links

SPAs and PWAs
pelajaran • m
Module Introduction

React with create-react-app

A General Note about SPAs and PWAs

Angular with the CLI

Vue with Vue CLI

Wrap Up

Useful Resources & Links

RDBMS Concept, Project Management (PMBOK - PMP), QGIS, ITIL V.3/2011, ISO 27001 , COBIT 5,  PMBOK , CISA, ITPM, PMO, PRINCE2, SQA, EDMS, TOGAF 9.1, ISTQB, Knowledge Management System (KMS), DMBOK, BIG DATA, CRISC, MySQL DBA, SQL Server(DBA BACKUP RECOVERY, PERFORMANCE TUNING, Oracle PL/SQL & DBA, POSTGRESQL/POSTGIS DBA , MS. Access VBA Programming , Excel VBA Macro , Visual Foxpro Programming, VBA,VB/, PHP ,Sencha ExtJS,HTML5, AjaxJQuery, UBUNTU Server, Android STUDIO, Jquery Mobile, Phonegap,Project Server,MS.Project, Project Libre, Primavera P6,S.E.O(Internet/ Digital Marketing), QGIS, MAGENTO, Odoo, Synamic AX, Google MAP API V.3,Google Sketchup 3D, AUTOCAD 2D/3D/MEP ,CATIA V6, PHP FRAMEWORK (ZEND, CAKEPHP, YII, CODEIGNITER, LARAVEL), HADOOP DATA WAREHOUSE, EDMS, UNITY 3D Game, Microsoft Office , Odoo ERP , Dynamic AX, Tableu, IBM Watson, Microsoft Azure, RapidMiner, PowerBI  etc.




Post a Comment

Terima kasih telah mengunjungi halaman website kami, Jika ada pertanyaan terkait informasi di Atas silahkan isi Comment Box di bawah ini, Tim kami akan merespon komentar/ pertanyaan Anda paling lambat 2 x 24 Jam

Untuk respon cepat silahkan hubungi 0838-0838-0001 (Call/Whatsapp)



Top Topics