在 GitLab CI 頁面中未檢測到 Angular PWA

Question

我正在創建有角度的 pwa 網絡應用程序。 我正在使用 gitlab-ci.yml CI 將 angular web 應用程序部署到 gitlab-pages。 我的問題是部署 Angular Web 應用程序后 PWA 無法安裝。 任何人都可以發現這里出了什么問題。

https://grdtech.gitlab.io/pizza-shop/

上面的鏈接是使用 gitlab-ci.yml CI 在 gitlab 頁面中實時部署的angualar pwa。 但是在這個站點中沒有檢測到 pwa 並且安裝提示沒有來。

gitlab-ci.yml 文件

image: node:12.19.0

pages:
   cache:
   paths:
      - node_modules/
script:
   - npm install -g @angular/cli@11.0.2
   - 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"
   }
  ]
}

Answer 1

這里的問題是您沒有部署生產版本。 默認情況下，PWA 僅在為生產構建時應用。 您可以使用

ng build --prod

為確保項目是開發版或生產版，您可以使用僅在開發環境中工作的Augury

占卜文檔