Author: Damian Gemza
Running the application in a browser
If you now run the application with the
ng serve command, Service Workers would
because the browser is not able to handle them. In order to test how the PWA application works, we need to
http-server package from the npm repository. Thanks to it we will be able to run our
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
/project-name part so that only
"outputPath" and "dist" are
"outputPath" line should therefore look like this:
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
and enjoy the PWA application!
In order to observe the effects of any changes, close the
http-server with the
CTRL + C in the terminal, change something in your application - just add or remove one letter from
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: