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.
Let’s first make some empty files. Create
index.html, app.js, sw.js, styles.css and
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 is
icon-192.png . Now we have to define the
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
Final touch, we must register the worker. Add the following to the bottom of
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.
Check the full code here: https://github.com/zprima/fortnite-jump-pwa