angular / angular/angular-cli

PWA not working with vite-based dev server

Đang mở
#28,224 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
angular/build:dev-server area: @angular/build freq1: low severity3: broken type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### Command

serve

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

Angular 16

### Description

Serving a PWA with the default dev server is now broken.
Specifically, the vite dev server apparently mangles the files emitted by the previous build steps, but does not recompute the hashes stored in `ngsw.json`.
This results in the service worker being installed, but not really serving any file.

It is still possible to use the "old" (webpack-based) dev server that is apparently not affected by this.

### Minimal Reproduction

Basically the steps are:
- create a new app `ng new`
- make it a PWA `ng add @angular/pwa`
- configure it to start the service worker in dev
- start it `ng serve`
- open it in the browser http://localhost:4200/ and wait a few seconds (so that the service worker can initialize)
- check the sw state at http://localhost:4200/ngsw/state

A full repo reproducing the issue is https://github.com/ranma42/pwa-repro
From this repo, the needed steps are:
- choose the commit to start from (https://github.com/ranma42/pwa-repro/commit/a524b1a36049d77690ac6f37c14a56d1d501a042 to check the issue with vite, https://github.com/ranma42/pwa-repro/commit/6207a68be012eb680e000ff02f82b65c1d6b4b8d to compare with webpack)
- install the dependencies `npm install`
- start the server `ng serve`
- open the app in the browser http://localhost:4200/ and wait a few seconds (so that the service worker can initialize)
- check the sw state at http://localhost:4200/ngsw/state

Note that the repo contains both a revision that reproduces the issue and one that configures the build to use webpack for comparison, to show that in that case the dev server works as intended.
Also note that to properly check what is going on, you might want to clear the browser state by opening the inspector and (in Chrome-based browsers) going to Application -> Storage -> Clear site data

With the webpack dev server, http://localhost:4200/ngsw/state reports

```
NGSW Debug Info:

Driver version: 18.2.0
Driver state: NORMAL ((nominal))
Latest manifest hash: a9c562165e1a3b3bf67ea36a6e0537b1075767a8
Last update check: 38s35u

=== Version a9c562165e1a3b3bf67ea36a6e0537b1075767a8 ===

Clients: 946e5332-b1f0-466c-94fe-fac62101a798, 01aa5e79-986a-4910-bf75-eebbd80ad320

=== Idle Task Queue ===
Last update tick: 196u
Last update run: 27s738u
Task queue:

Debug log:
```

### Exception or Error

```text
For the vite devserver http://localhost:4200/ngsw/state reports

NGSW Debug Info:

Driver version: 18.2.0
Driver state: EXISTING_CLIENTS_ONLY (Degraded due to: Hash mismatch (cacheBustedFetchFromNetwork): http://localhost:4200/index.html: expected dcc35fd9e7cb2cbc5727f7dc941ab15beb5c8e94, got c628b20918af9ae65adf19ae7ef74c3c9d168ca7 (after cache busting)
Error: Hash mismatch (cacheBustedFetchFromNetwork): http://localhost:4200/index.html: expected dcc35fd9e7cb2cbc5727f7dc941ab15beb5c8e94, got c628b20918af9ae65adf19ae7ef74c3c9d168ca7 (after cache busting)
at PrefetchAssetGroup.cacheBustedFetchFromNetwork (http://localhost:4200/ngsw-worker.js:476:21)
at async PrefetchAssetGroup.fetchFromNetwork (http://localhost:4200/ngsw-worker.js:451:19)
at async PrefetchAssetGroup.fetchAndCacheOnce (http://localhost:4200/ngsw-worker.js:430:21)
at async http://localhost:4200/ngsw-worker.js:535:9
at async http://localhost:4200/ngsw-worker.js:521:9
at async http://localhost:4200/ngsw-worker.js:521:9
at async http://localhost:4200/ngsw-worker.js:521:9
at async http://localhost:4200/ngsw-worker.js:521:9
at async PrefetchAssetGroup.initializeFully (http://localhost:4200/ngsw-worker.js:520:7)
at async http://localhost:4200/ngsw-worker.js:924:11)
Latest manifest hash: 92656589d404e75dc7df6ccfe2840f76f7867faa
Last update check: 6s797u

=== Version 92656589d404e75dc7df6ccfe2840f76f7867faa ===

Clients:

=== Idle Task Queue ===
Last update tick: 4s224u
Last update run: never
Task queue:
* activate: cleanup-old-sw-caches
* init post-load (cleanup)

Debug log:

[6s755u] Error(Hash mismatch (cacheBustedFetchFromNetwork): http://localhost:4200/index.html: expected dcc35fd9e7cb2cbc5727f7dc941ab15beb5c8e94, got c628b20918af9ae65adf19ae7ef74c3c9d168ca7 (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): http://localhost:4200/index.html: expected dcc35fd9e7cb2cbc5727f7dc941ab15beb5c8e94, got c628b20918af9ae65adf19ae7ef74c3c9d168ca7 (after cache busting)
at PrefetchAssetGroup.cacheBustedFetchFromNetwork (http://localhost:4200/ngsw-worker.js:476:21)
at async PrefetchAssetGroup.fetchFromNetwork (http://localhost:4200/ngsw-worker.js:451:19)
at async PrefetchAssetGroup.fetchAndCacheOnce (http://localhost:4200/ngsw-worker.js:430:21)
at async http://localhost:4200/ngsw-worker.js:535:9
at async http://localhost:4200/ngsw-worker.js:521:9
at async http://localhost:4200/ngsw-worker.js:521:9
at async http://localhost:4200/ngsw-worker.js:521:9
at async http://localhost:4200/ngsw-worker.js:521:9
at async PrefetchAssetGroup.initializeFully (http://localhost:4200/ngsw-worker.js:520:7)
at async http://localhost:4200/ngsw-worker.js:924:11) initializeFully for 92656589d404e75dc7df6ccfe2840f76f7867faa
```

### Your Environment

```text
$ ng version

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI: 18.2.0
Node: 20.13.0
Package Manager: npm 10.5.2
OS: linux x64

Angular: 18.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1802.0
@angular-devkit/build-angular 18.2.0
@angular-devkit/core 18.2.0
@angular-devkit/schematics 18.2.0
@schematics/angular 18.2.0
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.10
```

### Anything else relevant?

_No response_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Tái hiện vấn đề từ repository pwa-repro được liên kết với các commit của Vite và webpack, sử dụng npm install và ng serve. Kiểm tra ngsw.json, ngsw-worker.js và đầu ra của /ngsw/state, sau đó so sánh các tệp được tạo và các hash giữa cả hai server. Hoàn tất khi development server của Vite không còn gây ra lỗi không khớp hash của service worker.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript, vite
Lĩnh vực
build-system, cli, web-dev
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.