Serving the PWA
- To build the app, we run the following command:
npm run build
- We can use the
browser-syncpackage, which we install by running the following command:
npm install –g browser-sync
The preceding command will install a web server.
- We can go into the
distfolder, which has the built files, and run
browser-syncto serve the PWA.
- 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.
- Once we have created an account, then we can get the token. To get the token, log in to your GitHub account.
- Go to https://github.com/settings/tokens.
- Once the page is loaded, click on the Personal access tokens link.
- 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.
- Once you have the token, go back to the app we created, which is loaded in the browser.
- 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.
- 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.
- Once we install it, we should see it on the home screen. We can go to the
chrome://appsURL to see the app we just installed, as shown in the following screenshot:
- If you're using Chrome or any other Chromium browser such as Edge, you can press F12 to open the developer console.
- 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:
- 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.
- 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.