[Bug] PWA template fails in lighthouse PWA audit

[seantanly]

Lighthouse fails with

Audit error: Required Manifest gatherer encountered an error: Unable to retrieve manifest at https://xxxx/statics/manifest.json.

The problem lies with the configuration of sw-precache-webpack-plugin. Simply remove the line containing staticFileGlobs to make the precaching work for all emitted files rather than just for js,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.

quasar-template-pwa/template/build/webpack.prod.conf.js

Line 94 in 481bdb5

staticFileGlobs: ['dist/**/*.{js,html,css,woff,svg}'],

[rstoenescu]

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

[seantanly]

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

[seantanly]

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.

[a47ae]

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

[seantanly]

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.

[seantanly]

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

[rstoenescu]

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.