fix(flow-server): add support for AppShell stylesheets in service worker precache - #25047
fix(flow-server): add support for AppShell stylesheets in service worker precache#25047platosha wants to merge 7 commits into
Conversation
…ker precache Fixes vaadin/hilla#5806 - Add `AppShellRegistry.getStyleSheets` to fetch stylesheets defined by `@StyleSheet`. - Normalize stylesheet URIs for context-root-relative resolution before caching. - Update service worker runtime JS in `PwaRegistry` to add app shell stylesheets to the offline page cache. - Refactor `AppShellRegistry.createSettings`: - Extract stylesheet collection logic into a dedicated method. - Remove duplication between dev and production mode handling. - Simplify attribute mapping for hot-swapping in development builds.
…mode - Remove `data-file-path` assertions for all stylesheet types in production mode, as the attribute is not used when serving hashed resources. - Normalize expected `data-file-path` values in dev mode tests to reflect that paths are preserved (including leading `/` or `context://` prefix) rather than stripped. - Add comprehensive test cases for hotswap behavior with absolute, relative, and context-path stylesheet annotations to verify correct removal and refresh strategy.
7bc8fef to
afcc0de
Compare
platosha
changed the title
Test Results 1 441 files ±0 1 441 suites ±0 1h 39m 20s ⏱️ + 1m 13s For more details on these failures and errors, see this check. Results for commit 3c39ed8. ± Comparison against base commit 626a502. |
| } else if (uri.startsWith(CONTEXT_PROTOCOL_PREFIX)) { | ||
| uri = uri.substring(CONTEXT_PROTOCOL_PREFIX.length()); | ||
| } else if (uri.startsWith(BASE_PROTOCOL_PREFIX)) { | ||
| uri = uri.substring(BASE_PROTOCOL_PREFIX.length()); | ||
| } |
There was a problem hiding this comment.
context://a.css and base://a.css resolves to different resources if a servlet mapping is in use. Just stripping the prefix might produce wrong results.
| .getStyleSheets(VaadinService.getCurrent())) { | ||
| String uri = FrontendDependencyUrlResolver | ||
| .resolveToContextRoot(styleSheet); | ||
| if (uri == null) { |
There was a problem hiding this comment.
Absolute URLs (starting with http://, https:// or //) should probably be skipped as well
| } else if (uri.startsWith(BASE_PROTOCOL_PREFIX)) { | ||
| uri = uri.substring(BASE_PROTOCOL_PREFIX.length()); | ||
| } | ||
| filesToCache.add(offlinePageCache(uri)); |
There was a problem hiding this comment.
offlinePageCache uses the offlineHtml hashcode as revision, so if you only update the CSS and rebuild the application, the revision will not change, and a stale stylesheet may be used.
There was a problem hiding this comment.
Also, in production stylesheets URL gets the v-c content hash appended to it, so I guess this will bypass the workbox cache.
I'm not sure if the workobx entry URL should contain the parameter or if we should tune the ignoreURLParametersMatching setting.
| var styleSheets = getStyleSheets(request.getService()); | ||
| if (!request.getService().getDeploymentConfiguration() | ||
| .isProductionMode()) { | ||
| ActiveStyleSheetTracker.get(request.getService()) | ||
| .trackForAppShell(stylesheets.values()); | ||
| .trackForAppShell(styleSheets); | ||
| } |
There was a problem hiding this comment.
The previous code used resolveStyleSheetHref(sheet.value(), request) to process stylesheet and filtered out null/blank results. The getStyleSheets(request.getService()) call does not use resolveStyleSheetHref at all. Is this on purpose? I wonder if trackForAppShell receives values that should not be considered.
3 participants
Fixes vaadin/hilla#5806
Summary
Stylesheets declared via
@StyleSheeton an AppShellConfigurator are now included in the PWA service worker's precache, so they are available offline.Feature
AppShellRegistry.getStyleSheets(...)and adds each toself.additionalManifestEntriesin the generatedsw-runtime.js.Refactors in AppShellRegistry
getStyleSheets(VaadinService)method, reused by both createSettings and the newPwaRegistryprecache path.resolveStyleSheetHref(production mode only).addStyleSheetsno longer branches between dev and production for URL rewriting.addStyleSheetsnow takes aList<String>of raw annotation values instead of aMap<String, String>of pre-resolved hrefs — resolution happens once per sheet at emit time.data-file-path/data-idattributes now carry the raw@StyleSheetannotation value (previously stripped of prefixes). This letsStyleSheetHotswappermatch on the same string it emits when a stylesheet is hot-swapped. In production these attributes are omitted entirely.