Purnama
Academy 0838-0838-0001 PWA training Syllabuss
Persyaratan
Basic HTML, CSS and JavaScript knowledge is required
NO experience with JavaScript frameworks is required
Deskripsi
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!
Max
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
OUTLINE
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
questions
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
question
[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
question
[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
question
[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
OTHER TRAININGS:Basic HTML, CSS and JavaScript knowledge is required
NO experience with JavaScript frameworks is required
Deskripsi
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!
Max
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
OUTLINE
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
questions
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
question
[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
question
[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
question
[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/ASP.net, 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.
METHOD : Online TRAINING, Public TRAINING, INHOUSE TRAINING
COVID-19 COMPLIANCE
0 comments:
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)
Regards,
Management,
www.purnamaacademy.com