---
# System prepended metadata

title: <center>Tutorial for PWA</center>

---

# <center>Tutorial for PWA</center>

This is my way of learning PWA. Maybe a little different from the others because I chose a fairly long way. Because I need to know the basics first.

---
## Prerequisites

I still need to learn prerequisite. Because I am not familiar with the language or tool used before. Therefore I will study this first.

+ [HTML](https://www.udacity.com/course/intro-to-html-and-css--ud001)
+ [CSS](https://www.udacity.com/course/intro-to-html-and-css--ud001)
+ [Javascript](https://www.udacity.com/course/intro-to-javascript--ud803)
+ [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)

---
## Basic

+ [Intro to PWA](https://www.udacity.com/course/intro-to-progressive-web-apps--ud811)
A tutorial to make a simple PWA

+ [Developing PWA](https://codelabs.developers.google.com/codelabs/pwa-welcome/index.html?index=..%2F..index#1)
A tutorial to make a powerfull PWA. This includes : 
    1.0 Welcome (this codelab!)
    2.0 Offline quickstart
    3.0 Scripting the service worker
    3.1 Promises
    3.2 Fetch API
    4.0 Workbox
    4.1 Gulp setup
    5.0 Caching files with the service worker
    6.0 Cloud Firestore
    7.0 Integrating Google Analytics
    8.0 Integrating web push
    9.0 Responsive design
    9.1 Responsive images
    10.0 IndexedDB API
+ [Building PWA in Polymer from scratch](https://codelabs.developers.google.com/codelabs/pwa-from-scratch/index.html?index=..%2F..index#0)
+ [Build PWA with Firebasem Polymerfire, and Polymer Componenets](https://codelabs.developers.google.com/codelabs/polymer-firebase-pwa/index.html?index=..%2F..index#0)

---
## Framework

[Ionic](https://ionicframework.com/docs/publishing/progressive-web-app)

---
## Additional

I added additional tutorials here. This is not the core of PWA. But this tutorial is related to PWA and can be used to enlarge the treasures about PWA.

+ [Building High Conversion Web Forms](https://www.udacity.com/course/building-high-conversion-web-forms--ud890)
+ [Offline Web Applications](https://www.udacity.com/course/offline-web-applications--ud899)
+ [Web Tooling & Automation](https://www.udacity.com/course/web-tooling-automation--ud892)
+ [Browser Rendering Optimization](https://www.udacity.com/course/browser-rendering-optimization--ud860)