Web

Angular 6 – How to Create PWA (Progressive Web App)

In this post, you will learn about steps that are required to create a progressive web app (PWA) with Angular 6. Unlike Angular 4 and Angular 5, it is very easy and quick with Angular 6. Just one command and you are done.

The following are the steps required to create PWA with Angular 6.

  • Create an angular app using the following command:
    ng new ProjectName
    
  • Go to the root folder, (ProjectName). Execute the following command:
    ng add  @angular/pwa
    

    The above command does some of the following:

    • Adds the @angular/service-worker package
    • Enables service worker to build support in the CLI. Imports and registers the service worker in the app module.
    • Creates the service worker configuration file called ngsw-config.json.
    • Updates the index.html with entries for manifest.json and meta-tags for the theme
    • With Angular 4 and 5, one required to manually create and install icon files. With above command, it is done automatically.
  • Build the project using the following command:
    ng build --prod
    
  • Time to test. Install http-server using the following command:
    npm i http-server
    
  • Go to dist folder and execute the following command:
    http-server -p 8080
    

Open the Chrome Browser and test the PWA aspect using Lighthouse plugin.

References

Summary

In this post, you learned about how to create progressive web app (PWA) using Angular 6.

Did you find this article useful? Do you have any questions or suggestions about this article? Leave a comment and ask your questions and I shall do my best to address your queries.

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

2 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

4 weeks ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago