Running app in the browser

Running the application in a browser

If you now run the application with the ng serve command, Service Workers will not work because the browser is not able to handle it. 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 working 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!

Is something not working for you? Check the code for this lesson on our repository