Search and Apply Lighthouse suggestions

dwyl / elm-pwa-example

A basic example Elm app with routing, content creation and offline support. 100% Lighthouse Score. Lightning fast and maintainable.

https://github.com/dwyl/app/issues/254

GNU General Public License v2.0

32 stars 0 forks source link

Search and Apply Lighthouse suggestions #7

Open SimonLab opened 4 years ago

SimonLab commented 4 years ago

The PWA tests with Lighthouse return the following report:

The main issue is linked to the start_url. I think this might be due to the way Github pages host the website, see #3

SimonLab commented 4 years ago

Looking at how to setup Github pages for PWA https://gist.github.com/kosamari/7c5d1e8449b2fbc97d372675f16b566e

nelsonic commented 4 years ago

@SimonLab any reason you don't just run a basic node.js http-server on Heroku?

npm init -y
npm install http-server --save

See: https://github.com/dwyl/learn-heroku/blob/8a6f11d97c7abe88238384824fb3602bca1cfc98/package.json#L12-L13

That's the "hello world" of node.js apps and it gives you a full http (static site) server which will allow you to ship the elm app to heroku.

SimonLab commented 4 years ago

Better now!

The main issue was the trailing "/" in the start_url. The link above was useful

@nelsonic yes I think the next step might be to try with Heroku and a basic nodejs server :+1:

SimonLab commented 4 years ago

The app is now reloading offline: https://dwyl.github.io/elm-pwa-example/

SimonLab commented 4 years ago

Now that the application is hosted on Heroku it is simpler to debug and add changes (see #3) Running an audit on the heroku application returned the following error for the PWA section:

[x] Redirect http to https. Ideally we would do this via Heroku as I want to keep the backend simple. At the moment we are just running npm run http-server. Otherwise maybe http-server has an option to redirect to https :thinking:
[x] Add a 512*512 image for splash screen. I'll resize the current image and add it to the list of images in the manifest.json file
[x] Add a theme-color to the manifest.json
[x] Add the apple touch icon to index.html <link rel="apple-touch-icon" href="apple-touch-icon.png">

SimonLab commented 4 years ago

The only PWA remaining warning from the audit is the redirect to https:

We might need a more customisable backend server, however for testing the pwa app http-server is good enough.

Making sure that the page is served with https I manage to install the application on firefox and chrome on mobile:

On Chrome we can see the theme-color displayed too.

nelsonic commented 4 years ago

Looking great @SimonLab :shipit:

SimonLab commented 4 years ago

Using Nginx instead of the npm http-server allow us to configure the server, see https://github.com/dwyl/elm-pwa-example/issues/3#issuecomment-571941816

It is really quick to deploy on Heroku and we have now all the PWA requirements valid:

You can test the app on https://dwyl-pwa-app.herokuapp.com/

nelsonic commented 4 years ago

@SimonLab please document the steps you have taken in the README.md so others can learn. 👌