[Обучение и практика PWA] (1) 2018 г., начните свое обучение PWA

внешний интерфейс PWA
[Обучение и практика PWA] (1) 2018 г., начните свое обучение PWA

Серия статей «Обучение и практика PWA» организована в видеgitbook — учебное пособие по PWA, текстовое содержимое было синхронизировано сlearning-pwa-ebook. При перепечатке просьба указывать автора и источник.

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

Статьи из этой серии«Обучение и практика PWA»Различные технологии, лежащие в основе PWA, будут постепенно разобраны, а методы применения этих технологий будут объяснены с помощью примеров кода. Именно потому, что в PWA много технических моментов и подробных знаний, я организовал его в процессе обучения и подготовил серию статей «Обучение и практика PWA», надеясь дать вам всестороннее представление о различных технологиях в PWA. Друзья, которые заинтересованы в PWA, могут обратить внимание.

Во-первых, давайте кратко рассмотрим PWA.

1. Что такое ПВА

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

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

Таким образом, изучение PWA на самом деле означает понимание и освоение технологии, лежащей в основе этих PWA. В этой серии статей будут представлены технологии, задействованные в PWA, и показано использование различных технологий с примерами кода. Я надеюсь, что благодаря этой серии статей вы получите более глубокое представление о технологии PWA. Прогрессивная идея самой PWA также позволяет нам использовать эти технологии в нашем бизнесе «пошагово» и постоянно оптимизировать наши продукты с учетом контролируемых затрат.

2. Некоторые технологии в PWA

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

  • Web App Manifest
  • Service Worker
  • Cache API кэш
  • Отправить уведомление
  • Фоновая синхронизация
  • Отзывчивый дизайн
  • ...

Эти методы незаменимы для изучения PWA. и сApple также начинает поддерживать PWA в iOS Safari.(некоторые из этих технологий), этап PWA больше.

3. ДЕМО проекта

Чтобы сотрудничать с изучением соответствующих знаний в PWA, я специально создал демонстрационное веб-приложение——

Демонстрация запроса информации о книге на основе ключевых слов (GitHub.com/alien state/com…

Это веб-приложение изначально не имело никаких возможностей PWA. Я буду использовать эту демонстрацию в качестве примера в этой серии статей, чтобы объяснить различные технологии и применить их к демонстрации. То есть в этой серии статей я буду работать с вами, чтобы постепенно модернизировать обычное веб-приложение до простого PWA и учиться вместе таким образом.

Во-первых, краткое введение в эту демонстрацию. Это приложение для поиска информации о книгах на основе ключевых слов. Пользователь вводит ключевые слова в интерфейсе, нажимает поиск и запрашивает наш собственный сервер, а сервер используетDouban Books API V2Чтобы получить данные.

图书搜索demo

Использование проектаKoaЧтобы построить сервер узла, поэтому вам нужна версия узла> 7.6.0, вы можете использоватьnvmдля переключения на соответствующую версию узла.

Для запуска проекта сначала

git clone git@github.com:alienzhou/learning-pwa.git
# 切换到基础项目分支
git checkout basic

Обратите внимание, что вам нужно переключиться на базовую ветку.Ветка master — это последний демо-код после обновления PWA. Исходное веб-приложение можно увидеть только в базовой ветке. Далее устанавливаем зависимости:

npm install

Наконец, запустите проект:

npm run start

Тогда ты можешь127.0.0.1:8085для доступа к проекту.

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

|---public---|---index.html // 前端页面
|            |---index.js // browser的JavaScript脚本
|            |---style.css // 样式文件
|            |---img // 图片文件夹
|---app.js // node服务启动入口
|---util.js // node服务工具库

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

  • базовая ветка: базовая демонстрация проекта, обычное приложение для поиска книг (веб-сайт);
  • Ветка манифеста: на основе базовой ветки добавьте такие функции, как манифест;
  • ветви sw-cache: манифест на основе ветвей, добавление буфера и автономный режим;
  • ветка master: последний код приложения.
  • ...

Будучи первой статьей в этой серии, эта статья кратко знакомит с PWA и связанными с ним техническими концепциями. Изучив PWA, мы можем быстро применить превосходную технологию в нашей работе. существуетследующий постВ этой статье я расскажу, как использовать манифест, чтобы сделать ваше веб-приложение «более нативным» и иметь оболочку приложения. Хотите узнать больше о дополнительных знаниях о PWA, следуйте«Обучение и практика PWA»серия статей.

Нечего сказать, давайте изучим технологию, связанную с PWA, чтобы научиться конкретно!

Серия статей "Изучение и практика технологии PWA"

Категории