Author: Damian Gemza
Running the application in a browser
If you now run the application with the
ng serve command, Service Workers
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
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"
"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!
To see if the PWA mechanism is working, open the
localhost:8080 address in Google Chrome browser, open the
developer tools using the F12 key, then open the Network tab, and select the Offline checkbox and refresh
the page. The page should load correctly, even without an Internet connection. That's thanks to PWA!
Something doesn't work for you? Check the code for this lesson on our repository
Previous lesson Download Next lesson
Spread the word: