A2HS в Flutter Web - jsinthebits.com

Когда я хотел реализовать функцию «Добавить на домашний экран» в приложении, которое я работал в Flutter, я не нашел много хороших решений, и я немного изо всех сил придумывал решение.

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

Мы пытаемся достичь :

Чтобы начать изучать A2HS (добавить на домашний экран), нам сначала нужно узнать о PWAS. Знаешь это уже? Вы можете пропустить основной контент.

PWA (прогрессивное веб -приложение):

PWAS или прогрессивные веб-приложения-это веб-приложения, которые используют передовые API веб-браузера, чтобы обеспечить нативные приложения пользователя. Но как мы можем дифференцировать нормальное и веб -приложение PWA. Это просто, нам просто нужно проверить, содержит ли он следующие функции:

Безопасная сеть (https)
Работники обслуживания
Манифестный файл

Источник: MDN Web Docs

A2HS:

Что такое A2HS? Добавить на домашний экран (или A2HS для короткометражных) – это функция, доступная в современных браузерах, которая позволяет пользователю «установить» веб -приложение, то есть. Добавьте ярлык на их домашний экран, представляющий их любимое веб -приложение (или сайт), чтобы впоследствии они могли получить к нему доступ одним нажатием.

Источник и больше информации: MDN Web Docs

Отношение A2HS с PWA? Как мы узнали, задача A2HS состоит в том, чтобы предоставить вам возможность установить веб -приложение на вашем устройстве. Поэтому ему нужно веб -приложение, чтобы иметь функциональность в автономном режиме. Поэтому PWA вполне подходят для этой роли.

Внедрение

Что ж, теперь, когда мы узнали, что значит PWA и A2HS, давайте теперь доберемся до главного момента, то есть создавая функциональность A2HS, чтобы развевать веб -приложение или создание Flutter PWA.

Давайте сначала сделаем приложение Flutter Web, Flutter PWA. Создайте новое приложение Flutter (Web включено) и пройдите приведенные ниже шаги.

Для этого мы хотим (нажмите на ссылку, чтобы перейти к разделу):

Иметь манифестный файл
Иконки доступны
Работники обслуживания
A2HS -конфигурация
Показать приложение A2HS из приложения Flutter Web
Контекст HTTPS

Манифест

В частности: Веб -манифест написан в стандартном формате JSON и должен быть размещен где -то внутри вашего каталога приложений. Он содержит несколько полей, которые определяют определенную информацию о веб -приложении и о том, как оно должно вести себя. Чтобы узнать больше о полях, проверьте исходные документы.

Реализация: Flutter Web уже поставляется с файлом manifest.json Но некоторые из браузеров не поддерживают его. Поэтому мы создадим новый файл в Web Root Directory с именем «manifest.webmanifest». Добавьте в него этот код:

     {
        "name": "FlutterA2HS",
        "short_name": "FA2HS",
        "start_url": ".",
        "display": "standalone",
        "background_color": "#0175C2",
        "theme_color": "#0175C2",
        "description": "Flutter A2HS Demo Application",
        "orientation": "portrait-primary", 
        "prefer_related_applications": false,
        "icons": [
            {
            "src": "icons/Icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
            },
            {
            "src": "icons/Icon-512.png",
            "sizes": "512x512",
            "type": "image/
            }
        ]
       }

Добавьте эту строку в тег головы вашего index.html Файл:

Запустите приложение и перейдите к Dev Tools> Application> Manifest. Вы должны увидеть это:

Если вы видите какое -то предупреждение, пожалуйста, рассмотрите возможность их разрешения.

Примечание: все поля здесь необходимы для работы PWA. Пожалуйста, рассмотрите Замена значения в нем. Хотя вы можете уменьшить количество изображений в списке значков.

Источник и больше информации: MDN Web Docs

Значки

Мы уже можем увидеть там папку значков, просто добавить там подходящие значки и обязательно добавить их в файл манифеста.

Работники обслуживания

В частности: Сервисные работники, по сути, выступают в качестве прокси -серверов, которые находятся между веб -приложениями, браузером и сетью (когда они доступны). Они предназначены, среди прочего, чтобы обеспечить создание эффективного автономного опыта, перехватить сетевые запросы и предпринять соответствующие действия в зависимости от того, доступна ли сеть, и обновляют активы, находящиеся на сервере. Они также позволят доступ к уведомлениям и API -интерфейсам фонового синхронизации.

Реализация: Создайте файл с именем «SW.JS» в корневой папке, где принадлежит манифест.

Добавьте следующий код:

const cacheName = "flutter-app-cache-v1";
const assetsToCache = [
  "/",
  "/index.html",
  "/icons/Icon-192.png",
  "/icons/Icon-512.png",
];

self.addEventListener("install", (event) => {
  self.skipWaiting(); // skip waiting
  event.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll(assetsToCache);
    })
  );
});

self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      // Cache hit - return response
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

Это будет кэшировать сетевые URL -адреса и активы.

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

Теперь, В in index.html Перед регистрацией работника службы по умолчанию. Добавьте следующий код:

var customServiceWorkerUrl = './sw.js';
        navigator.serviceWorker.register(customServiceWorkerUrl, { scope: '.' }).then(function (registration) {
          // Registration was successful
          console.log('CustomServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
          // registration failed 
          console.log('CustomServiceWorker registration failed: ', err);
        });

Это зарегистрирует нашего работника службы, которого мы определили в SW.JS

Источник и больше информации:

A2HS подсказывает

Особый: Наконец, мы здесь, теперь нам нужно представить диалог установки пользователю. Но теперь, важная проблема здесь, он будет подсказывать только пожар на мероприятия. Например. на Click Event. Так что, например. Если у вас есть кнопка в вашем HTML, скажем, вы запустите JS OnclickeVent, чтобы вызвать функцию и показать подсказку и плохую часть – это не работает автоматически. Но не волнуйтесь, мы доберемся до этого.

Реализация: Создать script.js Файл в корневом каталоге, где принадлежит манифест, и добавьте следующий код:

let deferredPrompt;

// add to homescreen
window.addEventListener("beforeinstallprompt", (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

function isDeferredNotNull() {
  return deferredPrompt != null;
}

function presentAddToHome() {
  if (deferredPrompt != null) {
    // Update UI to notify the user they can add to home screen
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the A2HS prompt");
      } else {
        console.log("User dismissed the A2HS prompt");
      }
      deferredPrompt = null;
    });
  } else {
    console.log("deferredPrompt is null");
    return null;
  }
}

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

Теперь идея заключается в том, когда Должнашталпромпт Пожары, он будет заполняться defferredprompt И тогда мы можем представить подсказку.

Добавьте эту строку в тег головы index.html Файл: <Скрипт src = "script.js" defer>

На этом этапе мы должны проверить, правильно ли настроены все. Запустите приложение в браузере и откройте инструменты разработчика (осмотрите) и перейдите на вкладку приложения.

Вкладка «Повторное представление там» там не должно быть ошибок или предупреждения.
Не должно быть никаких ошибок или предупреждения на вкладке Сервиса.

Если нет проблем, то поздравляю 🥳. Мы все настроены с конфигурациями, теперь нам просто нужно позвонить в приложение Frumpter.

Покажите A2HS подсказку с Flutter

Заинтересованность здесь в том, как мы можем снять обратный вызов JS из кнопки в приложении Flutter, скажем,?

Для этого, теперь мы собираемся использовать Universal_html упаковка. Мы также можем сделать это с Дарт: JS , но это не рекомендуется напрямую использовать приложения Flutter. Так что давай и добавьте Universal_html как зависимость в вашем pubspec.yaml файл. Ссылка для пакета: Универсальный HTML

Нам также потребуются общие Prefs, так что добавьте это тоже. Ссылка для пакета: Общие предпочтения

Мы должны создать кнопку, чтобы позволить пользователю нажать и показать подсказку. Мы для этого, например. Покажите всплывающее окно пользователю всякий раз, когда он готов показать подсказку. В main.dart Файл, мы имеем приложение Good Old Counter.

import  "package:universal_html/js.dart"  as js;
import  'package:flutter/foundation.dart'  show kIsWeb;

Импортируйте два пакета. И теперь добавьте следующий код в initstate :

if (kIsWeb) {
      WidgetsBinding.instance!.addPostFrameCallback((_) async {
        final _prefs = await SharedPreferences.getInstance();
        final _isWebDialogShownKey = "is-web-dialog-shown";
        final _isWebDialogShown = _prefs.getBool(_isWebDialogShownKey) ?? false;
        if (!_isWebDialogShown) {
          final bool isDeferredNotNull =
              js.context.callMethod("isDeferredNotNull") as bool;

          if (isDeferredNotNull) {
            debugPrint(">>> Add to HomeScreen prompt is ready.");
            await showAddHomePageDialog(context);
            _prefs.setBool(_isWebDialogShownKey, true);
          } else {
            debugPrint(">>> Add to HomeScreen prompt is not ready yet.");
          }
        }
      });
    }

Здесь мы сначала проверяем, является ли платформа в Интернете, если да, то позвоните isdeferrednotnull Функция, которую мы написали в script.js файл. Это вернет нас, если defferredprompt не является нулевым (как мы знаем, это не будет только нулевым, когда браузер готов показать подсказку. Если он не нулевой, то покажите диалог и установите общий ключ Pref на True, чтобы не показывать снова.

Ниже приведен код диалога (всплывающее окно):

Future showAddHomePageDialog(BuildContext context) async {
  return showDialog(
    context: context,
    builder: (context) {
      return Dialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Center(
                  child: Icon(
                Icons.add_circle,
                size: 70,
                color: Theme.of(context).primaryColor,
              )),
              SizedBox(height: 20.0),
              Text(
                'Add to Homepage',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
              ),
              SizedBox(height: 20.0),
              Text(
                'Want to add this application to home screen?',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 20.0),
              ElevatedButton(
                  onPressed: () {
                    js.context.callMethod("presentAddToHome");
                    Navigator.pop(context, false);
                  },
                  child: Text("Yes!"))
            ],
          ),
        ),
      );
    },
  );
}

Это позвонит Decverdaddtohome функция в script.js Чтобы показать подсказку установки.

Последний шаг: контекст HTTPS

Для показателя, нам нужно разместить веб -приложение в безопасное Https хостинг. Мы разместим веб -приложение на GitHub Pages Анкет

Создать новый репозиторий с именем “{username} .github.io”
Запустить Flutter Build Web
После успешной сборки перейдите к Построение/Интернет каталог.
Инициализируйте новый репозиторий GIT и добавьте к нему удаленное. Для {username} .github.io это хранилище.
Нажмите и подождите некоторое время, проверьте статус развертывания в репозитории на GitHub.

А теперь все готово! 🥂

Чтобы проверить посещение: {имя пользователя} .github.io

Важный:

Что нужно иметь в виду:

Приглашение иногда не будет отображаться в первый раз. Скорее всего, это будет показано в следующий раз, когда вы посетите страницу или перезагрузите страницу. Пожалуйста, проверьте его условия. Вы можете проверить консоль, вкладку Dev Tools, если она не готова, вы можете увидеть DeferredPrompt is null напечатано.
Пожалуйста, смотрите поддерживаемые браузеры для Должнашталпромпт перезвонить. Нажмите Здесь увидеть.
Попробуйте в другом браузере, если не работать над одним, например. Mozilla Firefox, Brave и т. Д.
Будет работать только после размещения. Убедитесь, что у вас нет ошибок или предупреждения о Manifest в вкладке «Приложения» в инструментах Browser Dev.

Надеюсь, у вас есть результат, который вы хотели!

Исходный код :

SahilsonawaneOfficial/Flutter_WEB_A2HS

Исходный код для создания функциональности A2HS в Flutter Web. Пожалуйста, рассмотрите возможность просмотреть статью об этом.

Девчонка К: Ссылка среды: ссылка

Это все. Это моя первая статья, я буду рад услышать предложения для улучшения. Спасибо! ❤ ️

Оригинал: “https://dev.to/iamsahilsonawane/a2hs-in-flutter-web-3cln”