Sessions

Wednesday, October 5, 2022

  1. Getting Started with PWAs - Workshop

    2:00 AM - 5:55 AM

    This workshop will help you take your web project to the next level with Progressive Web Apps (PWAs) technology. The workshop will start off with an explanation of what PWAs are (and what they’re not), the use cases for and benefits of building them, and solid approaches to creating them. Then step-by-step, through the process of turning a website into a PWA. Following along, you’ll author Web App Manifests and Service Workers and gain exposure to some next-gen APIs that tie them more deeply into the underlying operating system. By the end of the workshop, you’ll walk away with a functional PWA you can use right away.

    • Maxim Salnikov

  2. Improve user experience with OS Integrations - Workshop

    2:00 AM - 5:55 AM

    You have created an installable web app that can reach users in whichever device they prefer, but being installable is not enough. Users expect the app to be integrated in the platform, take advantage of the app features the OS offers. In this workshop we’ll start with a simple app scaffold and build those features that you can add to make your users happy. For example we’ll add shortcuts, implement share, set your app as share target as well, create specific ui with windows controls overlay and more!

    • Diego Gonzalez

  3. Challenges in storing large amounts of client-side data

    6:10 AM - 6:30 AM

    There are several web APIs that allow you to store data locally on the user’s device, some that even allow working with large datasets. But for large local datasets, there are currently some challenges related to the functionality of current APIs and how easy it can be for the user’s data to inadvertently be deleted, whether by accident or by some automated background cleanup by the browser to save space. In this talk I will discuss the current state of PWAs using large amounts of local data, as well as look to the future for how the situation could be improved.

    • Jeremy Scheff

  4. How well do you know PWAs?

    6:30 AM - 6:50 AM

    During this interactive session, we will test how much you know about PWAs! Progressive Web Apps nowadays can be resilient, provide an offline interaction, be accessible, discoverable, and more. Let’s see which are other latest capabilities, best practices, and other useful information taking this quiz.

    • Laura Morinigo

  5. Modern PWA: A winning combo for the best client experience

    6:50 AM - 7:10 AM

    o Mainstream client applications are moving to Progressive Web Applications quickly due to its combined benefits of near-native performance and Web scale reachability. It is a must for Intel to ensure these PWAs deliver the leading power, performance and responsiveness on Intel client platforms through optimizations in the underlying Web engine and by leveraging the latest XPU based heterogenous and hybrid architecture.
    o This session illustrates the latest Chrome browser optimizations on Intel heterogenous and hybrid architecture as well as our practices on HW/SW co-design for dominant use cases including Web browsing, video streaming, video conferencing through tight collaboration with the developer ecosystem. Based on these use cases, a scenario-dependent Chromium power optimization framework has been established to achieve power-efficient management of threads, timers, tasks, etc. We look forward to sharing the winning combo for the best client experience.

    • Kenneth Christiansen

  6. Getting Started with PWAs - Workshop

    10:00 AM - 1:55 PM

    This workshop will help you take your web project to the next level with Progressive Web Apps (PWAs) technology. The workshop will start off with an explanation of what PWAs are (and what they’re not), the use cases for and benefits of building them, and solid approaches to creating them. Then step-by-step, through the process of turning a website into a PWA. Following along, you’ll author Web App Manifests and Service Workers and gain exposure to some next-gen APIs that tie them more deeply into the underlying operating system. By the end of the workshop, you’ll walk away with a functional PWA you can use right away.

    • Aaron Gustafson

  7. Wonderful Workders - Workshop

    10:00 AM - 10:20 AM

    Workers are wonderful! They can give your web app superpowers that you didn’t even know you needed. In this workshop, you’ll learn how to identify when, and how, to move code from your main thread to a worker, and practice doing so by moving a state manager to a shared worker and templating to a service worker! When you leave, you’ll be ready to add workers, and wonder, to your web app.

    • Sam Richard

  8. Web apps for everyone, everywhere: PWAs to the rescue of people in low-internet areas

    2:10 PM - 2:30 PM

    As technology continues to expand in our lives, we see a greater need for applications that provide functionality under different network conditions. PWAs are well-known for mixing the best of the native and web worlds into applications that provide reliable offline experiences and are easy to use and share.

    In this session, you will learn how to take advantage of what PWAs offer to make your project suitable for people living in areas where internet access is intermittent. Most code samples belong to a case study of an application conceived for rural people living in areas lacking stable internet access, such as farmers, peasants, and agricultural technicians. We will cover exciting stuff such as browser support for PWA features essential for an offline experience, installability, offline CRUD actions with IndexedDB, and how to make updates readily available for our users.

    You will get the most out of this session if you understand the basics of Service Workers, but it will be a beginner-friendly talk.

    • Alicia Rojas

  9. From Starter App to Store Package with PWABuilder

    2:30 PM - 2:50 PM

    This session will be an overview of the PWABuilder toolchain and how it helps developers build and publish high quality PWAs, with tooling for every step of the development process. The session will cover all three of the main PWABuilder tools: the PWA Starter template application, the PWA Studio VS Code extension, and the PWABuilder packaging tool itself. All three tools interact with each other and will be presented as a continuous development process for building progress web apps.

    • Justin Willis

  10. YouTube's PWA Journey

    2:50 PM - 3:10 PM

    During this talk, we’ll discuss YouTube’s experience working with service workers to enable offline playback. We’ll cover the journey to expand support to more browsers, and go through some performance tradeoffs. We’ll also discuss how new browsers API are used to make the website look & feel like a native app. Finally we’ll touch briefly on the ongoing work to bring PWA and Service Workers to our open source browser, Cobalt.

    • Bogdan Balas

  11. Getting Started with PWAs - Workshop

    4:30 PM - 8:25 PM

    This workshop will help you take your web project to the next level with Progressive Web Apps (PWAs) technology. The workshop will start off with an explanation of what PWAs are (and what they’re not), the use cases for and benefits of building them, and solid approaches to creating them. Then step-by-step, through the process of turning a website into a PWA. Following along, you’ll author Web App Manifests and Service Workers and gain exposure to some next-gen APIs that tie them more deeply into the underlying operating system. By the end of the workshop, you’ll walk away with a functional PWA you can use right away.

    • Cecilia Cong

    • Palances Liao

  12. Improve user experience with OS integrations - Workshop

    4:30 PM - 4:50 PM

    You have created an installable web app that can reach users in whichever device they prefer, but being installable is not enough. Users expect the app to be integrated in the platform, take advantage of the app features the OS offers. In this workshop we’ll start with a simple app scaffold and build those features that you can add to make your users happy. For example we’ll add shortcuts, implement share, set your app as share target as well, create specific ui with windows controls overlay and more!

    • Adriana Jara

  13. Building Flipkart Ads PWA - The Journey

    8:40 PM - 9:00 PM

    1. Proposition - why build a mobile client for Flipkart Ads

      Flipkart Ads, built back in 2019, mostly functions as a Desktop application till date. With our increasing user base, users were inclined to operate ads on mobile form factor as well, thus starting our journey of building the Flipkart Ads platform for Mobile.

    2. How did we arrive at PWA

      Being web developers the team was quite equipped with skills related to web frameworks and technologies. Web has come quite far in providing great experiences especially on mobile. Combining this with the ease of use and reach (cross platform) of web we eventually decided to build our Ads platform for mobile as a PWA

    3. We wanted to provide the best experience to our users and thus our major areas of focus were

    3.1 Offline first

    We wanted our application to be network resilient and function under all situations. Starting off with an offline first approach helped in achieving that.

    Our application uses a tweaked version of StaleWhileRevalidate Strategy which ensures that the application loads instantly provided the data is available in cache, but resolving with updated data by consulting with network thereafter

    3.2 Richer Install

    UX for installation for PWA has received great overall for browsers like chrome (a very large portion of our user base), thus allowing us to provide an experience that truly mimics an app install

    Timing is critical when it comes to installation, thus having the capability to decide when to trigger the installation helped us in being less intrusive for the user and only asking when they have spent sufficient time in the application.

    3.3 Performance

    Our application has a shell content architecture where some portion of the shell is Server Side Rendered and upon rendering, the client takes over with updating the data

    We define our performance under two categories

    3.3.1 Load time Performance - mostly looks at load performance and is mostly defined by core web vitals metrics

    3.3.2 Run time Performance - looks at the performance while the user is using the application, this includes performance like scrolls, animations, api latencies, page to page navigations etc.

    Since our application is route chunked, to provide better performance during page to page navigation, we maintain a graph that defines the set of associated (secondary) routes for the main route. These secondary routes are prefetched while the user is surfing on the main route.

    Correctness with performance is one of the top priorities for our application. Access control is one of the defining pillars for our application. The fact the shell is also cached, our PWA ensures that access control information is always up-to-date. Thus we aren’t limited only to prefetching static assets but we also make a high priority api prefetch request to get the updated access control information this is mostly utilized in repeat visits when the shell is served from the cache

    1. Infra and arch reuse

    The Server side was already hosted on a graphql service that helped us in making flexible queries for each user agent (desktop/mobile). The PWA, hosted as a micro frontend, mostly piggybacks on the already existing infrastructure for authentication and authorization built for the desktop application. We define Access Controls for both url routes as well as api routes. For ex: 1. URL based access control could be defined like: <Route path=”campaigns” component={Campaigns} roles={[“Admin”]} />

    2. Api authorization is implemented using graphql directives. For e.g.: type Query { getData: Data @authorization(roles: [“Admin”]) }

    1. Service Worker and Responsibilities

    Service Worker is responsible for caching both the shell and the data, since we use POST Http verb for graphql requests our service worker basically handles the conversion while caching the responses One of the biggest challenges with caching is cache eviction, we use workbox for defining and implementing the service worker this allows us to provide more nuanced controls like time based expiration for Cache entries.

    Since we use tweaked version of StaleWhileRevalidate Strategy the plugin system and extensible strategy system helped in achieving that

    Ex Strategy: class StaleWhileRevalidateForPost extends StaleWhileRevalidate { constructor(options) { this.super(options); }

    _handle(request, handler, …) { // Process the request } }

    Ex Plugin: export const CacheFetchReportPlugin = { // listen to certain lifecycle updates }

    Our Application follows the SemVar versioning system and this allows us to define how the application should react to the version changes, ex: minor, moderate or breaking changes. The SemVar Version is also used to define the kill switch for the service worker, in case something goes wrong wrt persistent caching Basically Service worker maintains the local version of the application and if the changes wrt to the remote version are breaking it ensures that the relevant caches are cleared

    1. Things going ahead

    2. How we can use Http Early Hints for our PWA

    3. Implementing Push Notification to send communication to our users

    • Abinash Mohapatra

  14. Expanding developer control on PWA installation.

    9:00 PM - 9:20 PM

    Since the beginning of PWAs Chromium has played a central role in empowering developers to create app experiences: enabling websites to be installed and launched like platform apps, developing standards with the community to create capabilities that were missing from the web and developing integrations with different platforms to allow the web to serve users wherever they are.

    Indeed in the last few years we’ve seen a jump on the kind of app experiences that can be created completely on the web, from game streaming platforms, Photoshop and entire development environments like VS Code.

    With the experience gained in the last years Chrome is revisiting one of the first capabilities created to integrate web apps into other platforms: installability. This talk will walk you through the technical changes coming to provide developers with more control over their web app installation, why the changes are happening, what other experiments you can expect and what you’ll need to know to keep serving your users with a frictionless install experience.

    • Adriana Jara