Angular PWAs

Your Anchor in the Digital Ocean

(uh nk - ee t ah         s oo d)

Cohost

Senior Principal Engineer

Ankita Sood

Austin, Texas

SoodAnkita

GuacamoleAnkita

Progressive Web Apps

Conservative Web Apps

Web App

 App

Web App

 Progressive Web App!

Web Apps

Web Sites

Spoiler Alert !!!

They are all Progressive Web Apps

Spoiler Alert !!!

They are Progressive Web Apps

Software Distribution Challenges

PWAs : User-First Apps

Image Source : https://blogs.halodoc.io/delivering-a-native-like-user-experience-on-the-web-via-progressive-web-apps/

Focus on the user,
and all else with follow.

- Ten things we know to be true
(Google's Philosophy)

 

https://about.google/philosophy/

PWAs : User-First Apps

Focus on the user,
and all else with follow.

- Ten things we know to be true
(Google's Philosophy)

 

https://about.google/philosophy/

Apps-solutely Progressive

https://www.pwastats.com/

Apps-solutely Progressive

Fast.
Installable.
Reliable.
Engaging.

 

https://web.dev/articles/drive-business-success#solve-customer-needs

Image assisted by Gemini AI

Customers like F.I.R.E

  (Enterprise) Angular App SOS:
 Escape the Sea of Tabs

38% Desktop PWA sessions

 PWA Features

https://web.dev/articles/app-like-pwas#feature_summary

 The PWA Power

Reach New Shores and Empower
  • Caching and Pre-fetch strategies.
  • Offline Access/ Reduced Network dependency.
  • Install-ability (No dealing with app stores).
  • Lower Development Costs (one app to maintain regardless of OS)
  • Build once deploy everywhere.

Image assisted by Gemini AI

 The PWA Power Couple

ngsw-worker.json

manifest.webmanifest

Image assisted by Gemini AI

 Remember Petra Dubois?
 

Owner of Meowmerican Wanderlust
ng add @angular/pwa

ng build

http-server  dist/deferred-loading -o

https://github.com/AnkitaSood/deferred-loading

 https://github.com/AnkitaSood/deferred-loading/tree/final

Power of Angular

  • Signals
  • Hydration (Server-side OR Prerendering)
  • Lazy Loading / Deferrable Views
  • Standalone Architecture
  • Tree Shaking
  • Image Optimization
  • Directives
  • Pure Pipes
  • On Push Change Detection
  • Built-in control flow with track function

https://pokemon-type-tool.netlify.app/

@if (!isSmallScreen()) {
  @defer {
    <app-data-grid/>
  }
} 
@else {
  @defer {
    <app-responsive-cards/>
  }
}

One (PW)App
to rule them all !

Image assisted by Gemini AI

ng add @angular/pwa

Sprinkle Responsive CSS

Leverage any of numerous Web APIs

Update Splash Images

PWAs

By Ankita Sood

Made with Slides.com

PWAs

Angular PWAs @ ng-conf 2024

  • 229

More from Ankita Sood