This post shows you how to build a PWA (Progressive Web Application) with Angular, Angular CLI, and Angular Material.
Gautam Krishna R
Good blog. It is better to use ng add command when adding dependencies like @angular/material instead of using NPM.
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.
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?
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).
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.
Great! Thanks Matt.
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
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.
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!
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.
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?
Great blog, everything is provided step by step and it works perfectly
If you want to create an Angular Appliction that scores 100% on chrome Lighthouse audit, then watch is fantastic video