Не знаете, где приземлиться? Не можете выбрать между наклонными башнями и полярными пиками? Как насчет PWA (прогрессивного веб-приложения), которое работает в автономном режиме, и когда вы нажимаете кнопку, оно отображает указанное местоположение на карте Fornite.
Давайте сначала создадим несколько пустых файлов. Создайте index.html, app.js, sw.js, styles.css и manifest.json файлы.
Первым делом давайте поместим некоторую структуру на нашу индексную страницу:
Круто, теперь пора сделать его немного лучше.
Гораздо лучше, пора заставить кнопку действительно делать что-нибудь полезное.
Отлично, теперь это будет PWA, то есть на мобильном устройстве вам будет предложено сделать его приложением при первом посещении страницы. Приложение без значка вдвое хуже. Так что сделайте значок, неважно, что это за значок, главное, чтобы его имя былоicon-192.png. Теперь нам нужно определить manifest.json.
Хороший. На данный момент страница не является PWA. Он даже не будет работать в автономном режиме. Вот где пригодятся ServiceWorkers. Это действительно просто: вы просто регистрируете его, а затем говорите ему, какие файлы он должен хранить, чтобы работать в автономном режиме. Добавьте следующее в sw.js
Последний штрих, мы должны зарегистрировать рабочего. Добавьте следующее в конец app.js
Вот и все. Запустите все это на своем любимом сервере, посетите страницу на своем мобильном телефоне, должно появиться приглашение «загрузить» его, и на вашем телефоне должен появиться значок приложения. С этого момента сервер вам больше не нужен. Приложение открывает браузер, и загружается контент.
Полный код можно посмотреть здесь: https://github.com/zprima/fortnite-jump-pwa
