/* https://github.com/reyemtm/pwa-maps/archive/master.zip unzip and then open this folder in with VS Code CTRL + '`' to open the terminal */ npm install npm run build npm start
//CTRL + SHIFT + i then Audit Tab
{ "name": "Clear Creek Trail Map", "short_name": "CC Maps", "scope": "/", "start_url": "/", "icons": [ { "src": "/img/trails512.png", "type": "image/png", "sizes": "512x512" } ], "background_color": "#d8e8c8", "theme_color": "#d8e8c8", "display": "standalone" }
/* Create an empty sw.js file in the root of 'public'. In your index.html you will already see the following code in the head of the document. */ if ('serviceWorker' in navigator) { navigator.serviceWorker .register('/sw.js') .then(function () { console.log("Service Worker Registered"); }); }
npm run cache /* this will simply copy a prepared sw.js file to the public folder */
/* the cache is added after the install event */ 6 self.addEventListener("install", function(event) { /* requests are fulfilled with the cache, then the network */ 38 self.addEventListener("fetch", function(event) { /* when a new sw.js is activated the cache is refreshed */ 141 self.addEventListener("activate", function(event) {
npm install workbox-cli # this is already installed npm run workbox-wizard # workbox wizard npm run workbox-cache # workbox generateSW workbox-config.js #you could use the native cli commands if installed globally
npm run copy /* this will copy the OpenMapTiles data, the basemap style and the trails GeoJSON data to the public folder */
var map = new mapboxgl.Map({ container: "map", style: "bright.json", hash: true, center: [-82.58844, 39.5933], zoom: 6 }); /* This will change your basemap, but will not add the trails layer. If we have time we will do that manually, otherwise you can work on this on your own.*/
npm run deploy /* login choose the public folder when asked */
npm run workbox-cache npm run deploy