Как сделать из веб-сайта веб-приложение (а главное — зачем?)

В своем блоге индийский разработчик Шашват Верма (Shashwat Verma) рассказал, как преобразовать веб-сайт или веб-страницу в прогрессивное веб-приложение (PWA). В качестве примера программист создал PWA из простой классической игры Simon на основе HTML5 (вот ее гитхаб-репозиторий), которую после преобразования можно устанавливать в формате веб-приложения на устройства Android и iOS.

Что такое PWA?

Прогрессивное веб-приложение (PWA) — это набор методов разработки мобильных веб-приложений, которые выглядят как нативные. С использованием веб-стека (JS, HTML и CSS) прогрессивные веб-приложения сочетают в себе свойства нативного приложения и функционал браузера.

Зачем все это нужно? Если коротко, то PWA — это веб-приложение с преимуществами нативного приложения: после установки на главном экране устройства появится иконка приложения, которая ведет на веб-сайт. Среди главных особенностей — PWA устанавливается на пользовательские устройства и работает в автономном режиме. По сути, PWA помогает попасть к пользователю в обход официальных магазинов приложений, а разрабатывать его быстрее и дешевле, чем нативное мобильное приложение.

Что нужно сделать для преобразования веб-сайта / веб-страницы в PWA

• Создайте файл сервис-воркера;
• обновите основной документ, чтобы проверить, поддерживается ли этот функционал;
• создайте manifest.json для метаданных приложения;
• используйте инструменты разработчика Chrome для отладки приложения.

1. Сервис-воркер

Создайте файл service-worker.js в корневом каталоге проекта. Важно поместить его в корневой каталог, чтобы статический контент хранился в кэш-хранилище. В кэш-памяти можно хранить практически любые медиафайлы, например, mp3, mp4, видео, а также статические файлы HTML, CSS и JS.

// Installing service worker
const CACHE_NAME  = 'Simon-game';

/* Add relative URL of all the static content you want to store in
 * cache storage (this will help us use our app offline)*/
let resourcesToCache = ["./", "./img/game.png", "./game.js", "./styles.css"];

self.addEventListener("install", e=>{
    e.waitUntil(
        caches.open(CACHE_NAME).then(cache =>{
            return cache.addAll(resourcesToCache);
        })
    );
});

ПРИМЕЧАНИЕ: Замените CACHE_NAME на имя вашего приложения.

Добавьте еще двух слушателей событий.

// Cache and return requests
self.addEventListener("fetch", e=>{
    e.respondWith(
        caches.match(e.request).then(response=>{
            return response || fetch(e.request);
        })
    );
});

// Update a service worker
const cacheWhitelist = ['Simon-game'];
self.addEventListener('activate', event => {
    event.waitUntil(
      caches.keys().then(cacheNames => {
        return Promise.all(
          cacheNames.map(cacheName => {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });

ПРИМЕЧАНИЕ: А здесь замените cacheWhiteList на имя вашего приложения.

2. Проверьте доступность (обновите index.html)

В случае статического веб-сайта — обновите основной HTML-документ, чтобы проверить доступность сервис-воркеров. После чего зарегистрируйте приложение с помощью service-worker.js файла.

<script>
   if('serviceWorker' in navigator){
     navigator.serviceWorker.register('/service-worker.js');
   } else {
     console.log("Service worker is not supported");
   }
 </script>

3. Создайте файл manifest.json

Создайте manifest.json файл, чтобы связать его с основным HTML-документом.

<link rel="manifest" href="manifest.json">

Теперь этот файл содержит метаданные о приложении, такие как имя приложения, ссылки на иконки, URL-адрес и т.п.

{
    "name": "Simon Game",
    "short_name": "Simon Game",
    "start_url": "/",
    "background_color": "#FFDCB5",
    "theme_color": "#1E003D",
    "icons": [
        {
            "src": "img/512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "img/192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable any"
        }
    ],
    "display": "standalone",
    "orientation":"portrait"
}

Вставьте приведенный выше код в манифест, после чего измените сведения о приложении. Можно ссылаться на одну иконку или использовать иконки разных разрешений, так как устройства, на которые устанавливается приложение, различаются по размеру экрана.

4. Используйте инструменты разработчика для отладки

Откройте Chrome DevTools (ctrl+shirt+i) и нажмите на вкладку Application, чтобы проверить, обнаружены ли браузером сервис-воркер и файл манифеста.

Здесь вы сможете увидеть логотип и название приложения.

Chrome DevTools

Background_color устанавливает цвет заставки; а Theme_color показывает цвет панели уведомлений.

Splash screen

Чтобы проверить, соответствует ли ваше приложение стандарту PWA, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report.

Generate report

Это также поможет определить моменты, о которых вы могли забыть. Например, добавить строку для пользователей iPhone / Apple.

<link rel="apple-touch-icon" href="img/game.png"/>

Это все шаги, которые помогут успешно преобразовать веб-сайт / игру в PWA. Остается только установить веб-приложение на устройство.

Как установить  PWA?

В Chrome нажмите на значок добавления в строке URL-адреса, который предлагает установить приложение на устройство.

URL bar

На мобильном устройстве вы получите сообщение (Chrome).

Chrome prompt

Если сообщение не придет, то нажмите на 3 точки в правом верхнем углу и выберите опцию Install app.

Install app

Победа: вы великолепны, а PWA с легкостью устанавливается на Android.

PWA on Android

Текст перевела Диана Саламатова.