Closed seantanly closed 7 years ago
Lighthouse report needs to be run on a production build (on a server to get 100 on each category), not on a dev build.
@rstoenescu The result I got is tested with quasar build
. Am I missing something?
The steps taken with a fresh app.
quasar init pwa test-app
cd test-app
npm install
quasar build
Then proceeded to serve the content within /dist
via nginx with SSL cert configured and tested with lighthouse via Chrome > audits tab. Fails PWA with the error mentioned above.
Removing the config line mentioned and repeating quasar build
achieves 100 on PWA tab.
I can not confirm this error, I set up two versions of the PWA template, one with the default config and one with the staticFileGlobs
config removed. But both passed the lighthouse check with about 97/100 on a nginx configured with letsencrypt.
nginx config:
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
root /var/www/pwa1/dist;
index index.html index.htm;
server_name pwa1.<your-domain>;
location / {
try_files $uri $uri/ =404;
}
ssl_dhparam /etc/ssl/certs/dhparam.pem;
ssl_certificate /etc/letsencrypt/live/pwa1.<your-domain>/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/pwa1.<your-domain>/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
}
server {
listen 80;
listen [::]:80;
server_name pwa1.<your-domain>;
return 301 https://$server_name$request_uri;
}
Also on the Github directory for sw-precache staticfileglobs it says
You'll almost always want to specify something for this.
So for me it doesn't look like a good idea to remove the line?!
We should also be referencing the README from sw-precache-webpack-plugin
since we're using the plugin on top of sw-precache
.
https://github.com/goldhand/sw-precache-webpack-plugin#configuration
staticFileGlobs: [Array
] - Omit this to allow the plugin to cache all your bundles' emitted assets. If mergeStaticsConfig=true: this value will be merged with your bundles' emitted assets, otherwise this value is just passed to sw-precache and emitted assets won't be included. Note that all configuration options are optional. SWPrecacheWebpackPlugin will by default use all your assets emitted by webpack's compiler for the staticFileGlobs parameter and your webpack config's {[output.path + '/']: output.publicPath} as the stripPrefixMulti parameter. This behavior is probably what you want, all your webpack assets will be cached by your generated service worker. Just don't pass any arguments when you initialize this plugin, and let this plugin handle generating your sw-precache configuration.
I believe my problem with the Chrome Audit (PWA - lighthouse) stems from the config staticFileGlobs
not including json, which caused the manifest.json
to be not sw-precached, and that is probably causing the failing messages for me. When I added json
to the config, the audit for PWA passed with 100.
Looking around the web, it seems that manifest.json
is a requirement for offline support to work, which offline support is a requisite for PWA.
https://www.polymer-project.org/2.0/toolbox/service-worker https://medium.com/google-developer-experts/add-offline-support-to-any-web-app-c20edc4bea0e
Pushed json along with some more extensions to the template. Glad it works now, although it's pretty peculiar why for some it works and for some it didn't.
Lighthouse fails with
The problem lies with the configuration of
sw-precache-webpack-plugin
. Simply remove the line containingstaticFileGlobs
to make the precaching work for all emitted files rather than just forjs,html,css,woff,svg
solves the problem.Out of the box, most of the time we would want the precaching to cache all assets for the PWA to work offline. Removing the
staticFileGlobs
line will achieve that.https://github.com/quasarframework/quasar-template-pwa/blob/481bdb52ce6a7f027cc8f18b8fc9282edd02cfdc/template/build/webpack.prod.conf.js#L94