Как начать веб-разработку?
Скажи привет и познакомитесь с концепциями Интернета, 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!
Приятно знать о
- Традиционные веб-приложения VS-одиночные Apps (SPA)
- Серверный рендеринг против рендеринга на стороне клиента VS REGIDRatation VS Предварительная рендеринга
- Архитектура оболочки приложения для PWA
- Нетерпелив, ленивый и предварительную загрузку, скелет загрузки
- Маяк – инструмент аудита для веб-страниц
- Pwabuilder – быстро и легко превратить свой сайт в приложение!
- Workbox (Коллекция библиотек и инструментов, используемых для создания сервисного работника).
Пожалуйста, проверьте мой Awesome-Web-Tech Github Repo для большего количества ресурсов.
Спасибо за чтение моей самой первой статьи 🙏
использованная литература
MDN, MSDN, Google Developers, Web.dev, Wikipedia
Оригинал: “https://dev.to/sudhakar3697/intro-to-progressive-web-apps-34oo”