[Bug] PWA template fails in lighthouse PWA audit about quasar-template-pwa HOT 7 CLOSED

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.

from quasar-template-pwa.

Lighthouse report needs to be run on a production build (on a server to get 100 on each category), not on a dev build.

from quasar-template-pwa.

@rstoenescu The result I got is tested with quasar build. Am I missing something?

from quasar-template-pwa.

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.

from quasar-template-pwa.

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?!

from quasar-template-pwa.

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.

from quasar-template-pwa.

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

from quasar-template-pwa.