Serving the PWA

Now that we have built the app, we can serve it so that we can install it in our browser. Let's begin, as follows:

1. To build the app, we run the following command:

   npm run build

2. We can use the browser-sync package, which we install by running the following command:

   npm install –g browser-sync

   The preceding command will install a web server.

3. We can go into the dist folder, which has the built files, and run browser-sync to serve the PWA.
4. Now, to run the app, we need to get the GitHub authentication token from our GitHub account. If you don't have a GitHub account, then you will have to sign up for one.
5. Once we have created an account, then we can get the token. To get the token, log in to your GitHub account.
6. Go to https://github.com/settings/tokens.
7. Once the page is loaded, click on the Personal access tokens link.
8. Click Generate new token to generate a token. Once it's created, copy the token down somewhere so that we can use it by entering it in our app.

   We should see something like this:

   

   Figure 2.3 – The screen for getting the token

9. Once you have the token, go back to the app we created, which is loaded in the browser.
10. Enter the token into the GitHub Token input, click Save token, and then refresh the page. If there are any repositories and associated issues and comments, then they should show in the page.
11. Once we are in the browser, we should see a plus (+) sign on the right side of the URL bar. This button lets us install the PWA.
12. Once we install it, we should see it on the home screen. We can go to the chrome://apps URL to see the app we just installed, as shown in the following screenshot:
    

    Figure 2.4 – The GitHub repository listing in our PWA

13. If you're using Chrome or any other Chromium browser such as Edge, you can press F12 to open the developer console.
14. Click on the Application tab and then the Service Workers link on the left side to let us test the service worker, as illustrated in the following screenshot:
    

    Figure 2.5 – The Service Workers section of the Application tab

15. We can check the Offline checkbox to simulate how it acts when it is offline. Checking the Update on reload will reload the app with the latest data fetched when we refresh the page. The URL should be the same as the one your app is running on. This is the service worker that is registered by our GitHub PWA.
16. The Unregister link will unregister the service worker. It should be re-registered when we run our app again.

We are now done with creating our progressive web app with Vue 3. We can install it with browsers and then use it like any other app on our device.