Earlier this week I launched the Philly Code Camp Progressive Web App. I explained how the application works from a high level but today I want to go over how the service worker is structured.
To be a progressive web app (PWA) a website must be secure, have a valid web manifest file and most importantly register a service worker. Using HTTPS and having a valid web manifest file a rather simple features that can be added in an hour to in most cases.
But a good service worker, that’s a whole different thing.
Recently I have been launching a cadre of new simple progressive web apps just to show how simple it is to make a PWA. But none of these apps, so far, have really used a serviceWorker to its full capabilities.
The Philly Code Camp service worker starts showing how you can use a service worker to build a rich front end user experience with nothing but web technologies.
Check out the sibling article on how the PWA Add to Homescreen/Install experience works
const version = "1.01", preCache = "PRECACHE-" + version, dynamicCache = "DYNAMIC-" + version, cacheList = [ "/", "img/phillydotnet.png", "js/app/app.js", "js/app/sessions.js", "js/libs/localforage.min.js", "js/libs/mustache.min.js", "js/libs/utils.js", "css/libs/bootstrap.min.css", "css/libs/fontawesome-all.css", "css/app/site.css", "css/webfonts/fa-solid-900.woff2", "api/philly-cc-schedule.json", "html/app-shell.html", "templates/session-list-item.html", "templates/session.html" ];
The next two variable declarations are the names of our caches, a pre-cache and a dynamic cache. Both have their core name but I also append the version value. This makes managing caches much simpler as you will see when I review the activate event.
The last constant is an array of the URLs that should be pre-cached when the service worker is first registered. For the Philly Code Camp site this is all of the asset dependencies like JavaScript, CSS and images.
I cacheed the home page and three template HTML files. I’ll explain those files later in the article.
#code #visual studio code
