Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@zhoujinfu Is it convenient to file an issue to discuss your problem? #6

Open
zhoujinfu opened this issue Apr 29, 2022 · 13 comments
Open

@zhoujinfu Is it convenient to file an issue to discuss your problem? #6

zhoujinfu opened this issue Apr 29, 2022 · 13 comments

Comments

@zhoujinfu
Copy link

@zhoujinfu Is it convenient to file an issue to discuss your problem?

Originally posted by @chenxch in #5 (comment)

I add a minimal reproduction at my fork
@zhoujinfu
Copy link
Author

When i remove the dynamic base in publicPath.ts and index.html. Some pwa assets load failed with some 404s like http://localhost:3000/undefined/assets/Home.30461712.js.

@zhoujinfu
Copy link
Author

When i remove the dynamic base in publicPath.ts and index.html. Some pwa assets load failed with some 404s like http://localhost:3000/undefined/assets/Home.30461712.js.

it seems that the plugin does not work well with vite-plugin-pwa. Maybe i use it in wrong way. Any ideas about this?

@chenxch
Copy link
Owner

chenxch commented Apr 29, 2022

I am very happy to receive your feedback, I will investigate it in the near future, and I will reply to you as soon as there is progress.

@chenxch
Copy link
Owner

chenxch commented Apr 29, 2022

The problem I have roughly located is that the resources of pwa will not use publicPath, so the matching method of base+publicPath will not take effect on it. I need to implement my previous base tag plan in advance.

@chenxch
Copy link
Owner

chenxch commented May 1, 2022

@zhoujinfu You can try version 0.4.0

@zhoujinfu
Copy link
Author

I tried v0.4.0. see my forked HEAD on branch main zhoujinfu@d9e6cb1.

I tested the examples update vite-plugin-dynamic-base to v0.4.0. And pnpm build.

The output index.html like below:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" >
  <link rel="icon" href="/__dynamic_base__/favicon.ico" >
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <title>Vite App</title>
  <script>
    window.__dynamic_base__ = 'http://localhost:8090/base'
  </script>
  
  
<link rel="manifest" href="/__dynamic_base__/manifest.webmanifest"><script src="/__dynamic_base__/registerSW.js"></script>  <script>
  (function(){
    var preloads = [{"parentTagName":"head","tagName":"script","attrs":{"type":"module","crossorigin":"","src":"/__dynamic_base__/assets/index.471d4ef9.js"}},{"parentTagName":"head","tagName":"link","attrs":{"rel":"stylesheet","href":"/__dynamic_base__/assets/index.a2f9fb2a.css"}}];
    function assign() {
      var target = arguments[0];
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
    for(var i = 0; i < preloads.length; i++){
      var item = preloads[i]
      var childNode = document.createElement(item.tagName);
      assign(childNode, item.attrs)
      if(window.__dynamic_base__) {
        if(item.tagName == 'link') {
          assign(childNode, { href: window.__dynamic_base__ + item.attrs.href })
        } else if (item.tagName == 'script') {
          assign(childNode, { src: window.__dynamic_base__ + item.attrs.src })
        }
      }
      document.getElementsByTagName(item.parentTagName)[0].appendChild(childNode);
    }
  })();
  </script>
  <script type="module">try{import("_").catch(()=>1);}catch(e){}window.__vite_is_dynamic_import_support=true;</script>
  <script type="module">!function(){if(window.__vite_is_dynamic_import_support)return;console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=window.__dynamic_base__+e.src,n.onload=function(){System.import(window.__dynamic_base__+document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
</head>

<body>
  <div id="app"></div>
  
  <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
  <script nomodule id="vite-legacy-polyfill" src="/__dynamic_base__/assets/polyfills-legacy.c9aac887.js"></script>
  <script nomodule id="vite-legacy-entry" data-src="/__dynamic_base__/assets/index-legacy.7573112a.js">System.import(window.__dynamic_base__+document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
</body>

</html>
  1. the pwa relevant generateSW, sw file are generated with prefix /__dynamic_base__/ which configured using vite.config.ts:
  base: process.env.NODE_ENV === "production" ? "/__dynamic_base__/" : "/",

image

  1. but after pwa preloaded all the relevant resources, pwa does not work with cached resources. found that all the resources cached by pwa with names like:
    image

it cause the pwa cache failed. when i try to cmd+r to load the page secondly.

image

@zhoujinfu
Copy link
Author

Maybe we should make dynamic_base work with pwa base which will using the vite base internally by default. see https://github.com/antfu/vite-plugin-pwa/blob/main/src/options.ts#L52 for more info.

@zhoujinfu
Copy link
Author 

 /**
   * The precacheAndRoute() method efficiently caches and responds to
   * requests for URLs in the manifest.
   * See https://goo.gl/S9QRab
   */

  workbox.precacheAndRoute([{
    "url": "assets/About-legacy.dbc6d110.js",
    "revision": null
  }, {
    "url": "assets/About.33979b2a.css",
    "revision": null
  }, {
    "url": "assets/About.e66d53d5.js",
    "revision": null
  }, {
    "url": "assets/en-legacy.619c3de7.js",
    "revision": null
  }, {
    "url": "assets/en.44253359.js",
    "revision": null
  }, {
    "url": "assets/Home-legacy.99ddbe6a.js",
    "revision": null
  }, {
    "url": "assets/Home.4c818565.js",
    "revision": null
  }, {
    "url": "assets/index-legacy.7573112a.js",
    "revision": null
  }, {
    "url": "assets/index.1225a17d.css",
    "revision": null
  }, {
    "url": "assets/index.471d4ef9.js",
    "revision": null
  }, {
    "url": "assets/polyfills-legacy.c9aac887.js",
    "revision": null
  }, {
    "url": "assets/zh-cn-legacy.b2112d92.js",
    "revision": null
  }, {
    "url": "assets/zh-cn.08710dfd.js",
    "revision": null
  }, {
    "url": "index.html",
    "revision": "276616a31a95eafa39fefd12afcda1cc"
  }, {
    "url": "registerSW.js",
    "revision": "042db6f1e2458b14f0394bfb9de65a5c"
  }, {
    "url": "manifest.webmanifest",
    "revision": "8c4f6e7053426ecf6e30816264128994"
  }], {});
  workbox.cleanupOutdatedCaches();
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html")));

In production, All the resources will uploaded to cdn except the sw.js, because of the service-worker samesite policy. So we should make sure the sw.js is hosted on site host, the index.html is also hosted on host because we always type the host URL to visit the page(index.html) without pwa preloaded. But we should cache the hosted index.html using pwa for offline AppShell.

@zhoujinfu
Copy link
Author

zhoujinfu commented May 6, 2022 •
edited
Loading

I have got a workaround way to work with this two plugins: zhoujinfu@89d4a90

after pnpm build, we start a local python server as a mock cdn server using cd dist && python3 server.py, and then pnpm preview.

  1. change the manifest, registerSW.js's start_url and scope to:

registerSW.js:

if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js', { scope: '/' })})}

manifest.webmanifest:

{"name":"demo","short_name":"demo","start_url":"http://localhost:4173/","display":"standalone","background_color":"#ffffff","lang":"en","scope":"http://localhost:4173/"}
  1. update resource manifest (sw.js)manually:
workbox.precacheAndRoute([{
    "url": "http://localhost:8080/assets/About-legacy.6d7b2345.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/About.1b3423d6.css",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/About.a6f3e50f.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/en-legacy.619c3de7.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/en.44253359.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/Home-legacy.bc056725.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/Home.25d9b1cc.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/index-legacy.2a26e38c.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/index.9f25452d.css",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/index.def31ac5.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/polyfills-legacy.c9aac887.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/zh-cn-legacy.b2112d92.js",
    "revision": null
  }, {
    "url": "http://localhost:8080/assets/zh-cn.08710dfd.js",
    "revision": null
  }, {
    "url": "http://localhost:4173/index.html",
    "revision": "7a2c4fe6ed13f88467f25a3a8d84ed54"
  }, {
    "url": "http://localhost:8080/registerSW.js",
    "revision": "5118d2ce258f837e94157f51c5e6f67c"
  }, {
    "url": "http://localhost:8080/manifest.webmanifest",
    "revision": "85ea9835061b0b220d6dd437d7a56be3"
  }], {});
  workbox.cleanupOutdatedCaches();
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("http://localhost:4173/index.html")));
  1. visit http://localhost:4173/

And then the dynamic_base work well with pwa both with/without preload. Hope this may help for u.

@chenxch
Copy link
Owner

chenxch commented May 6, 2022

What if localhost:8080 is a variable like
"url": window.__dynamic_base__ +"/assets/polyfills-legacy.c9aac887.js",does it work

@zhoujinfu
Copy link
Author

What if localhost:8080 is a variable like "url": window.__dynamic_base__ +"/assets/polyfills-legacy.c9aac887.js",does it work

No, i think it will not work, because the sw.js run in a worker thread without window.

@chenxch
Copy link
Owner

chenxch commented May 6, 2022

What if localhost:8080 is a variable like "url": window.__dynamic_base__ +"/assets/polyfills-legacy.c9aac887.js",does it work

No, i think it will not work, because the sw.js run in a worker thread without window.

I probably know what the goal is, when I'm currently having problems hacking into _generateSW in vite-plugin-pwa.

@chenxch chenxch closed this as completed Jun 21, 2022
@chenxch chenxch reopened this Jun 23, 2022
@chenxch
Copy link
Owner

chenxch commented Jun 23, 2022

Maybe I have a solution, but I still need to try it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zhoujinfu @chenxch