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

Введение в (прогрессивные) веб-приложения

Как начать веб-разработку? Скажи привет и познакомитесь с концепциями Интернета, IP, www, брови … Помечено PWA, WebDev, HTML, JavaScript.

Как начать веб-разработку?

Скажи привет и познакомитесь с концепциями Интернета, IP, WWW, браузера, архитектуру клиент-сервер, HTTP (ы), DNS, поисковую систему, URL, API.

страница в Интернете

Документ, который может отображаться в веб-браузере, записанном на языке HTML, идентифицирован уникально на Интернете, используя URL.

Веб-сайт/веб-приложение

Сайт или веб-приложение – это коллекция веб-страниц.

веб сервер

Компьютер, который проходит сайт в Интернете.

Используемые технологии и их стандарты

Язык разметки гипертекста (HTML)

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

Каскадные листы стиля (CSS)

Язык стилейной таблицы, описывает внешний вид/презентацию веб-страниц.

JavaScript

Легкий, интерпретируемый объектно-ориентированный язык с первым классом функций, используемый на веб-страницах для описания функциональности/поведения.

Ослабевать

TL; DR Запуск C/C ++/Rust Code в Интернете

WebAssembly – это новый тип кода, который можно запустить в современных веб-браузерах – это низкоуровневой язык, похожий на сборки, с компактным двоичным форматом, который работает с высокой производительностью и обеспечивает такие языки, как C/C ++ с целью компиляции так что они могут бежать в Интернете.

Веб-API/браузер API

Не является частью JavaScript, предоставляется хост-средой (браузер). Наиболее важным является модель объекта документа (DOM), используемая для манипулирования документами. Есть Fetch (общение с сервером), хранение на стороне клиента, устройство, аудио/видео, графические API, API, веб-работники (для запуска скрипта в фоновом потоке отдельно от основной резьбы выполнения), WebSockets, сервер, отправленные в сервер, отправленные на сервере, API разрешений и т. Д.

Есть сторонние API (экс. Twitter API, Google Maps API и т. Д.).

Двигатели, используемые в основных браузерах

Хромиум, Google Chrome, Microsoft Edge, Opera, храбрый V8. Мигать
Fire Fox Spidermonkey. Гектон
Internet Explorer Чакра Трезубец
Microsoft Edge (начальный) Чакра EdgeHtml.
Сафари JavaScriptCore (Racrefish) Webkit.

Что такое прогрессивные веб-приложения (PWA)?

Веб-приложения, которые улучшены с помощью собственных функций, похожей на приложения, такие как установка, автономные опоры и толкающие уведомления. Сайт ++ 😜.

  • Обнаружено – из веб-поиска/магазинов App-файлов (Google Play Store (используя TWA ), Microsoft Store и т. Д.)
  • Установка – как приложение, установка подсказки может быть настроена
  • Повторно Привлечение – отправляет push-уведомления, как нативные приложения
  • Независимая сеть – работает в автономном режиме или в условиях низкой сети
  • Прогрессивный (совместная совместимость кросс-браузера) – Опыт масштабируется (или вниз) с возможностями устройства Использование последних веб-API
  • Безопасный – работает только с https (вы можете использовать Letsencrypt.org)
  • Отзывчивый дизайн – адаптация к размеру экрана, метод ориентации и ввода
  • Связыватель – Доля и запуска от стандартной гиперссылки
  • Лучшие практики – повысить эффективность, следуйте за семантику, доступность (A11Y), интернационализацию (I18N), локализация (I10N), использование появляющихся веб-API

Почему PWA?

  • Улучшенный пользовательский опыт
  • Легко развивать и поддерживать
  • Кроссплатформенная и кина

Давайте попробуем один

Ниже приведены два основных компонента PWA.

  • Сервисные работники тип веб-работника. По сути, это файл JavaScript, который работает отдельно от основной резьбы браузера, перехватывающих сетевые запросы, кэширование или извлечение ресурсов из кэша и доставляют push-сообщения.
  • Манифест веб-приложения (Файл JSON, описывающий информацию о ключей о вашем веб-приложении (например, значки, языки и точка записи URL))

Добавьте файл «Maintest.json», который имеет имя, значок, цвет, отображение (используется для настройки атрибутов Browser UI для приложения).

манифест
{
  "short_name": "test",
  "name": "pwa test",
  "icons": [
    {
      "src": "/icon.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#3367D6",
  "display": "standalone",
  "theme_color": "#3367D6"
}

«Index.html» импортирует файл «Maintest.json». Safari имеет только частичную поддержку для конфигурации манифеста. Это принимает атрибуты с использованием мета-тегов.

index.html.




  
  
  
  pwa test
  
  
  
  
  
  
  
  


  

Hi Everyone!

Сервисский работник зарегистрирован с использованием «ServiceWorker.register ()». Он имеет «Установить», «Активировать» события «Fetch». Давайте добавим «SW.JS». У «SW.JS» есть обработчики событий, которые обрабатывают кэширование нашего приложения.

SW.JS.
const dataCacheName = 'pwa-test-data';
const cacheName = 'pwa-test';
const filesToCache = [
  '/',
  '/index.html',
  '/icon.png',
];

//install the sw
self.addEventListener('install', function (e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function (cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});


self.addEventListener('activate', function (e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function (keyList) {
      return Promise.all(keyList.map(function (key) {
        if (key !== cacheName && key !== dataCacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});


self.addEventListener('fetch', function (e) {
  console.log('[Service Worker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function (response) {
      return response || fetch(e.request);
    })
  );
});

Теперь нам нужен сервер для размещения нашего приложения. Давайте создадим простой сервер Express.js. Добавить «Server.js», который обслуживает публичный каталог.

server.js.
const path = require('path');
const express = require('express');

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
})

app.listen(7777, function () {
  console.log('Example app listening at http://localhost:7777')
});

Структура проекта

Как бежать?
  • Установить Node.js.
  • Запустите CMD/Terminal и перейдите в каталог приложений и сделайте «NPM i Express», а затем «Node Server.js»
  • Запустите браузер и посетите «Localhost: 7777»
  • Установите приложение (нажмите кнопку установки на панели URL в случае Chrome)

Найти источник для приведенного выше образец PWA здесь

Компании на приведенной ниже картине уже доставляют PWA!

Google Chat PWA Telegram Web.

Приятно знать о

Пожалуйста, проверьте мой Awesome-Web-Tech Github Repo для большего количества ресурсов.

Спасибо за чтение моей самой первой статьи 🙏

использованная литература

MDN, MSDN, Google Developers, Web.dev, Wikipedia

Оригинал: “https://dev.to/sudhakar3697/intro-to-progressive-web-apps-34oo”