Рубрики
Без рубрики

Понимание прогрессивных веб -приложений: предоставление мобильного опыта – HTML5 и JavaScript Service Service Works в 2021 году.

Что такое PWA? PWA (прогрессивное веб -приложение) – это тип доставленного программного обеспечения для приложений … Tagged с WebDev, JavaScript, HTML, PWA.

Что такое PWA?

PWA (Progressive Web Application) – это тип программного обеспечения для приложений, доставленных через Интернет. PWA создаются с использованием общих технологий, таких как HTML, CSS и JavaScript. Они могут быть установлены и функционировать на любой платформе, которая использует веб -браузер, соответствующий W3C, на рабочем столе или на мобильных устройствах. Важно отметить, что браузер позволит вашему веб -приложению стать PWA только через Безопасное соединение (Использование технологии шифрования SSL) или на Localhost Анкет

Кто может установить PWAS?

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

Поддержка с августа 2021 года:

Мобильный:

Почти каждый мобильный браузер поддерживает PWAS, за исключением Kaios

Настольный компьютер:

Chrome 39 & Up Edge 79 & UP iOS Safari/Chrome 11.3 & Up – Частичная поддержка Firefox – устарело с января 2021 года.

Скриншот от caniuse.com

Почему я должен разрабатывать PWAS?

Цель:

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

Требуемые технологии:

  • HTML
  • CSS
  • JavaScript
  • Nodejs (необязательный пакет, который мы будем здесь использовать)

Преимущества:

  • Регистрация магазина приложений
  • Оффлайн запасных
  • Первый ресурс с сетью или кэшем Вынесение
  • Всплывающее уведомление
  • Фоновая синхронизация
  • А также Более

Это не займет много, чтобы начать!

Наша структура файла

    -root/
      -index.html
      -manifest.json
      -service-worker.js
      -logo.[png, jpg, etc...]

index.html

Разработка может начинаться с базовой парикматериалы HTML5.

HTML5 Coalerplate

    
      
        
        
        TechSnack Simple PWA
      
      
        
Hello World!

manifest.json

Чтобы устройство пользователя знало, что делать с нашим веб -приложением, нам нужно будет предоставить ему некоторые детали. Эти детали довольно самостоятельно объясняют.

Мы оставим Значки массив пуст на данный момент. Подробнее об этом в ближайшее время.

    {
      "name": "TechSnack Simple PWA",
      "short_name": "TechSnack",
      "start_url": "/?home=true",
      "icons": [],
      "theme_color": "#000000",
      "background_color": "#FFFFFF",
      "display": "fullscreen",
      "orientation": "portrait"
    }

С этой информацией устройство пользователя может:

  • Установите наше приложение
  • Примените пользовательский значок для запуска приложения
  • Отображать пользовательский брызговой экран при запуске
  • Разрешить настройку окна и поведения приложения
  • Подражать нативному поведению применения
  • Разрешить доступ к собственным функциям, таким как GPS и Push -уведомления
  • Зарегистрируйте наше приложение в популярные магазины приложений

Связывание Manifest.json

Используйте Ссылка тег для подключения manifest.json к нашему приложению

    

      ...

Узельные пакеты (1 – необязательно)

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

Как насчет нескольких размеров экрана или разрешений?

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

PWA-ASSET-генератор

Вам понадобится хотя бы один файл изображения следующих типов MIME:

  • Пнн
  • JPEG/JPG
  • Svg
  • Webp

Установить

   $ npm install --global pwa-asset-generator

Теперь мы захотим запустить пакет в нашем Webroot каталог. Следующий фрагмент будет выполняться для наших целей.

npx pwa -asset -генератор [path/to/logo] [path/to/output/dir] -i [path/to/index.html] -m [path/to/manifest.json] -f -f Флаг генерирует изображение/метагиблен

Выполнение – из каталога WebRoot

   $ npx pwa-asset-generator logo.jpg logos -i index.html -m manifest.json -f

Стоит отметить что если вы выполняете PWA-Asset-Generator без использования -i , -m и -f Флаги Результаты будут выводиться в вашу консоль.

Скопируйте и вставьте результаты в Значки массив внутри manifest.json

Скопируйте и вставьте выход в голова метка index.html

Новые значки/каталог

Содержит все сгенерированные изображения.

Обновленный index.html

Наш index.html Файл должен выглядеть так сейчас:

    


  
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    TechSnack | Simple PWA
    
    
  
  
    
Hello World!

Финальный manifest.json

Наш manifest.json Файл должен выглядеть так сейчас:

    {
      "name": "TechSnack Simple PWA",
      "short_name": "TechSnack",
      "start_url": "/?home=true",
      "icons": [
        {
          "src": "icons/manifest-icon-192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "maskable any"
        },
        {
          "src": "icons/manifest-icon-512.png",
          "sizes": "512x512",
          "type": "image/png",
          "purpose": "maskable any"
        }
      ],
      "theme_color": "#000000",
      "background_color": "#FFFFFF",
      "display": "fullscreen",
      "orientation": "portrait"
    }

Обслуживающий работник

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

Сервисный работник – это сценарий слушателя, который браузер работает в фоновом режиме. Сервисный работник работает отдельно от веб -страницы, позволяющей реализовать функции, которые не требуют взаимодействия или вызовов с веб -страницы или пользователя. Сервисные работники могут поддерживать такие функции, как периодическая синхронизация или Геозон в будущем. ПРИМЕЧАНИЕ: Хотя работники обслуживания являются файлом JavaScript, есть дополнительные ограничения, налагаемые при кодировании. Вы можете не иметь доступа к DOM через сервисного работника.

Жизненный цикл обслуживающего работника

Есть несколько функций/функций, которые вам обычно приходится строить вокруг Жизненный цикл работников обслуживания . Мы будем использовать API под названием Рабочая коробка Чтобы не беспокоиться о настройке того, что находится под капотом.

Workbox API

Для нашего работника обслуживания мы собираемся использовать использование API под названием Рабочая коробка Анкет Этот API предлагает запеченные функции, которые потребуют нескольких статей для описания самостоятельно. Если вы заинтересованы в том, чтобы копаться в Nitty Gritty, вы можете прочитать о Служба работников жизненный цикл Анкет

Импорт

Внутри Служба-работник. JS мы будем импорт Workbox API

   importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');

Регистрация маршрутов

Служба может перехватывать сетевые запросы со страницы. Это может ответить на страницу с кэшированный контент или сгенерированный контент

Скриншот от Google Dev

Примечание: (сверху)

Метод это Получить по умолчанию. Чтобы изменить это, это должно быть указано.

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

Служба-работник

Теперь мы можем добавить следующий код в Служба-работник. JS :

    ...

    workbox.routing.registerRoute(
      ({request}) => request.destination === 'image',
      new workbox.strategies.CacheFirst() //to search cache first
      //new workbox.strategies.NetworkFirst() //to search server first
);

Вот и все! Приведенный выше код будет:

  • RegisterRoute с Рабочая коробка
  • Перехватить все 'изображение' Файлы на странице запрос

Здесь мы выбираем наш стратегии Анкет Хотим ли мы служить нашей странице от Cachefirst или Сетевая фехтова ? Это мы решим, является ли конкретные ресурсы (ы), которые нас интересуют, Статический или динамический Анкет

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

  • Однако, если они Динамически сгенерировано каким -то Бэк-Энд Тогда мы хотели бы в значительной степени получить этот файл из Сеть Анкет

Окончательный служебный работник

    importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');

    workbox.routing.registerRoute(
      ({request}) => request.destination === 'image',
      new workbox.strategies.CacheFirst() //to search cache first
      //new workbox.strategies.NetworkFirst() //to search server first
);

Связывание служебного работника

Теперь, когда у нас есть наш сервисный работник и перехватывать запросы на файлы изображений, мы можем связать наш скрипт внутри index.html

    

      ...

Это так просто зарегистрировать нашего работника службы!

Сделать все это вместе

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

Наша структура файла:

index.html

    

    
      
        
        
        
        

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

        TechSnack | Simple PWA
        
        
      
      
        
Hello World!

manifest.json

    {
      "name": "TechSnack Simple PWA",
      "short_name": "TechSnack",
      "start_url": "/?home=true",
      "icons": [
        {
          "src": "icons/manifest-icon-192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "maskable any"
        },
        {
          "src": "icons/manifest-icon-512.png",
          "sizes": "512x512",
          "type": "image/png",
          "purpose": "maskable any"
        }
      ],
      "theme_color": "#000000",
      "background_color": "#FFFFFF",
      "display": "fullscreen",
      "orientation": "portrait"
    }

Служба-работник

    importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');

    workbox.routing.registerRoute(
      ({request}) => request.destination === 'image',
      new workbox.strategies.CacheFirst() //to search cache first
    );

Служить нашей странице

Теперь мы можем просмотреть нашу страницу в браузере.

Для Localhost запустить NPX служат в Webroot каталог. Тогда вы можете посетить свой надежно поданный Удаленный IP или домен Пожалуйста, имейте в виду поддержку браузера для вашего устройства

В нашей адресной панели есть новый значок!

Браузер требует Действие пользователя Чтобы установить PWA Пользователь может нажать на этот значок, чтобы увидеть быстрый

Теперь вы можете нажать на значок, установленную на домашней странице устройства

Суммирование развития PWA

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

Помогите TechSnack написать краткий контент:

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

Обмен статьей на ваших социальных платформах также будет большой помощью!

Следите за TechSnack в Twitter

Присоединяйтесь к разговору в R/Techsnack

Оригинал: “https://dev.to/techsnack/simple-progressive-web-apps-websites-you-can-install-3k0e”

Читайте ещё по теме: