Progressive Web Applications (PWA) и Оффлайн

Прогрессивные веб-приложения (Progressive Web Applications) становятся супергероями, когда они могут, при этом обеспечивая отличный базовый опыт в менее современных браузерах. Они надежные, быстрые, привлекательные, и хотя они могут делать многие вещи, которые пользователи ожидают от родных приложений, они не занимают много места или требуют длительного процесса установки.

В этом семинаре мы начнем с «классического» одностраничного приложения, которое немного громоздко по размеру, имеет медленную начальную загрузку, не работает в автономном режиме и обеспечивает очень «базовый» мобильный веб-интерфейс. Затем мы расширим его несколькими способами, чтобы при поддержке ключевых технологий в браузерах ваших пользователей их опыт оказался значительно лучше!

Во-первых, мы добавим в приложение любые метаданные для мобильных устройств и рассмотрим, как мы можем использовать студию Android и симулятор iOS, чтобы проверить наши улучшения. Чтобы немного уменьшить вес страницы, мы обсудим, как выбирать между типами изображений, такими как png и jpeg, и некоторыми недавними достижениями в сжатии.

Затем добавим sevice worker и применим несколько стратегий кэширования, чтобы в конечном итоге позволить нашему приложению работать в автономном режиме! Кроме того, мы будем использовать IndexedDb, чтобы новые данные, созданные на мобильном устройстве, могли храниться как структурированная запись, доступная как в наших приложениях, так и в сфере обслуживания (service worker scopes).

Ну и вконце мы будем работать над уменьшением нашего начального веса страницы, применяя разделение кода и уменьшая размер наших пакетов с помощью Rollup и Prepack. В конце концов, наше «классическое» приложение будет загружаться быстро при первом посещении, и почти мгновенно для каждого посещения после этого!