PWA using vtecx

Prerequisites [Understanding]

Create a Simple Progressive Web App (PWA)

• Webpack

Github Link: https://github.com/mp5maker/progresssive-web-app/tree/vtecx-pwa-app

Content

• Initial Steps
• First Step [Setting up the files]
• Second Step [Preparing for the development]
• Third Step [Preparing for the production]

Initial Steps

• Create an account in vte.cx [sign up]
• Add an api [service]
• Create an app usings commands below

npx create-vtecx-app [your-app-name]
cd [your-app-name]
npm run install

First Step [Setting up the files]

• Go to [your-app-name]’s src folder
• Create a pwa folder and manifest.json, sw.js inside it
• I prefer to keep the serviceWorker.tsx inside pwa folder but you can keep it anywhere
• Import the service worker register function inside the components/index.tsx

Fig: Service Worker

Fig: Import the register function inside the register

Second Step [Preparing for Development]

npm install --save-dev copy-webpack-plugin

• We need install a package copy-webpack-plugin
• For the vtecx-app, in the development it creates a dist folder
• So we need keep the manifest.json and sw.js in the dist
• So we will copy the files from pwa folder to the dist folder using copy-webpack-plugin

Fig: Updated sections of the webpack.config.js

npm run serve:index

Fig: Dist containing manifest.json and sw.js

Now update the index.html inside the src folder

Fig: src/index.html

Add manifest file inside pwa app

Fig: src/pwa/manifest.json

Add sw.js file inside pwa folder

Fig: src/pwa/sw.js

Now the app can be used in offline mode and be used as an app in mobile and tablets.

Third Step [Preparing for Production]

• If we recall because of the “scope” in manifest.json. All the files needs under where the manifest.json is located.

"scope": "/"
meaning all the files needs to be under the directory where the manifest.json is located

• manifest.json cannot be inside img or components, it should be in the beginning of the dist
• Therefore, in production if the base url is [service-name].vte.cx. Then our manifest.json should be in [service-name].vte.cx/manifest.json
• Same for the sw.js file
• To make this happen we need to update our deploy.sh

Fig: Deploy

• npx vtecxutil upload:img: uploads the images from the img directory
• npx vtecxutil upload:pwa: uploads the pwa files from the dist directory
• npx vtecxutil upload:html: uploads the html files that is present in the src folder

We also need to make sure that the pwa files are accessible to all users.

Fig: Giving access to sw.js and manifest.json

npm run upload

This command will upload all the settings to the production

./deploy.sh

This command will upload all the files required for pwa and the overall project

Now to make the pwa work in production turn your http to https.