Progressive Web Apps (PWA) Workshop

Progressive Web Apps (PWA) Workshop
  • 30% lectures / 70% workshop
  • Timeframe: 1-3 days
  • Target group: mid- to experienced front-end developers

The workshop covers a wide range of topics related with modern web technologies, including but not limited to offline mode, notifications and mobile operating systems integration. There is also a section about performance optimization included.

After this workshop your team will be able to take advantage of the Web Platform's capabilities for wider range of use cases, in particular to create applications with features previously available for native development only. It may allow to simplify development processes and reduce the cost. Moreover, thanks to the newly gained knowledge about performance optimizations, your applications might be perceived better by their users, what in turn might directly surface with better conversion rates.

Key facts

  • we will use the newest techniques available
  • we will focus on performance optimizations
  • we will take care about supporting possibly broad range of mobile devices

Agenda outline

  1. What are Progressive Web Apps (PWA)?
    1. Why PWA? Advantages, metrics and application examples
    2. Differences and advantages over native applications
    3. The support of PWAs in the browsers
  2. Service Worker
    1. Web App Manifest
    2. Offline mode support - strategies and practices
    3. Adding to Home Screen
    4. Push Notifications
    5. Background synchronization
    6. Toolset: Workbox.js
    7. Service Workers testing strategies
  3. Basics of progressive enhancement
    1. Backward compatibility good practices
    2. Customizing native HTML components
    3. Offline-first
    4. App-Shell Architecture
    5. "Mobile Web" specifics
  4. "Mobile Web" specifics
    1. Responsive Web Design, media queries
    2. CSS elements useful in designing for mobile
    3. Device orientation
    4. Viewports (layout viewport vs. visual viewport)
  5. Integration with operating system
    1. Geolocation
    2. Touch and gestures support
    3. Camera access
    4. Web Share API
    5. Payment Request API
  6. Performance optimizations
    1. Testing and measuring performance
    2. Resource loading critical path
    3. Key elements of rendering performance (“pixel pipeline”)
    4. Image loading optimization
    5. Tools - Chrome DevTools, remote debugging, Lighthouse

Invite me

The format might vary from the short talk (see Speaking section), 3-4h of workshop up to three full days of interactive training.

Sounds interesting? Contact me and we'll discuss the details about the content, format and availability.