Build Your First PWA with Angular

Developer Blog Comments
1

Build Your First PWA with Angular

This post shows you how to build a PWA (Progressive Web Application) with Angular, Angular CLI, and Angular Material.

2

Gautam Krishna R

Good blog. It is better to use ng add command when adding dependencies like @angular/material instead of using NPM.

3

Matt Raible

In Angular Material’s Getting Started Guide, they recommend using npm install as the first option, and ng add as the second alternative. That’s why we used npm install. I agree that ng add is shorter and easier to use.

4

Vivekanand Kandagatla

Hi Matt, when I run LightHouse app, for me it is not showing any number for PWA? could you please help me on the same on why the app is not recognizing PWA?

5

Matt Raible

This happens because the last version of Lighthouse no longer shows numbers. It gives you a color rating based on whether you meet the requirements of a PWA (HTTPS, offline capable, and installable with a webapp manifest).

6

Vivekanand Kandagatla

As of now it does not show any color, when I click on that PWA icon - it is giving me something but other than Lighthouse do we have any tool where it says the application is fully PWA.

And one more quick thing, the example which you have shown here is like a fully PWA (100%) where it can be used as an app.

7

Muhammed

Great! Thanks Matt.

8

devbackham079

Compared to a classic App Store model, for the most part, the native app adds duplication of development effort across platforms – websites and apps. It also gives businesses a hard time attracting and retaining users, even for ones who invest tens of thousands of dollars developing and promoting the applications.
Instead of that, we can use the PWA on the same website/store by integrating the plugin

View features: Magento PWA | Magento 2 PWA

9

Abinayaa R

Good article! We have written a similar article on How to create a PWA with Service worker in Angular. Do check out and share your thoughts. Thank you.

10

Elaine Carey

Hi Matt, thanks for the tutorial, really useful. Just one thing - I followed your guide exactly and when I select login on the page, I get the following error: 'OAuthError: The response type is not supported by the authorization server. Configured response types: [code].'

I have been looking around for a solution for quite some time so if you have any ideas it would be hugely appreciated! Thanks!

11

Matt Raible

This happens because Auth Code Flow (with PKCE) is now the default. When this post was written, Implicit Flow was the default. You can fix it my adding pcke: true to your initialization code.


OktaAuthModule.initAuth({
  issuer: ‘https://{yourOktaDomain}/oauth2/default’,
  redirectUri: ‘http://localhost:8080/implicit/callback’,
  clientId: ‘{yourClientId}’,
  pkce: true
})

To fix this problem without changing your code, edit your Okta app and select Implicit as an allowed grant type. To learn more about why you shouldn’t use implicit flow, see Is the OAuth 2.0 Implicit Flow Dead?

12

Manoj Majumdar

Great blog, everything is provided step by step and it works perfectly

13

ITEnginner

If you want to create an Angular Appliction that scores 100% on chrome Lighthouse audit, then watch is fantastic video
https://youtu.be/NxBqdDSYFn4