Интервьюер: Пожалуйста, внедрите PWA. Я: 😭

интервью
Интервьюер: Пожалуйста, внедрите PWA. Я: 😭

Предисловие 🎉

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

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

Приложения PWA загружаются как обычные веб-страницы, но предлагают автономную работу, push-уведомления и доступ к оборудованию устройства (понятно? Это приложение не нужно устанавливать 😂, не думаю, что вы его не видели)

Чтобы не запутаться, задаваясь в 2020 году, поэтому я написал эту статью, без лишних слов, давайте рассмотрим 22 вопроса, которые могут задать в 2020-2021 годах.Вопросы для собеседования PWA, или зачем мне писать 🤣.

Переводчик: wene_lin (поскольку многие из них взяты из английских переводов, хотя некоторые из них являются моим собственным мнением, назовем их переводчиками 🤪~)

Я думаю, это текст 🤠

Вопрос 1: Что такое PWA?

Сложность: ⭐

渐进式网络应用（PWA）Это концепция, предложенная Google в конце 2015 года. В основном веб-приложение, но с внешним видом原生appпохожий. служба поддержкиPWAна веб-сайте могут предоставляться такие функции, как автономная работа, push-уведомления и доступ к оборудованию устройства.

💡 Источник:stackoverflow.com

Вопрос 2: Каковы преимущества PWA?

Сложность: ⭐⭐

  1. меньше и быстрее: прогрессивные веб-приложения намного меньше нативных приложений. Их даже не нужно устанавливать. Это они не тратят место на диске и загружаются очень быстро.
  2. Отзывчивый интерфейс: PWAПоддерживаемые веб-страницы могут автоматически адаптироваться к различным размерам экрана. это может быть手机、平板、台式机或笔记本.
  3. Нет необходимости обновлять: Большинство мобильных приложений требуют регулярных еженедельных обновлений. Как и обычные веб-сайты, PWA всегда загружают последнюю обновленную версию всякий раз, когда происходит взаимодействие с пользователем, и не требуют одобрения приложения или магазина игр.
  4. Экономически эффективным: Нативные мобильные приложения должны бытьAndroid和iOS设备Разработка, затраты на разработку очень высоки. с другой стороны,PWAsИмеет те же функциональные возможности, но за долю предыдущей цены, с низкими затратами на разработку.
  5. SEO-преимущество: поисковые системы могут найтиPWAs, и загружается очень быстро. Как и на других веб-сайтах, их ссылками также можно делиться. Обеспечивает хороший пользовательский опыт и результаты, повышающие рейтинг SEO.
  6. Автономная функция:так какservice worker APIподдержка, доступная в автономном режиме или低internet连接доступ вPWAs.
  7. безопасность:PWAsпройти черезHTTPSСквозное подключение и защита пользовательских данных при каждом взаимодействии.
  8. Отправить уведомление: через поддержку push-уведомлений,PWAsЛегко взаимодействовать с пользователями и обеспечить отличный пользовательский опыт.
  9. обойти магазин приложений:原生appЕсли требуется какое-либо новое обновление, оно требует одобрения в магазине приложений в течение нескольких дней, и есть вероятность его отклонения или бана, для этого PWA имеют свои уникальные преимущества и не требуютApp Storeслужба поддержки. Обновленные версии могут быть загружены непосредственно с веб-сервера безApp Storeодобрить.
  10. Нулевая установка: Во время просмотраPWAНа телефонах и планшетах будет своя иконка, как у мобильного приложения, но без длительной установки.

💡 Источник:stackoverflow.com

Вопрос 3: Каковы недостатки PWA?

Сложность: ⭐⭐

  1. Меньший доступ к системным функциям:В настоящее времяPWAДоступ к собственным системным функциям ограничен по сравнению с собственными приложениями. Также не все браузеры поддерживают его полную функциональность, но, вероятно, в ближайшем будущем он станет новым стандартом разработки.
  2. Большинство Android, несколько iOS: В настоящее время больше поддержки исходит отAndroid.iOS系统Предоставляются только запчасти.
  3. нет критериев проверки:PWAsНе требует проверки нативных приложений в магазине приложений, что может ускорить процесс, но не дает преимуществ продвижения в магазине приложений.

💡 Источник:stackoverflow.com

Вопрос 4: Как сделать веб-приложение PWA?

Сложность: ⭐⭐

Одинweb应用статьPWA, есть несколько основных принципов, которые необходимо соблюдать, а именно:

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

Вопрос 5: Зачем нам нужен веб-манифест в PWA?

Сложность: ⭐⭐

Web manifestотJSONВ формате указана вся информация о сайте. Этот файл является одним из требований для установки веб-сайта.

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

💡 Источник:MDN

Вопрос 6. Какие функции есть в PWA, которых нет в нативных приложениях?

Сложность: ⭐⭐⭐

  • обнаруживаемость --PWAСодержимое легко найти поисковыми системами, но оно ориентировано на контент.原生appНапример, вы не получите контент, к которому он предоставляет доступ, в результатах поиска в магазине приложений контента, к которому он предоставляет доступ (то есть вы не можете искать статьи через магазин приложений, хе-хе, я большойPWAразные).
  • Ссылаемость — любая страница/экран может иметь прямую ссылку и ею можно легко поделиться.
  • Благоприятно — сохраните ссылку для прямого доступа к представлению приложения.
  • Всегда свежий — не нужно проталкивать обновления через магазин приложений
  • Универсальный доступ — никаких политик магазина приложений или географических ограничений (вы поняли 🤣)
  • Сохраняйте большие объемы данных — это важно для развивающихся рынков, где доступен дорогой и/или медленный доступ в Интернет. Например,Konga(电子商务网站)путем перехода наPWAУменьшено использование данных при первой загрузке на 92%.
  • Низкое трение при распределении – еслиPWAонлайн, тогдаAndroid（和其他移动）用户Он уже доступен.
    • Большинство пользователей мобильных телефонов не загружают новые приложения каждый месяц.
    • PWAsне нужно идтиapp store,поискapp, нажмитеInstall, дождитесь загрузки, затем откройтеapp. Каждый шаг будет терять 20% потенциальных пользователей (евангелие ленивого рака, просто 🤣).

💡 Источник:stackoverflow.com

Вопрос 7: Что такое сервис-воркеры?

Сложность: ⭐⭐⭐

Service WorkerЭто сценарий, который браузер запускает в фоновом режиме независимо от веб-страницы, что открывает дверь к функциям, не требующим веб-страницы или взаимодействия с пользователем. Теперь они включают такие функции, как push-уведомления и фоновая синхронизация. будущее,Service WorkerБудут поддерживаться дополнительные функции, такие как периодическая синхронизация или геозона. Основная функциональность, обсуждаемая в этом руководстве, — это перехват и обработка сетевых запросов, включая программное управление ответами в кеше.

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

существуетService WorkerДо появления был еще один, который мог предоставить пользователям автономный опыт работы в Интернете.API, называетсяAppCache.AppCache APIЕсть много связанных вопросов в дизайнеService Workerудалось избежать.

💡 Источник:developers.google.com

Вопрос 8. В чем разница между PWA и гибридом?

Сложность: ⭐⭐⭐

HybridОбычно относится к использованию веб- и нативных технологий (native technology), которые публикуются через App Store. Он должен пройти процесс проверки в магазине приложений Apple, Google, Microsoft и других компаний.

PWA— это приложения, созданные с использованием веб-технологий, которые запускаются в браузере и могут быть добавлены на главный экран (то есть закреплены на рабочем столе 🐷). Их не нужно выпускать через локальный магазин приложений, но их можно включить, что Microsoft включила в свой Microsoft Store с 2018 года.PWA,иTWA（Trusted Web Activities, является последней предоставленной Google для переноса веб-страниц наAndroid APPметод), чтобы сделатьGoogle Play StoreОтправитьPWAсделано проще.

НемногоHybridПлатформа включаетPhoneGap（又名Cordova）,Appcelerator TitaniumиIonic. Вам не нужна платформа для созданияHybrid, но они полезны для вас, потому что они уже本地APIиJavaScript APIмежду ними были построены мосты. (также известен какJSbridge🐷)

PWAsПросто запустите в браузере, чтобы вы могли использовать основныеHTML,CSSиJavaScriptстроить. (Первое евангелие, хе-хе 😂)

💡 Источник:stackoverflow.com

Вопрос 9: Что такое событие выборки?

Сложность: ⭐⭐⭐

во время установкиService WorkerИ после того, как пользователь перейдет на другую страницу или обновит текущую страницу,Service Workerначнет получатьfetchсобытие

Пример:

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);
      }
    )
  );
});

Здесь мы определяемfetchсобытие, иevent.respondWith(), мы проходим вcaches.match()один изpromise. Этот метод проверяет запрос и ищет закэшированный результат из всех кешей, созданных сервис-воркером.

Если найден соответствующий ответ, возвращается кэшированное значение, в противном случае вызовfetchсделать сетевой запрос и вернуть любые данные, полученные из сети в результате. Вот простой пример, в котором используются все активы, кэшированные на этапе установки.

💡 Источник:developers.google.com

Вопрос 10: Каковы требования для установки PWA на веб-сайте?

Сложность: ⭐⭐⭐

Чтобы веб-сайт можно было установить, он должен иметь следующее:

  • Web Manifest, с правильным заполнением полей
  • Домен сайта должен быть безопасным (HTTPS)из
  • Значок, представляющий приложение на этом устройстве.
  • зарегистрированныйService Worker, чтобы приложение работало в автономном режиме (это только дляChrome浏览器требуется)

💡 Источник:MDN

Вопрос 11: Что такое IndexedDB и как его использовать в PWA?

Сложность: ⭐⭐⭐

IndexedDBбольшойNoSQLСистема хранения. Он позволяет хранить что угодно в браузере пользователя. кроме обычногоsearch,getиputПомимо операции,IndexedDBТранзакции также поддерживаются.

IndexedDBиспользуется для хранения на стороне клиента больших объемов структурированных данных (включая文件/blob) низкоуровневый API. ДолженAPIИспользуйте индексы для высокопроизводительного поиска данных. Несмотря на то чтоDOM存储Полезно для хранения небольших объемов данных, но менее полезно для хранения больших объемов структурированных данных, например,IndexedDBпредоставляет решение.

существуетPWA, обычно рекомендуется хранить данные в автономном режиме:

  • Для сетевых ресурсов, необходимых для загрузки приложений в автономном режиме, используйтеCache API(Service Workersчасть).
  • Для всех остальных данных используйтеIndexedDB.

💡 Источник:developers.google.com

Вопрос 12: Что такое CacheStorage?

Сложность: ⭐⭐⭐

CacheStorage— это механизм хранения в браузерах для хранения и извлечения сетевых запросов и ответов. это начинается сRequestзаkey,Responseзаvalueдля хранения объектов запросов и ответов.

CacheStorageнетService Worker API, но позволяет SW кэшировать сетевые ответы, чтобы обеспечить автономную функциональность, когда пользователь отключается от сети.

Caches对象(CacheStorageэкземпляр ) используется для доступаCacheStorage, извлекать, хранить и удалять объекты.

💡 Источник:blog.bitsrc.io

Вопрос 13: Расскажите о жизненном цикле Service Worker и нарисуйте его общий процесс.

Сложность: ⭐⭐⭐⭐

Service WorkerЖизненный цикл полностью не зависит от веб-страницы.

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

Во время установки вам часто нужно кэшировать определенные статические ресурсы. Если все файлы успешно закэшированы, тоService WorkerУстановка завершена. Если произойдет сбой загрузки любого файла или сбой кеша, шаг установки завершится ошибкой.Service WorkerЕго нельзя активировать (то есть он не будет установлен). Если это произойдет, не волнуйтесь, в следующий раз он попытается снова. Но это означает, что если установка выполнена, вы можете знать, что у вас есть эти статические ресурсы в кеше.

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

После активацииService Workerбудет осуществлять контроль над всеми страницами в своей области, однако регистрацияService WorkerСтраница должна быть перезагружена, чтобы ею можно было управлять. Когда сервис-воркер берет на себя управление, он находится в одном из двух состояний: сервис-воркер завершает работу для сохранения памяти или обрабатывает события get и message, последнее состояние возникает после того, как со страницы выдается сетевой запрос или сообщение.

Ниже приведеныService WorkerУпрощенный жизненный цикл при первоначальной установке:

💡 Источник:developers.google.com

Вопрос 14: Как обновить Service Worker?

Сложность: ⭐⭐⭐⭐

В какой-то момент вашService Workerнеобходимо обновить. На этом этапе вам необходимо выполнить следующие шаги:

  1. Обновите сервис-воркерJavaScriptдокумент. Когда пользователь переходит на ваш сайт, браузер пытается повторно загрузить определение в фоновом режиме.Service Workerфайл сценария. еслиService Workerфайл имеет байтовую разницу с файлом, который он использует в данный момент, он обрабатывается так, как если бы新 Service Worker.
  2. новыйService Workerзапустится и сработаетinstallсобытие.
  3. В настоящее время,旧 Service Workerпо-прежнему контролирует текущую страницу, поэтому新 Service Workerвойдетwaitingгосударство.
  4. Когда текущая открытая страница на веб-сайте закрывается,旧 Service Workerбудет прекращено,新 Service Workerполучит контроль.
  5. 新 Service WorkerПолучив контроль, он активирует свойactivateсобытие.

💡 Источник:developers.google.com

Вопрос 15: Опишите, что вы знаете о стратегиях кэширования Service Worker.

Сложность: ⭐⭐⭐⭐

Следующие три стратегии кэширования не зависят от фреймворка:

  • Только кеш- Service Worker ожидает найти запрошенные активы в кэше.

  • Только сеть- Эта стратегия прямо противоположна предыдущей: всегда обращаться к сети, даже не запрашивая кеш.

  • Устарело во время повторной проверки--и仅缓存(Cache Only)策略Точно так же цель состоит в том, чтобы обеспечить быстрые ответы, передавая данные из кеша. Однако, когда клиентский запрос обрабатывается, на сервер отправляется отдельный запрос, чтобы получить обновленную версию (если есть 😂) и сохранить ее в кеше.

Далее поговорим о двух стратегиях кэширования, предоставляемых фреймворком Angular:

  • Сначала производительность (по умолчанию): Цель здесь — оптимизировать время отклика. если кеш有可用的资源, эта версия пройдена. В противном случае будет выполнен сетевой запрос для его извлечения и кэширования.

  • Свежесть прежде всего: Используется, когда необходимо передать последние данные из сети. Мы можем указать超时时间, после истечения времени ожидания запроса вернется к кешу и попытается доставить оттуда необходимые данные.

💡 Источник:dev.to

Вопрос 16: Что такое App Shell?

Сложность: ⭐⭐⭐⭐

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

App Shellэто минимум, необходимый для поддержки пользовательского интерфейсаHTML,CSSиJavaScript, который при кэшировании в автономном режиме обеспечивает мгновенную и надежную хорошую производительность при повторном доступе пользователя. Это означает, что его не нужно загружать из сети каждый раз, когда пользователь посещаетApp Shell.Просто загрузите нужный контент из сети.

App ShellПары архитектуры имеют相对不变的导航以及一直变化的内容Приложения и веб-сайты имеют большое значение.

💡 Источник:developers.google.com

Вопрос 17: Какими характеристиками должна обладать App Shell?

Сложность: ⭐⭐⭐⭐

App ShellСледующее должно работать идеально:

  • быстрая загрузка
  • Используйте как можно меньше данных
  • Используйте статические ресурсы из собственного кеша (static assets)
  • Отделить контент от навигации
  • Получить и отобразить содержимое определенной страницы (HTML,JSONЖдать)
  • Необязательно: кэшируйте динамический контент

💡 Источник:developers.google.com

Вопрос 18. Как Apple поддерживает PWA?

Сложность: ⭐⭐⭐⭐⭐

Safari 11.1предоставлено вService Worker, продукт2018年3月29日иiOS 11.3иmacOS 10.13.4Публикуем вместе.

Вот дополнительные примечания:

  • Поддержка iOS и macOSService Worker + Cache API(Cache APIв действительностиService Workerподдерживаетсяпредпосылки)
  • Нет подсказки «Добавить на главный экран (просто закрепить на рабочем столе 😝)»
  • Нет push-API
  • нет фоновой синхронизации
  • это правильноService WorkerЕще немного в реализацииважные вопросы

💡 Источник:stackoverflow.com

Вопрос 19. Могут ли одновременно существовать несколько сервис-воркеров?

Сложность: ⭐⭐⭐⭐⭐

Следует отметить две вещи:

  • пока каждыйService Workersимеют свою уникальную сферу, вы можете зарегистрировать любое количествоService Workers
  • 缓存存储(Cache Storage API)(и другие механизмы хранения, такие какIndexedDB) являются общими для источника, и по умолчанию отсутствует «сегментирование» или изоляция пространства имен.

💡 Источник:stackoverflow.com

Вопрос 20: Что сервис-воркеры могут делать, чего не могут веб-воркеры?

Сложность: ⭐⭐⭐⭐⭐

Web Workers- Обеспечивает простой способ запуска сценариев в фоновом потоке для веб-контента. Рабочие потоки могут выполнять задачи, не мешая пользовательскому интерфейсу. Кроме того, они также могут использоватьXMLHttpRequestвоплощать в жизньI/O(несмотря на то чтоresponseXMLиchannelсвойство всегда пусто). После создания рабочий процесс может уведомить создателя кода, отправив сообщение обработчику событий, указанному в коде.JavaScript代码Отправить сообщение (и наоборот).

Service Worker- по существу выступать в ролиWeb appПрокси-сервер между браузером и сетью (при наличии). Они предназначены (среди прочего) для создания эффективной автономной работы, перехватывая сетевые запросы и в зависимости от того, доступна ли сеть и есть ли на сервере обновленные активы (assets) принять соответствующие меры. Они также разрешают доступ推送通知и后台同步API.

Web Workers Service Workers
Экземпляры каждый (несколько на вкладке) Один на все вкладки
Срок жизни То же, что и вкладка Независимый
Использование по назначению Параллелизм Офлайн-поддержка

Web WorkerМожет легко запускать энергоемкие скрипты (expensive scripts, я тоже читаю на английском, не знаю правильный ли перевод 🤣), не вызывая блокировки страницы, иService WorkerПолезно для изменения ответов на сетевые запросы (например, при создании автономных приложений 😂).

💡 Источник:stackoverflow.com

Вопрос 21. Каковы преимущества архитектуры App Shell с использованием потоков Service Worker?

Сложность: ⭐⭐⭐⭐⭐

  • Всегда быстрая надежная работа. Повторные визиты проходят очень быстро. Статические активы и пользовательский интерфейс могут быть кэшированы при первом доступе (например,HTML,JavaScript,图像和 CSS) для мгновенной загрузки при повторных посещениях. Контент может кэшироваться в системе при первом доступе к нему, но обычно загружается при необходимости.

  • родное взаимодействие. принявApp ShellМодели, вы можете создавать мгновенную навигацию и взаимодействие, как нативные приложения, включая автономную поддержку.

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

💡 Источник:developers.google.com

Вопрос 22: Возможно ли иметь настоящее постоянное хранилище в PWA и зачем оно нужно?

Сложность: ⭐⭐⭐⭐⭐

ответ отрицательный. Пользователь может удалитьPWA(если установлен вAndroidon) и очистите все кеши браузераPWA.Cache APIвременно, когда пользователь очищает кеш браузера,IndexedDBДанные можно стереть. Таким образом, чтобы сохранить данные вашего приложения в установке PWA, вы должны передать некоторыеAPIИспользуйте облачное хранилище.

💡 Источник:stackoverflow.com

позже

Адрес на гитхабе:Интервьюер: Пожалуйста, внедрите PWA. Я: 😭
Симпатичные мальчики и девочки, которые думают, что статья нормальная, могут поставить мне лайк или звездочку, муа~

Категории