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

Question

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

Недавно мир приложений разделился на две категории: появились приложения для устройств 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, можно за несколько простых шагов.

Откройте Android Studio и создайте пустой activity;
Зайдите в файл проекта 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.

404 0

полезное

PWA Web Development

Comments

Ничего не найдено.