Running PWA in the browser

Author: Damian Gemza


Running the application in a browser

If you now run the application with the ng serve command, Service Workers would not work because the browser is not able to handle them. In order to test how the PWA application works, we need to install the http-server package from the npm repository. Thanks to it we will be able to run our application on the server, and check if everything works.

To do this, execute the following command in the terminal:

          npm install http-server -g

In order for a PWA application to be fully functional, its production version must be launched on the server. To do this, open the file angular.json, and modify the line "outputPath": "dist/project-name",.

Remove /project-name part so that only "outputPath" and "dist" are left. The "outputPath" line should therefore look like this:

              "outputPath": "dist",

Then open the package.json file, and add the following script to the scripts object, which will remove the already existing dist directory, generate a new one, and the launch the http-server package.

                "pwa": "ng build --prod && cd dist && http-server -p 8080 && cd .."

After adding the above script there is nothing left for us to do but to run our PWA application! To do this, enter the following commands in the terminal:

              npm run pwa

After running the npm run pwa command, just open the browser at localhost:8080, and enjoy the PWA application!

In order to observe the effects of any changes, close the http-server with the combination of CTRL + C in the terminal, change something in your application - just add or remove one letter from the template, then save the file app.component.html, and execute command npm run pwa one more time.

Remember that during this time you cannot close the browser window in which you have started the application. After running http-server one more time, refresh your browser tab, in which the localhost:8080 address was opened.

After a few seconds you should see the modal, that tells us that a new version of the application has been detected, and asks whether you want to update it. If you press the Update! button, the website should be reloaded.

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Damian Gemza
Damian is a front-end developer. He is passionate about everything related to the world of Web Development. He is interested in the subject matter of Angular and everything that is connected with it. He knows and uses the Ionic framework and Progressive Web Apps technology. Recently he has started to write tutorials related to the Web Development.