I am Creating angular pwa web app. I am deploying angular web app to gitlab-pages using gitlab-ci.yml CI. My question is after deployment of angular web app PWA is not installable. Can Any one spot whats going wrong here.
https://grdtech.gitlab.io/pizza-shop/
Above link is live deployed angualar pwa inside gitlab pages using gitlab-ci.yml CI. But in this site pwa is not detected and install prompts not coming.
gitlab-ci.yml file
image: node:12.19.0
pages:
cache:
paths:
- node_modules/
script:
- npm install -g @angular/[email protected]
- npm install
- npm run buildProd
artifacts:
paths:
- public
only:
- master
- pages
manifest.webmanifest
{
"name": "createpizza",
"short_name": "createpizza",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}
The issue here is you are not deploying a production build. By default PWA are only applied while building for production. You can do so using
ng build --prod
To make sure a project is a dev or a production build you can use Augury which will only work in a dev environment