PWA Workshops

Requirements

Before you will use this repository make sure that you have installed:

• Git

  • If you are a Windows or macOS user visit this link Downloading Git then download appropriate installer and install it.

  • If you are a Linux (Ubuntu-based distribution) user you can paste bellow scrip into your terminal or visit this page Installing Git

    sudo apt install git-all

• Node.js and npm

  • If you are a Windows or macOS user visit this link Node.js download then download LTS version for Windows and install it.

  • If you are a Linux (Ubunto-based distribution) user you can paste bellow scrip into your terminal or visit this page Node installation instruction or use nvm

    curl -fsSL https://deb.nodesource.com/setup_15.x | sudo -E bash -
    sudo apt-get install -y nodejs

  Or any other static HTTP server

• If you have installed Node.js and npm, then open your terminal / git-bash and run this command

  sudo npm install -g http-server

If you followed every step, you should be ready to start using this repository. To make sure that you have installed everything correctly open your terminal git-bash and run the following commands:

• To check git: git --version → you should see output with git version
• To check node.js: node --version → you should see output with node.js version
• To check npm: npm --version → you should see output with npm version
• To check http-server: http-server → you should see output which starts with Starting up http-server, serving

Downloading the repository

• Open your terminal / git-bash in location where you create a directory which will contain this repository

• Run the following command in your terminal / git-bash

  git clone https://github.com/GDSC-Lodz-University-of-Technology/pwa-workshops.git
  cd ./pwa-workshops

Using this repository

• Open pwa-workshops directory in your terminal / git-bash
• Run http-server inside your terminal / git-bash in root directory
• Open your web-browser and go under http://localhost:8080/
• You can also use prepared branches if you need any hints
• Starting point of these workshops is branch 00-setup

Workshops aim

At the end of this workshop, you should have a basic understanding of PWA. You should also have ready template for setting up your next PWA app

Workshops app

• App should be available online and offline
• App should be installable
• All list items should be cached

Resources

Articles:

• Google: Service Workers an Introduction
• Google: Learn PWA tutorial
• Jake Archibald: The offline cookbook
• What makes a good Progressive Web App?

Videos:

• Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016
• Making things fast in world of build tools by Surma & Jake Archibald | JSConf Budapest 2019

Dev tools:

• Squoosh - image compression
• bubblewrap - generating store packages in command line
• PWA Builder - icons generator
• PWA Builder - generating store packages in browser
• More PWA tools