Getting started with Progressive Web Apps

This intro-level session will cover the basics of Progressive Web Applications (PWA). You’ll learn about why PWAs are great for building app-like, cross-platform projects, the advantages they bring to developers, users, and businesses, and how to start building your PWAs. This talk will cover - The definition of PWAs - Advantages PWAs have over alternatives like React Native - Building a PWA with service worker API and Workbox

Getting started with Progressive Web Apps

This beginner-friendly session will cover the basics of Progressive Web Applications (PWA). You’ll learn about why this concept is great for building app-like, cross-platform projects, the advantages they bring to developers, users, and businesses, and how to start building your PWAs.

Angular: Что новенького?

Что происходит с Angular? Что появилось в последней версии и что планируется? Давайте взглянем на фреймворк и сообщество вокруг него с высоты птичьего полета, чтобы принимать обоснованные технические решения, убедиться в использовании лучших практик и заглянуть в будущее наших проектов на Angular.

Automating a service worker with Workbox 6

"I deployed a service worker - now, I need to buy a new domain" - a well-known joke about the difficulty of implementing your own caching logic. With the arrival of the sixth version of the Workbox library, the trade-off between flexibility and ease of automation of network tasks for PWA is no longer needed. In this talk, I will tell you how to get started with Workbox 6, implement typical functionality for an offline web application, and go further by adding your own caching logic.

Нативные веб-приложения: готовность номер один!

В последнее время мы так часто дискутируем о "нативных" веб-приложениях. Но когда же, наконец, наступит момент, когда Веб станет по-настоящему "родным" для большинства аппаратных и программных платформ? Прогрессивные веб-приложения, Project Fugu, WebAssembly и другие технологии активно способствуют движению в этом направлении. В данном докладе мы рассмотрим несколько особенностей, которые делают интеграцию любого приложения и операционной системы максимально тесной, и попытаемся сопоставить эти особенности с API, доступными для веб-платформы. Зная, что доступно уже сегодня и что появится в ближайшее время, вы сможете планировать и создавать по-настоящему нативные веб-приложения, обеспечивающие максимальное удобство для пользователей!

The Status of Angular

What is the current state of the Angular framework? What new features are there in the latest version and on the roadmap? Let's have a bird-eye view of the framework to make informed technical decisions, to make sure that we use the latest best practices, and to look into the future of our Angular projects with confidence.

Sending the Angular app into deep, deep offline with Workbox

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see more and more large and small projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the deep exploration of Service Worker API possibilities and gathered UX gotchas, we go through the history of the offline web, the importance of treating the network as an enhancement, current challenges (and their solutions) and proper tooling. We architect our offline-ready Angular app applying the best tech and UX practices adding the features one-by-one: app shell, caching resources and data, sync when online. All in name of our users who demand the new level of the resilient web experience.

Автоматизируем сервис-воркер с Workbox 6

«Задеплоил сервис-воркер — нужно покупать новый домен» — известная шутка о том, как сложно писать собственную логику кеширования. С приходом шестой версии библиотеки Workbox для прогрессивных веб-приложений (PWA) больше не нужен компромисс между гибкостью и удобством автоматизации сетевых задач. Я расскажу, как начать работу с Workbox 6, реализовать типовую функциональность для офлайнового веб-приложения и пойти дальше, добавив собственную логику кеширования.

Native Web Apps: Are We There Yet?

There are so many discussions about web VS native apps. Will we get to the point where the Web becomes truly Native for the majority of the platforms? Progressive Web Apps, Project Fugu, WebAssembly & other technologies actively contribute to moving in this direction. In this session, we go through a list of details that make the integration of an application & operating system seamless, and map it to the APIs available for the web platform. With the knowledge of what's available today and what's coming soon, you are empowered to build truly Native Web Apps to deliver the best user experience!

The Status of Angular

What is the current state of the Angular framework? What new features are there in the latest version and on the roadmap? Let's have a bird-eye view of the framework to make informed technical decisions, to make sure that we use the latest best practices, and to look into the future of our Angular projects with confidence.

The Phantom of the App: Background Services

Your user closes the browser tab and your excellent frontend app immediately disappears. But what if you want to build even better UX by keeping a portion of your app always alive - to send & receive events, to finish network operations, and to run some code even when a user does not have your website open? During my session, let's explore all the possibilities we have in the Service Worker-driven APIs to create true Phantoms of our apps. All for good: to keep the app itself and content always fresh, network operations - resilient, and user - notified This is a session about practical usage and the best practices of APIs forming Background Services of the modern browser: Background Fetch, Background Sync, Periodic Background Sync, Web Push. All in the context of Angular apps. First, I explain "why", then introduce the concept of "apps code running in the browsers' background" and then list exact possibilities: what's possible today and where, and what will be possible in the nearest future

Diving deep, deep offline – the web can do it!

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see many projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the exploration of Service Worker API (Cache Storage, Background Fetch, Background Sync) we go through the history of the offline web, treating the network as an enhancement, current challenges, solutions, and proper tooling.

What are Progressive Web Apps (PWA)

Putting aside the marketing component of this popular term, let's look at the technical details: what exactly makes an application progressive, and why PWA can be a new era in the development of the web.

Один экран хорошо, а два — лучше

Мобильные устройства с нестандарнтными экранами - двойными, гибкими, вращающимися - постепенно перестают быть экзотикой. А как мы, разработчики, можем быть уверены, что наши приложения обеспечивают наилучший UX для любой конфигурации и ориентации экрана? Давайте посмотрим, что добавилось в библиотеки Android, стандарты CSS и Web API, чтобы помочь нам с решением этой проблемы, и начтем создавать приложения с поддержкой двух и более экранов уже сегодня!

Мне не о чем выступать...

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

Автоматизируем сервис-воркер с Workbox 6

«Задеплоил сервис-воркер — нужно покупать новый домен» — известная шутка о том, как сложно писать собственную логику кеширования. С приходом шестой версии библиотеки Workbox для прогрессивных веб-приложений (PWA) больше не нужен компромисс между гибкостью и удобством автоматизации сетевых задач. Я расскажу, как начать работу с Workbox 6, реализовать типовую функциональность для офлайнового веб-приложения и пойти дальше, добавив собственную логику кеширования.

Фоновые сервисы в браузерах - есть ли жизнь после закрытия вкладки?

Пользователь закрывает вкладку в браузере, и ваше замечательное фронтенд-приложение испаряется. А что если можно было бы оставить какие-то его части еще немного поработать во благо улучшения UX? Отреагировать на какие-то события, завершить начатое общение с сетью - в общем, исполнить немного кода при закрытой вкладке и даже браузере. Я расскажу о разных интересных возможностях API из семейства сервис-воркеров, позволяющих продлить жизнь приложения, чтобы всегда иметь под рукой свежие данные, не бояться проблем с сетью, уметь показывать уведомления - все ради отличного пользовательского опыта.

Sending the Angular app into deep, deep offline with Workbox

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see more and more large and small projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the deep exploration of Service Worker API possibilities and gathered UX gotchas, we go through the history of the offline web, the importance of treating the network as an enhancement, current challenges (and their solutions) and proper tooling. We architect our offline-ready Angular app applying the best tech and UX practices adding the features one-by-one: app shell, caching resources and data, sync when online. All in name of our users who demand the new level of the resilient web experience.

The Phantom of the App: Background Services

Your user closes the browser tab and your excellent frontend app immediately disappears. But what if you want to build even better UX by keeping a portion of your app always alive - to send & receive events, to finish network operations, and to run some code even when a user does not have your website open? During my session, let's explore all the possibilities we have in the Service Worker-driven APIs to create true Phantoms of our apps. All for good: to keep the app itself and content always fresh, network operations - resilient, and user - notified This is a session about practical usage and the best practices of APIs forming Background Services of the modern browser: Background Fetch, Background Sync, Periodic Background Sync, Web Push. All in the context of Angular apps. First, I explain "why", then introduce the concept of "apps code running in the browsers' background" and then list exact possibilities: what's possible today and where, and what will be possible in the nearest future

Taking your web app offline (in a good sense)

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see many projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the exploration of Service Worker API (Cache Storage, Background Fetch, Background Sync) we go through the history of the offline web, treating the network as an enhancement, current challenges, solutions, and proper tooling.

Фоновые сервисы в браузерах - есть ли жизнь после закрытия вкладки?

Пользователь закрывает вкладку в браузере, и ваше замечательное фронтенд-приложение испаряется. А что если можно было бы оставить какие-то его части еще немного поработать во благо улучшения UX? Отреагировать на какие-то события, завершить начатое общение с сетью - в общем, исполнить немного кода при закрытой вкладке и даже браузере. Я расскажу о разных интересных возможностях API из семейства сервис-воркеров, позволяющих продлить жизнь приложения, чтобы всегда иметь под рукой свежие данные, не бояться проблем с сетью, уметь показывать уведомления - все ради отличного пользовательского опыта.

Фоновые сервисы в браузерах - есть ли жизнь после закрытия вкладки?

Пользователь закрывает вкладку в браузере, и ваше замечательное фронтенд-приложение испаряется. А что если можно было бы оставить какие-то его части еще немного поработать во благо улучшения UX? Отреагировать на какие-то события, завершить начатое общение с сетью - в общем, исполнить немного кода при закрытой вкладке и даже браузере. Я расскажу о разных интересных возможностях API из семейства сервис-воркеров, позволяющих продлить жизнь приложения, чтобы всегда иметь под рукой свежие данные, не бояться проблем с сетью, уметь показывать уведомления - все ради отличного пользовательского опыта.

Taking your web app offline (in a good sense)

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see many projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the exploration of Service Worker API (Cache Storage, Background Fetch, Background Sync) we go through the history of the offline web, treating the network as an enhancement, current challenges, solutions, and proper tooling.

Taking your web app offline (in a good sense)

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see many projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the exploration of Service Worker API (Cache Storage, Background Fetch, Background Sync) we go through the history of the offline web, treating the network as an enhancement, current challenges, solutions, and proper tooling.

The Phantom of the App: Background Services

Your user closes the browser tab and your excellent frontend app immediately disappears. But what if you want to build even better UX by keeping a portion of your app always alive - to send & receive events, to finish network operations, and to run some code even when a user does not have your website open? During my session, let's explore all the possibilities we have in the Service Worker-driven APIs to create true Phantoms of our apps. All for good: to keep the app itself and content always fresh, network operations - resilient, and user - notified This is a session about practical usage and the best practices of APIs forming Background Services of the modern browser: Background Fetch, Background Sync, Periodic Background Sync, Web Push. All in the context of Angular apps. First, I explain "why", then introduce the concept of "apps code running in the browsers' background" and then list exact possibilities: what's possible today and where, and what will be possible in the nearest future

Taking your web app offline (in a good sense)

アプリケーションプラットフォームとしてのWebは驚くべきものです。 UIを備えたほぼすべてのデバイスには、ブラウザーまたは何らかのWebビューが存在しています。今ではハードウェアにアクセスするためのネイティブAPIがあり、優れたツールを備えた汎用言語を使用されています。結局のところ、現在の開発者コミュニティ巨大で史上最大のサイズです！しかしWebはこれまで常にネットに接続されているのが前提となっていました。 私のセッションでは、最新のWeb APIといくつかのベストプラクティスにより、オフライン優先のWebアプリを構築できるケースを紹介します。常に利用可能、データ消費に配慮、保存と同期、接続に関係なく、ネイティブアプリに匹敵する（あるいはさらに優れている）UXを提供します。 さらにツールの現在の状態により、これらの機能を高速かつ信頼性の高い方法で追加できます。オフライン優先アプリを作成して、非常に実用的な方法でオフラインWebを実現しましょう！

Taking your web app offline (in a good sense)

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see many projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the exploration of Service Worker API (Cache Storage, Background Fetch, Background Sync) we go through the history of the offline web, treating the network as an enhancement, current challenges, solutions, and proper tooling.

Background-enabled Web Apps

Diving deep, deep offline — the web can do it

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see many projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the exploration of Service Worker API (Cache Storage, Background Fetch, Background Sync) we go through the history of the offline web, treating the network as an enhancement, current challenges, solutions, and proper tooling.

Diving deep, deep offline — the web can do it

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see many projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the exploration of Service Worker API (Cache Storage, Background Fetch, Background Sync) we go through the history of the offline web, treating the network as an enhancement, current challenges, solutions, and proper tooling.

Service Worker: taking the best from the past experience for the bright future of PWAs

There is no doubt that 2018 is the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. And the speed and smoothness of this process heavily depend on how correctly we, developers, use the power of new APIs. The main one in PWA concept is Service Worker API, which is responsible for all offline magic, network optimizations and push notifications. In my session based on accumulated experience of developing and maintaining PWAs we - go through the list of advanced tips & tricks, - showcase best practices, - learn how to avoid common pitfalls, - have a look at the latest browser support and known limitations, - share lots of useful insights. All on the way to the #YearOfPWA, all for delighting our users by the truly modern web applications.

Diving deep, deep offline — the web can do it

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see many projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the exploration of Service Worker API (Cache Storage, Background Fetch, Background Sync) we go through the history of the offline web, treating the network as an enhancement, current challenges, solutions, and proper tooling.

Погружение в глубокий офлайн - веб способен на это!

Прогрессивные веб-приложения уже получили действительно широкую известность и признание всеми вовлеченными сторонами: разработчиками браузеров (наконец, всеми!), разработчиками, пользователями. Идея приложений, не зависящих от подключения к сети, доказала свою жизнеспособность, и мы видим все больше и больше проектов, идущих по этому пути, что делает возможность работы в офлайне не только лучшей практикой, но просто и хорошей манерой в вебе. В моем докладе, основанном на глубоком исследовании возможностей Service Worker API (с использованием Cache Storage, Background Fetch, Background Sync) и собранных UX-находках, мы рассмотрим историю офлайн веба, важность рассмотрения подключения как привилегии, текущие проблемы (и их решения) и правильные инструменты. В течение докдада мы спроектируем приложение, готовое к работе офлайн, применяя лучшие технологии и UX-практики и добавляя возможности одна за одной: оболочка приложения, кеширование ресурсов и данных, синхронизация при подключении к сети. Все ради наших пользователей, которые требуют нового уровня отказоустойчивости и скорости работы наших приложений.

Building an Angular PWA: Angular Service Worker or Workbox?

There is no doubt that 2018 is the #YearOfPWA. It’s the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. Angular developers are lucky to have some really nice options to automate their PWA’s main functionality exposed by Service Worker API. The first option is 100% native to the Angular and created by the Angular team: Angular Service Worker. The second one is a framework-agnostic library called Workbox. Both approaches are robust, convenient and unique! Let’s go through the main features of PWA implemented using NGSW vs Workbox and the resulting application lifecycle management. After the session, everyone will give their own answer on what’s easier to start with, which library is simpler to use, which resulting PWA is more convenient to maintain.

Практический мастер-класс по PWA: сделаем веб-приложение прогрессивным за один час!

1. Определяем общую цель и конкретные задачи, что нужно, чтобы наше приложение стало PWA. 2. Устанавливаем и настраиваем наше рабочее окружение. 3. Создаем и регистрируем наш первый сервис-воркер. Изучаем возможности Dev Tools браузера касательно PWA. 4. Отправляем наше приложение в оффлайн - на практике знакомимся с библиотекой Workbox. 5. Оптимизируем работу с сетью - кешируем запросы к API, используя разные стратегии. 6. Отдыхаем от кодинга - составляем Web App Manifest, чтобы наше приложение стало устанавливаемым. 7. Проверка итоговой “прогрессивности” нашего приложения, подведение итогов. 8. Пара слов о других интересных возможностях сервис воркеров и о будущем PWA.

Many frameworks - one PWA solution

There is no doubt that 2018 is the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. How does PWA concept play with YOUR favorite framework? React, Angular, Vue, #FrameworkOfTheWeek? In my technical session we’ll check what major frameworks creators prepared for us regarding scaffolding / adding PWA features (spoiler: only basic features), and switch to Workbox. We’ll see that Workbox is a library providing many sophisticated service worker features in a simple, developer-friendly form. Also, we’ll talk about another advantage of Workbox - the flexibility: you build your own service worker and automate some tasks using this library. As the outcome, you’ll be ready to make a production-ready PWA from the app built on any framework.

Diving deep, deep offline — the web can do it

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see many projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the exploration of Service Worker API (Cache Storage, Background Fetch, Background Sync) we go through the history of the offline web, treating the network as an enhancement, current challenges, solutions, and proper tooling.

Building an Angular PWA: Angular Service Worker or Workbox?

There is no doubt that 2018 is the #YearOfPWA. It’s the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. Angular developers are lucky to have some really nice options to automate their PWA’s main functionality exposed by Service Worker API. The first option is 100% native to the Angular and created by the Angular team: Angular Service Worker. The second one is a framework-agnostic library called Workbox. Both approaches are robust, convenient and unique! Let’s go through the main features of PWA implemented using NGSW vs Workbox and the resulting application lifecycle management. After the session, everyone will give their own answer on what’s easier to start with, which library is simpler to use, which resulting PWA is more convenient to maintain.

Погружение в глубокий офлайн - веб способен на это!

Прогрессивные веб-приложения уже получили действительно широкую известность и признание всеми вовлеченными сторонами: разработчиками браузеров (наконец, всеми!), разработчиками, пользователями. Идея приложений, не зависящих от подключения к сети, доказала свою жизнеспособность, и мы видим все больше и больше проектов, идущих по этому пути, что делает возможность работы в офлайне не только лучшей практикой, но просто и хорошей манерой в вебе. В моем докладе, основанном на глубоком исследовании возможностей Service Worker API (с использованием Cache Storage, Background Fetch, Background Sync) и собранных UX-находках, мы рассмотрим историю офлайн веба, важность рассмотрения подключения как привилегии, текущие проблемы (и их решения) и правильные инструменты. В течение докдада мы спроектируем приложение, готовое к работе офлайн, применяя лучшие технологии и UX-практики и добавляя возможности одна за одной: оболочка приложения, кеширование ресурсов и данных, синхронизация при подключении к сети. Все ради наших пользователей, которые требуют нового уровня отказоустойчивости и скорости работы наших приложений.

Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт

- Веб доказал свою применимость в качестве платформы для создания приложений и сервисов практически любого масштаба и направленности. - Новые веб-API позволяют полноценно использовать функциональность устройств, так что клиентской части веб-приложений больше незачем себя ограничивать рамками браузера. - Набор API, спецификаций и подходов к разработке, позволяющий создавать практически “нативные” приложения для любой платформы, используя навыки веб-разработчика, получил название PWA (Progressive Web Applications). - Сегодняшняя поддержка PWA всеми основными разработчиками браузеров говорит о том, что это может быть одним из главных векторов развития и распространения веб-технологий. - В выигрыше оказываются и разработчики (единая кодовая база), и пользователи (легкие, быстрые, функциональные приложения).

PWA: Push Notifications

PWA: App Manifest, Add to Home Screen

Building a Progressive Web Application

In part one of this three-part hands-on coding series, we’ll look at why the idea of Progressive Web Apps has become so popular, which APIs are in the game, and where (browsers/platforms) PWAs work. We start by answering these questions and then dive directly into coding a minimum viable PWA to understand the foundations of Service Workers and to make sure that it’s cool to have some helper tools there. Feel free to either just watch, or code along too!

Building an Angular PWA: Angular Service Worker or Workbox?

There is no doubt that 2018 is the #YearOfPWA. It’s the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. Angular developers are lucky to have some really nice options to automate their PWA’s main functionality exposed by Service Worker API. The first option is 100% native to the Angular and created by the Angular team: Angular Service Worker. The second one is a framework-agnostic library called Workbox. Both approaches are robust, convenient and unique! Let’s go through the main features of PWA implemented using NGSW vs Workbox and the resulting application lifecycle management. After the session, everyone will give their own answer on what’s easier to start with, which library is simpler to use, which resulting PWA is more convenient to maintain.

Building an Angular PWA: Angular Service Worker or Workbox?

There is no doubt that 2018 is the #YearOfPWA. It’s the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. Angular developers are lucky to have some really nice options to automate their PWA’s main functionality exposed by Service Worker API. The first option is 100% native to the Angular and created by the Angular team: Angular Service Worker. The second one is a framework-agnostic library called Workbox. Both approaches are robust, convenient and unique! Let’s go through the main features of PWA implemented using NGSW vs Workbox and the resulting application lifecycle management. After the session, everyone will give their own answer on what’s easier to start with, which library is simpler to use, which resulting PWA is more convenient to maintain.

Make your Azure DevOps pipeline talk to you loud and clear

Let's explore the possibilities of Azure DevOps in integrating with the external services: why not to receive the status of build in our Slack team? Or maybe create a card in Trello for every deploy? What about dozen of other out-of-the-box integrations? But what if we want to go deeper and build the integration with our own service - for example, with a PWA sending Push notifications about the next successful release. It's also possible - we'll have a look at Azure DevOps webhooks. Btw what are we going to use to build and deploy that custom notifications service? Sure! Azure DevOps again!

PWA For Production In 1-2-3. Part 2

We take the latest version of the awesome Workbox library to see how easy is to automate all the offline-ready functionality we need for PWA while still keeping a full control on the service worker behavior. Agenda: What are the cons and challenges of the manually written service workers Introducing Workbox Automating application shell lifecycle: from building to serving Organizing a proper UX for the app update Runtime caching: strategies What is background sync and how to implement it using Workbox Proper registration of Workbox in your app

Погружение в глубокий офлайн - веб способен на это!

Прогрессивные веб-приложения уже получили действительно широкую известность и признание всеми вовлеченными сторонами: разработчиками браузеров (наконец, всеми!), разработчиками, пользователями. Идея приложений, не зависящих от подключения к сети, доказала свою жизнеспособность, и мы видим все больше и больше проектов, идущих по этому пути, что делает возможность работы в офлайне не только лучшей практикой, но просто и хорошей манерой в вебе. В моем докладе, основанном на глубоком исследовании возможностей Service Worker API (с использованием Cache Storage, Background Fetch, Background Sync) и собранных UX-находках, мы рассмотрим историю офлайн веба, важность рассмотрения подключения как привилегии, текущие проблемы (и их решения) и правильные инструменты. В течение докдада мы спроектируем приложение, готовое к работе офлайн, применяя лучшие технологии и UX-практики и добавляя возможности одна за одной: оболочка приложения, кеширование ресурсов и данных, синхронизация при подключении к сети. Все ради наших пользователей, которые требуют нового уровня отказоустойчивости и скорости работы наших приложений.

Workbox v4: a brand new workbox-window module

The next major version of the very popular PWA helper library was just released. Workbox 4 brings many interesting additions to the existing modules and only a few minor breaking changes. Also, it ships one totally new module called workbox-window, to fulfill the need of developers in a simple and powerful way to register the service worker, to hook into its lifecycle, and to provide a bi-directional communication channel with the app. This is the first module of Workbox to be used in the window context, i.e. in our application’s (not service worker’s) code. Let’s explore this new module to check what will it take to build the well-known “refresh-to-update-version” technique — one of the UX best practice for PWA.

Diving deep, deep offline without drowning – the web can do it!

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see more and more large and small projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the deep exploration of Service Worker API possibilities (using Cache Storage, Background Fetch, Background Sync) and gathered UX gotchas, we go through the history of the offline web, the importance of treating the network as an enhancement, current challenges (and their solutions) and proper tooling. We architect our offline-ready app applying the best tech and UX practices and adding the features one-by-one: app shell, caching resources and data, sync when online. All in name of our users who demand the new level of the resilient web experience. The section is mix of visionary and technical pieces. During „building“ our offline-ready app, we go through code samples, UX best practices, learn how to avoid pitfalls, find workarounds for non-supported features.