Simple steps and powerful tools to create a Progressive Web App

Maxim Salnikov

Half-day workshop - in English

The term Progressive Web App refers to a group of technologies, such as service workers, and push notifications, that can bring native-like performance and user experience to web apps. Progressive Web Apps are interesting because in some ways they represent a coming of age for the Web. Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. Let's create our one!

During this 100% hands-on session we'll have a look on the modern JavaScript code and recent tools and guides to help us build Progressive Web Apps. We'll create and register Service Worker, build App Shell, generate Application Manifest, send Push Notifications. The result of our workshop: fast, installable, offline-capable, mobile-network-friendly, re-engageable app.

Agenda

  • Introduction to PWA and Workshop Setup
  • Service Workers for Instant and Offline Experiences
  • App Shell Architecture
  • Installability and App Manifest
  • Sending Push Notifications
  • Tooling for Progressive Web Apps: Lighthouse and More
  • Questions and answers

Setting up the environment

Environment
- Git
- Node
- NPM
- Yarn - strongly recommended

Browsers
- Chrome 53 or above
- Firefox 51 or above
- Any simple web server (could be a browser extension). Recommended:
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/

Initial setup
- Backend (API) part. Please go through installation steps described in README.md: https://github.com/webmaxru/pwa-workshop-api
- Frontend part. In order to have the packages pre-installed, please go through installation steps described in README.md: https://github.com/webmaxru/pwa-workshop

Primarily for: Developers, Architects

Participant requirements: ENVIRONMENT: Git, Node, NPM, Yarn - strongly recommended. BROWSERS: Chrome 53 or above, Firefox 51 or above, Any simple web server (could be a browser extension). Recommended: https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/ REPOS: Backend (API) part. Please go through installation steps described in README.md: https://github.com/webmaxru/pwa-workshop-api Frontend part. In order to have the packages pre-installed, please go through installation steps described in README.md: https://github.com/webmaxru/pwa-workshop