lavas-project / lavas

基于 Vue 的 PWA 解决方案,帮助开发者快速搭建 PWA 应用,解决接入 PWA 的各种问题
https://lavas.baidu.com
MIT License
1.97k stars 116 forks source link

lavas build之后,precache-manifest文件无法加载 #210

Closed GlacierXX closed 5 years ago

GlacierXX commented 5 years ago

ssr appshell模板创建项目,build之后lavas start启动项目,precache-manifest文件无法加载,导致返回index.html,从而报错

GlacierXX commented 5 years ago

wechatimg6 wechatimg7

easonyq commented 5 years ago

您好。我有几个问题:

  1. 你执行 lavas build 的时候,有没有警告或者报错?
  2. 你执行 lavas start 的时候,有没有 cd dist?还是直接在根目录就 lavas start了?

我这边尝试了 appshell 模板配上 ssr: true,生成的 dist 目录是包含 precache-manifest.xxxxx.js 的,你应该是这个文件没生成,才导致了问题。

image

GlacierXX commented 5 years ago

@easonyq 你好

  1. lavas build并无报错;
  2. build之后进入dist目录,npm install之后lavas start;
GlacierXX commented 5 years ago

@easonyq image

GlacierXX commented 5 years ago

@easonyq 浏览器source中能看到precache-manifest这个文件,但是请求返回的是index.html image

easonyq commented 5 years ago

看起来你的 Service Worker 及相关的文件都生成无误。现在的问题是访问这个文件却返回了不正确的结果,我有一个猜测,你试试看是否可行:

  1. 先注释掉 dist/service-worker.js 中的 workbox.routing.registerNavigationRoute('/appshell'); 这句。我怀疑有可能是这句导致的。步骤: 通过浏览器 ungister Service Worker -> 注释 -> 再刷新页面即可

  2. 如果有效,那么解决方案是在 lavas.config.js 中找到 serviceWorker 配置项,设置 disableGenerateNavigationRoutetrue。这样保证最终生成的 dist/service-worker.js 不存在 workbox.routing.registerNavigationRoute('/appshell'); 这句。

    image

  3. 如果无效,在注释掉 registerNavigationRoute 这句之后,通过浏览器的地址栏输入地址访问这个文件(而不是Dev Tools中),看看返回的是什么内容。

GlacierXX commented 5 years ago

@easonyq

  1. 按照步骤1执行,注释掉代码之后,依然报错 image
  2. 通过地址栏直接访问的结果是错误页面 image
easonyq commented 5 years ago

Service Worker 是会自动安装在浏览器内的,因此每次更新必须先注销掉老的,才会安装新的。你可以在 Chrome Dev Tools 里面找到 Application -> Service Worker 确认是否是最新的

我本地把那句 registerNavigationRoute 注释掉并更新后,这个文件是可以访问的哦~

image

GlacierXX commented 5 years ago

@easonyq 我确认了下,service worker是最新的,我也将所有其他的unregister掉了,但是还是不行,这个文件还是访问不到,也点了clear storage image 换了一个从来没访问过这个项目的FireFox浏览器访问也是报同样的错误 image 我对脚手架生成的appShell模板也没有改动过代码

GlacierXX commented 5 years ago

@easonyq 抱歉,并非没有任何改动,根据codelib中的教程,将express服务器换成了koa,我刚用又创建了一个工程默认express是没有问题的,koa使用的版本是2.5.3 image image

easonyq commented 5 years ago

哦,你的意思是说,使用 koa 服务器会有这个问题,express 正常对吧?那我尝试一下。

不好意思给您带来了很多麻烦~

easonyq commented 5 years ago

已经修复,请更新 lavas-core-vue@1.2.2 即可解决问题,多谢反馈。

GlacierXX commented 5 years ago

@easonyq 好的 多谢