Fortnite — ‘Where we land?’ PWA

Don’t know where to land? Can’t decide between Tilted Towers or Polar Peaks? How about an PWA (Progressive Web App) that works offline, and when you press a button it will display a named location on the Fornite map.

Photo by Yuliya Kosolapova on Unsplash

Let’s first make some empty files. Create index.html, app.js, sw.js, styles.css and manifest.json files.

First thing first, lets put some structure into our index page:

Cool, now it’s time to make it look a little nicer.

Much better, time to make the button actually do something useful.

Excellent, now this will be a PWA, meaning, on mobile it will prompt you to make it an app, when you first visit the page. An app is half that good without and icon. So make an icon, don’t care what it is, as long as its name isicon-192.png . Now we have to define the manifest.json .

Good. As of now the page is not a PWA. It won’t even work offline. This is where ServiceWorkers come in handy. It’s really easy, you just register one, and then you tell him, which files he has to store in order to make offline work. Add the following in sw.js

Final touch, we must register the worker. Add the following to the bottom of app.js

That’s it. Run the whole thing in you favourite server, visit the page on your mobile phone, there should be a prompt to “download” it, and you should have an app icon on your phone. From this point forward, you no longer need the server. The app opens up the browser, and the content loads.