Progressive Web Application

Viktor Tkachenko

7+ years in front end development

Front End Technical Leader at PrivatBank

Independant Consultant

Performance Engineer

What is PWA?

Profit

Support offline mode

Looks like native application

Fast loading

Secure by default

Always up to date

Installable for mobile

Installable for desktop

Advantages for new application

• One code base
• Smaller and faster
• Using as web simple web site

Browser capabilities

Offline strategies with Service Workers

On network response

Stale while revalidate

On push message

and more and more...

Using WorkBox API for Offline recipes

Service Workers Support

Push Notifications

Push Notifications support

Web Share

Web Share support

Web Share support

Web Share support

Web Bluetooth

Web Bluetooth Support

Web NFC

Web NFC support

Web USB

Web USB support

Web Payment

Web Payment support

Picture in picture

Picture in picture support

Shape Detections

• Codes (bar, qr etc)
• Shape
• Text

Shape Detections

Shape Detections support

Contacts

Contacts support

Speech Synthesis

Speech Synthesis support

Badging

Badging support

Portals

Portals support

Credentials

Credentials support

And more ...

• Device Memory
• Ambient Light
• Battery Status
• Device Motion
• Vibrate
• ...

Upcoming capabilities

Publishing

Android

1. Install Android Studio
2. Using TWA
3. Pay 25$

Apple

1. Buy a Mac
2. Install XCode
3. Create profile in iTunes Connect
4. ...
5. Pay 99$

Microsoft

1. Generate .appx package
2. Upload to the Microsoft Dev center for free (now Chrome Store)

Or using PWABuilder

Links

• Bluetooth samples
• Feature detection online
• chromestatus.com
• web.dev/blog
• Offline Cookbook
• Web Share
• Trusted Web Activities
• can i use
• Publishing your PWA
• Shape Detection

Links

• Chrome Developers
• PWA stats
• Performance Optimization profit
• Workbox
• PWA examples
• Spotify mobile web

Contacts

victor.tkachenko6

victor.tkachenko6@gmail.com