Sharing Top Content from the Angular-sphere.

What Are Progressive Web Apps (PWA) And How To Implement PWA Using Angular

What Are Progressive #WebApps (#PWA) & How To Implement #PWA Using #Angular by @jinalshah999

  • It is a new way to deliver amazing mobile application capabilities using websites.
  • Progressive Web Apps are applications that use modern web capabilities to provide a mobile application-like experience to users via the web.
  • It’s still a relatively new concept to talk about, with many pros and cons… – – – – – – – – One way to make an Angular app load faster is to run its compiler under the.
  • And also, add the following file to root directory of you Angular project and name it as sw-precache-config.
  • Here, I am caching all HTML, CSS, and JS files to dist folder because when we run the production build with Angular cli, it generates the compiled and minified bundle in dist directory which we deploy and host on Server.

What Are Progressive Web Apps (PWA) And How To Implement PWA Using Angular.

Progressive Web Apps are like websites…but better. It is a new way to deliver amazing mobile application capabilities using websites. PWA was introduced by Google in Google I/O 2016, and since then it has become  the talk of the town. Progressive Web Apps are applications that use modern web capabilities to provide a mobile application-like experience to users via the web. It’s still a relatively new concept to talk about, with many pros and cons…

Progressive Web Apps are

Service Workers enable PWA to load instantly, regardless of the network state. It never shows that awful dinosaur screen, even if there is no network.

Application Shell makes it faster and provides a smooth user experience.

Manifest makes more engaging web apps. Manifest file makes PWA installable and live on the user’s home screen. We can even make the users re-engaged with the help of push notifications.

Works for every user, regardless of browser.

PWA Served via HTTPS to prevent snooping and ensure the security of content.

It can be easily shared via URL.

Source Code and Demo Application

Implement PWA using Angular

Ahead-of-Time(AOT) compilation

One way to make an Angular app load faster is to run its compiler under the AOT. i.e. the compiler only runs once during the build step only; the app does not need to compile when trying to load it in browser.

What Are Progressive Web Apps (PWA) And How To Implement PWA Using Angular