Прогрессивные веб-приложения для начинающих

Недавно мир приложений разделился на две категории: появились приложения для устройств Android и iOS. Возможно, многие слышали о прогрессивных веб-приложениях (PWA), однако не знакомы с концепцией их работы.

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

Введение

Прогрессивное веб-приложение — это веб-сайт, переделанный в приложение. Вместо написания кода на Java, Objective-C или более поздних языках мобильного программирования можно написать код для приложения с html-файлами, таблицами стилей и сценариями, как для веб-сайта.

Зачем создавать PWA вместо нативного приложения? Во-первых, после выпуска PWA можно постоянно изменять без необходимости перевыпуска приложения. Поскольку весь код размещен на сервере и не является частью APK/IPA, изменения происходят в режиме реального времени. Помимо этого, с PWA можно работать в режиме offline в случае проблем с сетью.

И самое главное, пользователи могут добавить PWA на главный экран. Нативные приложения не обладают подобной функцией.

Компоненты

PWA создается из стандартного набора компонентов:

• Манифест веб-приложения
• Service worker
• Install Experience
• HTTPS
• Создание APK
• Lighthouse audit

Манифест

Это файл конфигурации (.JSON), с помощью которого можно изменять настройки PWA и его внешний вид для пользователя. Пример одного из них:

{
  "name": "My PWA",
  "short_name": "PWA",
  "icons": [{
    "src": "your_icon.png",
      "sizes": "128x128",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

В манифесте необходимо указать название или короткое название ключа. На главном экране и в панели запуска отображается короткое название. Просто название используется в разделе настройки «Добавить на главный экран» (или в запросе установки приложения).

Дисплей может обладать четырьмя значениями:

• fullscreen — при открытии приложение занимает весь экран;
• standalone — приложение выглядит как нативное, скрывая элементы браузера;
• minimal-ui — предоставляет некоторые элементы управления браузером (поддерживается только на мобильной версии Chrome);
• browser—видны все элементы браузера.

Также можно установить ориентацию приложения и область видимости страниц.

Не забудьте добавить манифест в главный html-файл, разместив следующий метатег в теге head:

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

Service Worker

Service worker — это компонент, работающий в фоновом режиме сайта в браузере. Он обладает широким набором функций, включая push-уведомления, кэширование ассетов, предоставление их для работы в режиме offline, а также возможность откладывать действия до появления стабильного подключения к Интернету. 

Обычно код service worker сохраняется в файле sw.js.

✋ Расположение service worker играет важную роль, поскольку он может обращаться только к тем файлам, которые находятся с ним в одном каталоге или подкаталоге.

Жизненный цикл service worker состоит из следующих фаз:

• Регистрация
• Установка/Активация
• Ответы на события

//Inside your main html file (index.html), paste the following inside script tags at the end of your body tag
//Registering a service worker
if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/sw.js')
           .then(function() { console.log("Service Worker Registered"); });
}

--------------------------------

//Inside your sw.js
//You can get the polyfill from here: https://github.com/dominiccooney/cache-polyfill/blob/master/index.js
importScripts('/serviceworker-cache-polyfill.js');

//Listening in on an install event and caching site assets
self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('your_app_name').then(function(cache) {
     return cache.addAll([
       '/',
       '/index.html',
        // Place more assets
     ]);
   })
 );
});

//Listening in on fetch requests and if found in cache, bring file from cache
self.addEventListener('fetch', function(event) {
 event.respondWith(
   caches.match(event.request).then(function(response) {
     return response || fetch(event.request);
   })
 );
});

Install Experience

Install experience — это одна из уникальных особенностей PWA, побуждающая пользователя установить приложение. Для того, чтобы у пользователя была такая возможность, нам нужно прослушать событие beforeinstallprompt. Ниже представлен пример кода, демонстрирующий процесс предоставления пользователю возможности добавить приложение к активации логики на основании его выбора.

var savedPrompt = null;

window.addEventListener('beforeinstallprompt', beforeInstallPrompt);

function beforeInstallPrompt(event) {
   event.preventDefault();
   savedPrompt = event;
   //implement logic to show your UI for adding your application to the home screen (probably a button)
}

//Call this method when the user has clicked the button in your UI
function userClickedAddToHome() {
   savedPrompt.prompt();
   
   savedPrompt.userChoice
    .then(function(choiceResult){
  if (choiceResult.outcome === 'accepted') {
    //User has agreed to add application to Home screen
  } else {
    //User has declined to add application to Home screen
  }
  savedPrompt = null;
});
}

HTTPS

Не так давно сайты использовали всем известный протокол http. Однако в связи с недавними изменениями в безопасности и в Chrome все сайты, не работающие по протоколу https, будут помечены как незащищенные. Даже если веб-сайт не обрабатывает пользовательские данные или конфиденциальные сообщения, все равно рекомендуется переключиться на https.

Как было сказано ранее, PWA должен использовать протокол https. Чтобы избежать трудностей, связанных с приобретением домена, поиском подходящего хостинга и включением SSL, можно воспользоваться Github. При наличии учетной записи откройте репозиторий и создайте страницу GitHub. Этот процесс достаточно прост и понятен, а бонусом является встроенный в Github HTTPS.

Создание APK

Чтобы PWA был доступен в Google Play Store, нужно создать APK. Для упрощения работы можно использовать такой инструмент, как PWA2APK. Также можно создать APK самостоятельно.

Google представил новый способ интеграции PWA в Play Store с помощью Trusted Web Activity или TWA. Создать TWA, который затем можно загрузить в Play Store, можно за несколько простых шагов.

1. Откройте Android Studio и создайте пустой activity;
2. Зайдите в файл проекта build.gradle и добавьте репозиторий jitpack:

allprojects {
   repositories {
       google()
       jcenter()
       maven { url "https://jitpack.io" } // <---
   }
}

3. Зайдите в файл build.gradle уровня модуля и добавьте следующие строки для активации совместимости с Java8:

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "your_application_id"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
      
    //Add the lines below
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

4. Добавьте библиотеку поддержки TWA в качестве зависимости:

dependencies {
   implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:d08e93fce3'
}

5. Добавьте activity XML в файле AndroidManifest между тегами приложения:

<activity
            android:name="android.support.customtabs.trusted.LauncherActivity">
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="enter the url of your PWA" />
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>
               
               <data
                 android:scheme="https"
                 android:host="enter your PWA url"/>
           </intent-filter>
        </activity>

6. Теперь нужно создать связь между приложением и веб-сайтом с помощью ссылки на цифровые ассеты. Вставьте следующий фрагмент в файл strings.xml:

<resources>

<string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://your PWA url\"}
        }]
    </string>
    
</resources>

7. Добавьте следующий метатег в качестве дочернего элемента к тегу приложения в AndroidManifest.xml:

<application>
  <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />
  <activity>...</activity>
</application>

8. Создайте ключ загрузки и хранилище ключей;

9. Используйте следующую команду для извлечения SHA-256:

keytool -list -v -keystore keystore_path -alias keystore_alias -storepass keystore_password -keypass key_password

10. Перейдите к генератору ссылок на ресурсы, предоставьте отпечаток SHA-256, пакет приложения и домен веб-сайта;

11. Разместите результат в файле assetlinks.json, который находится в /.well-known в директории веб-сайта;

12. Сгенерируйте подписанный APK и загрузите в Play store

Lighthouse

Для создания PWA требуется выполнить множество действий, в которых можно легко запутаться.

К счастью, Google создал Lighthouse. Его можно найти в Chrome Developer Tools (в версии Chrome 60). Доступ к нему можно получить, щелкнув правой кнопкой мыши в браузере и выбрав inspect (просмотреть код). Когда откроется новая панель, в дальнем правом углу найдите вкладку Audits.

Оставив настройки без изменения, нажмите кнопку “Run audits” для запуска audit. Это займет минуту или две, и по окончании инструмент оценит PWA в отношении трех свойств:

• Производительность
• Доступность
• Лучшие практики

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

Заключение

На этом наше путешествие заканчивается. Надеюсь, вы узнали многое о мире PWA.

Читайте также:

• Как создать Meetup+Slack приложение с помощью Standard Library и Node.js
• Как не попасть в капкан зубрежки начинающему — и продолжающему разработчику

---

Перевод статьи tomerpacific: An explanation of Progressive Web Apps for the non-PWA crowd