search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.52k stars 782 forks source link

Service worker does not include app.css in manifest #1631

Closed ficoos closed 2 years ago

ficoos commented 5 years ago

Stencil version:

@stencil/core@1.0.0

I'm submitting a:

[ x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior: When using service workers in development mode app.css is not included in the sw precache manifest.

Expected behavior: app.css is included

Steps to reproduce: stencil build --dev --watch --serve --serviceWorker

Related code:

// insert any relevant code here

Other information:

When building in development you can see the the generate style and generate service worker stages happen concurrently. There might be a race between the sw globber and the style generation code

manucorporat commented 5 years ago

why do you expect it included?

ficoos commented 5 years ago

It's needed for the site to be available offline. Without it you don't have the global css available when you are offline. This makes testing the site's offline behavior on a dev server impossible.

manucorporat commented 5 years ago

can you share your src/index.html?

ficoos commented 5 years ago 
<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <meta charset="utf-8">
  <title>PWA</title>

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="PWA">
  <meta name="theme-color" content="#16161d">

  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="Ionic PWA">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta http-equiv="x-ua-compatible" content="IE=Edge">

  <link href="/build/app.css" rel="stylesheet">
  <script type="module" src="/build/app.esm.js"></script>
  <script nomodule src="/build/app.js"></script>
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/apple-touch-icon.png">
  <link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
  <link rel="manifest" href="/manifest.json">
</head>

<body>

  <app-root></app-root>

</body>

</html>
michael42 commented 4 years ago

It seems that @stencil/core 1.14.0 explicitly ignores the main css and js files via globIgnores (see addGlobIgnores in stencil.js), which makes the resulting service worker rather pointless. It caches the HTML file, but then everything that file references is missing.

michael42 commented 4 years ago

I'll retract my statement. When using href="/build/app.css" and src="/build/app.esm.js", these references will be rewritten into the p-... files that are cached by the ServiceWorker. I used relative references (build/app.esm.js), which are neither rewritten (in the index.html) nor cached by the ServiceWorker.

MrAntix commented 3 years ago

relates to https://github.com/ionic-team/stencil/issues/2687

splitinfinities commented 3 years ago

Hey everyone, thank you for the patience. Would anyone happen to know if this behavior exists within v2? If we could update the repro case for these, I would appreciate it, and it would help us diagnose and solve this problem sooner than later.

ionitron-bot[bot] commented 3 years ago

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

rwaskiewicz commented 3 years ago

Hey ionitron-bot, we didn't mean to close this. Bad bot!

rwaskiewicz commented 2 years ago

This issue is being closed due to the lack of a code reproduction. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!