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.

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

优化网页 Performance、Progressive、Accessibility、Best Practices 等 #24

Open
nicejade opened this Issue May 3, 2018 · 1 comment

Comments

Projects
None yet
1 participant
@nicejade
Copy link
Owner

nicejade commented May 3, 2018

从使用 Lighthouse 给应用跑分情形来看,在 PerformanceProgressiveAccessibilityBest Practices 分别得分 48、64、67、88;这需要努力修缮一把。

@nicejade

This comment has been minimized.

Copy link
Owner

nicejade commented May 5, 2018

PWA, 即:Progressive Web App (渐进式Web应用程序);它的存在,使得在网络上提供惊人用户体验的新方式,它为构建高质量的渐进式 Web 应用程序,提供了令人难以置信的优势,可以轻松取悦用户,增加参与度并增加转化次数。所以这已经成为了现代化 Web 应用程序必做工作。本应用对 PWA 的支持,选择参考了 vuejs-templates/pwa,其中用到 sw-precache-webpack-plugin 插件协助生成 service-worker.js。但在部署到服务器之后,屡次报有如下错误,令人百思不得其解:

The script has an unsupported MIME type ('text/plain').
Failed to load resource: net::ERR_INSECURE_RESPONSE

即便已经将 service-worker.js 放置在根目录之下,应用也支持 HTTPS 等等 serviceWorker 必须条件,且在 node server 层提供了对应用访问 service-worker.js 支持,但屡次尝试,报错依然存在。

后来仔细看了请求发现,地址栏访问 service-worker.js 虽没有问题;但在访问 https://nicelinks.site/ 时候,所发起对 service-worker.js 的请求,竟是失败的;而在 node server 层肯定是 Okay,猛然醒悟,猜测问题可能出现在 nginx 层;立刻查究 nginx 对应用的配置文件,发现果然是有问题的 ——没有针对 js 文件提供映射,😪

location ~ \.(htm|html|gif|jpg|jpeg|png|bmp|ico|css|txt)$ {
  root /data/site/nicelinks/public;
  index index.html;
  try_files $uri $uri/ =404;
  expires      7d;
}

果然改为如下这样,重启 nginx ( nginx -s reload ),问题迎刃而解;

location ~ \.(htm|html|gif|jpg|jpeg|png|bmp|ico|css|txt|js)$ {
  root /data/site/nicelinks/public;
  index index.html;
  try_files $uri $uri/ =404;
  expires      7d;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment