PWA против HTML5 веб-приложения?

Question

Я знаю, что наиболее знаковая особенность PWA -

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

Тем не менее, я могу сделать все это примерно 6/7 лет назад, используя в то время технологию HTML5, я знаю, что сервисный работник появился недавно, но также был «кэш приложения HTML5, а также локальное хранилище». , Индексированная БД и спецификации File API. " может делать подобные вещи.

Кто-нибудь может объяснить, в чем разница между веб-приложениями PWA и HTML5? или они просто в смысле одинаковы? или похожая концепция, но другая реализация? или PWA (следующее поколение / расширение) веб-приложения HTML5?

У меня может быть какое-то недопонимание в отношении PWA, так как я новичок в этом термине, Спасибо.

Answer 1

Если не усложнять, PWA - обычный сайт с 3 дополнительными функциями.

1. отзывчивый дизайн - сайт должен хорошо смотреться на всех устройствах
2. manifest.json - сайт должен иметь общее описание о себе, хранящееся в manifest.json
3. кеширование - сайт должен работать в автономном режиме

Я считаю, что 1 и 2 легко. И 3 действительно то, что PWA все. Итак, вопрос: как мы можем обеспечить поддержку в автономном режиме?

Первая проблема - , как мы можем получить наши исходные .html .css и .js файлы без подключения к Интернету ? Ответ: мы должны использовать работника службы или кэш приложений. Но App Cache имеет много проблем и, вероятно, устареет, с другой стороны, работники сферы обслуживания находятся в стадии разработки и становятся лучше с каждым месяцем. Вы можете прочитать больше об их разнице здесь .

Вторая проблема как мы можем получить данные сервера без подключения к интернету ? Мы должны хранить самые важные данные где-то. Но после того, как мы получили наш .js файл из кэша, мы имеем доступ к Локальному хранилищу , Индексированной БД и т. Д. Таким образом, мы можем хранить важные данные в любом из этих хранилищ, пока мы онлайн и получить его обратно, когда мы не в сети . Это полностью зависит от вас, как вы справитесь с этим.

Я считаю, что нет ясного и строгого определения для веб-приложений PWA и HTML5 (по крайней мере, на данный момент). Таким образом, вы можете предположить, что это то же самое, но сегодня PWA - более распространенное слово.