Demo code on the KPN PWA-workshop
- See the steps in the presentation. The code is built in the following order:
- Create
index.html
and add first content. - Create
css/style.css
and add first content, just to make it look nice.- Set some fonts.
- Do browser resets.
- Layout the navbar and main menu.
- Add styling for the cards. Expand
style.css
with the appropriate styles. Again, no functionality, just layout. - Add JavaScript data (in real life this would come from a database).
- Add functionality to add the data to the DOM.
- Add images. We used a directory
images
with photos of coffees. - Create a PWA by adding a
manifest.json
file. - Update
index.html
with a link to the manifest file. - Add a Service Worker (sw) and let it add static items to the cache upon installation.
- Expand the SW to get the items from the cache when it is loaded. This way our PWA can work offline!
- Register the Service Worker in
app.js
Questions? email me at [email protected].
Cheers - Peter.