Introductions

Your GIS origin story in two minutes or less...

Goals

Quick Overview of PWAs

Create a Basic Web Map

Turn this Map into a PWA

Make the PWA Installable

Allow the PWA to be used Offline

Host & Install the PWA

Time Allowing

Add a Vector Tiles Basemap

Add Overlay Layers

What is a PWA

Set of components to allow a website to behave more like a native application

Benefits

Native App Behaviors

Custom App Colors

Caching & Offline Support

*Push Notifications

Multi-Platform

Android

Chrome

Chromebooks

iOS

Windows Store

Petlove PWA

Why a PWA Map?

• Cached Assets for Landing Pages & Map UI
• Offline Maps for Field Use - No App Required
• User Convenience - App Drawer/Homescreen

Example PWA Map

https://pwa-trails.netlify.com

Code Break

Step 1. Install

/*
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

Step 2. Test

//CTRL + SHIFT + i then Audit Tab

• Progressive Web App Audit in Chrome
• Check 'Offline' in the Application Tab

Errors!!

• No manifest
• No service worker
• App does not work offline

Goals

Quick Overview of PWAs

Create a Basic Web Map

Turn this Map into a PWA

Make the PWA Installable

Allow the PWA to be used Offline

Host & Install the PWA

Let's Look at the Elements of a PWA

• manifest.json
• service-worker.js
• Mobile First Design
• Progressive Enhancement

manifest.json

{
  "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"
}

Test Again

• Passes manifest tests
• No service-worker
• No offline support

Service workers

...intercept and handle network requests, including programmatically managing a cache of responses.

sw.js

/* 
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.
*/

<!--register the service worker-->
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw.js')
    .then(function () {
      console.log("Service Worker Registered");
    });
}

Success!

• Installable
• PWA optimized
• Still no offline support
• No service worker caching

Adding Offline Cache

https://css-tricks.com/serviceworker-for-offline/

npm run cache 
/*
this will simply copy a prepared sw.js file to the public folder 
*/

Examining the Events

/* 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) {

Service Worker Test

• Installable
• PWA optimized
• Offline support
• But that's not much of a map...
• And that's a lot of code

Workbox

Automate the creation of the service worker

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

Creating the Basemap

• Use raw vector tile files
• Use GeoJSON for any additional map layers

OpenMapTiles

1. Download a prepared OpenMapTiles extract
2. Create a GeoJSON to clip the extract
3. Install the mbtiles-extracts Node JS Package
4. Edit it to allow for not passing in a property name
5. Unpack raw vector tiles from mbtiles
   • https://www.npmjs.com/package/mbtiles2ungzpbf
6. Result is hundreds of small files which must be cached

Extract Sizes

Cleveland Metro Area - 17 MB

Cuyahoga County - 6 MB

City of Columbus - 7.5 MB

OVRDC Region (12 Counties) - 16 MB

Copy the Basemap

npm run copy
/*
this will copy the OpenMapTiles data, the basemap style and the trails GeoJSON data to the public folder
*/

Edit index.html

Replace the blank style with "bright.json"

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.*/

Publish to Netlify

Delete the .netlify folder!!

npm run deploy

/*
login
choose the public folder when asked
*/

Final Notes

Once your site is live, replace http://127.0.0.1 in your bright.json file with the secure url of your new site

npm run workbox-cache

npm run deploy

Goals

Quick Overview of PWAs

Create a Basic Web Map

Turn this Map into a PWA

Make the PWA Installable

Allow the PWA to be used Offline

Host & Install the PWA

Thanks

Malcolm Meyer

@getbounds