Common Computer Science References
At the end of this lesson, you will be able to:
make a Progressive Web App (PWA)
it would be really nice if we could make our websites downloadable
like an iOS or Android app!
go over what a PWA is:
you can use "Lighthouse" right from Chrome
go over adding:
so what is new:
change images to svg format ⇨ much smaller size and scalable
added a service worker, sw.js in root
in index.html:
added theme-color
added canonical
changed the Google MDL links
in manifest.webmanifest:
added scope
changed start_url
added description
added a part to the start of our ./js/script.js file
it checkes the sw.js file
so what do you need to change each time:
README.md ⇨ change GitHub repo as normal
index.html ⇨ canonical and manifest link ref
js/script.js ⇨ servie worker name
manifest.webmanifest ⇨ scope and start_url
see "PWA chanes.pdf" below
go over lighthouse, to confirm you have everything working correctly
not for performance, you need to get over 90%, but you will most likely not get 100% due to Google MDL!
use Chrome Incognito, is best
this will NOT work on the "class web server"; you must publish to GitHub Pages
take any of your repos from GitHub, from Unit 5 where you actually have JS code doing something!) and "copy" it, making a copy for yourself
convert it to a PWA
run it through Lighthouse to ensure you can change anything that you have control over
REMEMBER, there is no concept of PWA for PHP!
take a 2nd JS repo of yours and "copy" it and make it a PWA
run it through Lighthouse to ensure you can change anything that you have control over