 Hello, everyone. My name is Alexandra. I'm co-founder and CTO at Opticals, a platform for creating progressive web apps and co-founder at Codette, a community for women interested in ITNC. As an extension of our platform, we also have a workplace plugin called Workplace Mobile Pack with over 1 million downloads. I have a technical background. I'm a full-stack developer and before founding Opticals, I owned an Outsourcing company. I'm an alumni of two business accelerators, start up with Camping Copenhagen and prosper women entrepreneurs in the United States. Tonight, I'm going to talk to you about progressive web apps, what they are and how to develop a series of progressive web apps that can be connected with WordPress and WooCommerce. Let's dive in. Progressive web apps are a new way to deliver amazing user experiences on the web. Google, who invented the term, describes them as being reliable, fast, and engaging. But what exactly does that mean? Let's get a little bit more technical. A progressive web app has the following capabilities. Offline mode, add to home screen or web app install banners and web push notifications. With the introduction of the web push API, we can now send push notifications to our users even when the browser is closed. Offline mode, add to home screen and web push notifications are all implemented using service workers. In addition, a progressive web app might be secured using HTTPS and it might use an application shell or app shell architecture that instantly loads on the user screen similar to what you see in native applications. But how is that different from responsive web design? Well, we all know what responsive web design is. We take the same code and content and rearrange it to fit on smaller screens. A progressive web app has responsive capabilities in the sense that it can adapt to different screen sizes. But its unique value proposition are the features that make it app-like. In addition, last year Forester identified that responsive web design has reached saturation with over 87% of digital experience makers embracing it and that a shift in customer's expectations to prefer app-like user experiences on the web is taking place before our eyes. So why progressive web apps? Building a high quality progressive web app makes it really easy to delight users, grow engagement and increase conversions. And there are several examples of companies that have successfully improved their metrics by using progressive web apps. You can find a lot of them on Google's developers website. I'm just going to give you two examples. Alibaba.com created a progressive web app that led to a fast, effective and engaging mobile web experience. Their new strategy delivered a 76% increase in total conversions across browsers and a four times higher interaction rate from add-to-home screen. In another use case, OLX wanted to re-engage mobile web users by using add-to-home screen and push notifications. They have increased engagement by 250% and other metrics improved as well. The time until the page became interactive fell by 23% with an 80% drop in bounce rates. Monetization also improved with a click-to-rate rising 146%. Since e-commerce is one of the main areas where a progressive web app can bring immediate benefits, let's see how we can build one on top of WordPress and WooCommerce. First of all, being progressive is a score, it's not a yes or no. And there's a Chrome plugin called Lighthouse that you can use to measure that score. Lighthouse generates a report with all the progressive web apps characteristics. Basically, it's telling us what we need to change in order for a web app to become fully progressive. Moving on to technology and as you have probably realized from the list of features that I have already presented, being progressive of progressive web app is framework agnostic. However, the majority of them are built using AngularJS or React because these are the most popular JavaScript frameworks at the moment. They both have their advantages. AngularJS and Ionic is a pretty popular combination nowadays. And Ionic is a great framework that was initially built for mobile applications and afterwards expanded to progressive web applications and even desktop apps. React is really intuitive and easy to understand and benefits from a great boilerplate called Create React App that comes with progressive web app support by default. Besides these two, ViewJS is also gaining in popularity. The examples I'm going to give in the next part of the presentation are based on React. So, the first thing that we need to do when we start creating an application is an API from where we can retrieve the content. Fortunately, the inclusion of the REST API in the core has opened the door for using WordPress as a backend. In addition, for e-commerce applications, we can use the WooCommerce REST API. WooCommerce also has an NPM package that we can use for making API calls. But unfortunately, this one requires both the consumer key and the consumer secret in order to authenticate requests. We would have a major security issue if we use the consumer secret in a front-end application. In addition, when creating these keys from the WooCommerce admin panel, it's not possible to specify permissions at the root level, for example, allowing read access for products and categories and only create access for orders. So, the first thing that we did was to create a proxy, a gateway in our WordPress plugin from where we could restrict access to particular endpoints. And we used the WooCommerce PHP wrapper as a base. You can see here a very basic example of initializing the WooCommerce client by using the consumer key and consumer secret. And in the two methods below, we create another custom root called product, and we map that root to product categories from the WooCommerce REST API. In this way, like I mentioned, we can restrict access to particular API endpoints and we keep the consumer key and the consumer secret in the back-end code. Once we have set up the API, we can start working on our React application. And we first need to install Node.js and NPM globally, and afterwards, we can use the Create React app boilerplate to generate a new application. This is an example of an application that was generated using this boilerplate. And as you can see, it has everything that we need to start coding, including registered service workers and live reload. When it comes to organizing the application, I prefer to use a folder by feature structure because this allows better scalability. I also add linters and coding standards from the beginning because this makes it really easy to clean up the code. For example, deleting unused dependencies and make sure that the data is validated properly at the component level. I also prefer to use more React components because this makes it really easy to test and to manage them. And as a rule of thumb, you can start by adding code to a single React component, and once it gets bigger, you can split it into smaller components. For UI and UX elements, there are several libraries out there that you can use, such as Material UI, Semantic UI, or React Bootstrap. And these libraries are basically sets of ready-made components, such as grids, cards, menus, buttons, and so on, that we can immediately add to an application. Here's an example of an application that was created using Semantic UI. And on the screen, you can see a list of categories, a list of products, and a side menu. Let's see some code samples from this application, and you'll see how easy it is to work with React. Here we have an example of a custom React component called categories. The purpose of this component is to read the categories data from the API and, afterwards, render a categories list. In the constructor method, we initialize the state of the component by using an empty list of categories. Afterwards, in the component-will-mount method that is automatically called by React before render, we make a call to the API to fetch the categories data. Once we get back a response, we write the categories data to the component state. In the render method, we just return another custom component called categories list that receives the categories data as a prop. As you can see, there's no need to call render after we get the API response because React takes care of that for us. Basically, it re-renders the component when the state is updated. The categories list component looks something like this. It just iterates over the categories data and renders a single category element by using another custom component called category card. All these components communicate by passing props between them. The main categories component calls the API and once it gets back the categories data, it passes that down to the categories list component. In its turn, the categories list renders multiple category cards and passes down the category details to each of them. The problem with this approach is that sometimes we have data that needs to be managed at the application level. For example, a list of products that were added to the shopping cart. We want those products to be displayed on the checkout pages, but we can also have, let's say a shopping cart icon in the header bar that needs to show the number of cart products. Of course, we could use a parent component to manage all that data and pass down props to each of the child components, but that becomes very tedious and difficult to manage on larger scale applications. In comes Redux, which is a library used for managing the global app state. Using Redux doesn't mean that we can have state or props at the component level, so Redux should be used only for managing data that makes sense at the application level. Let's see an example of reading a list of products from the API and render them in a list similar to what we did with categories, but this time using Redux. The first thing that we need to do is to create a link between our application store, sorry, between our application and the app store that is managed by Redux. And we do this by using the combined reducers method from Redux. And in this case, in this example, the app store is composed of a list of categories and a list of products that are merged together by using the combined reducers method. Afterwards, we can move on and start creating Redux actions. Actions are plain JavaScript objects that have a type property and they are like events that propagate through the whole application. So when an action happens, the whole application will be informed. Since JavaScript is asynchronous, we're going to need two actions, one that is triggered when we make a request through the product and one that is triggered when we get back a response. We also define another function called fetchProducts that dispatches the requestProducts action, calls the API to get the product data and when the API comes back with the response, it dispatches the receiveProducts action. To modify the global app state, we use a so-called reducer and a reducer is just a function that listens to particular actions and modifies the global app state depending on those. In this case, the product reducer doesn't do anything when it sees that a requestProducts action has happened. It just returns the current state. However, when it sees that a receiveProducts action has happened, it returns the products that are dispatched as part of the action. In this case, it will be the list of products that we read from the API. To wrap things up, we use these actions and reducer in another custom component called products. And the first thing that we do is to create the link between this component and the Redux app store by wrapping the component into the connect method from reactRedux. Afterwards, in the component will mount method with just dispatchFetchProducts. In the render method, return another custom component called productsList. And as compared to the example that we have seen before for categories, this component doesn't receive any data as part of its props. That is because we can link the productList component directly to Redux and we use the same connect method to do that. In this way, this component can have access to the products data directly from the Redux app store. It iterates over the list of products and renders a single product element by using another custom component called productCard. So these are very basic examples of how to read data from the API and display it. But what if we wanted to add user interactions? For example, adding a product to the shopping cart. Well, in this case, when the user presses the add to cart button, we just dispatch another action called add to cart. That also contains the product information. For example, the product ID, the product name if we want to save that and of course the quantity. Afterwards, we can have another reducer called cartProducts that listens to that particular action and updates the data from the Redux store. In the header where we have the button showing the number of products that are added to cart, we can connect that component to the Redux app store and the component will update itself accordingly when there's a change on cart products. You can see here that we don't maintain a separate reducer for counting the products from the shopping cart. And as a rule of thumb, it's good to have a single point of truth in the application for the Redux data. So these are basic examples on how to get you started with React and Redux. And you're probably wondering by now how we make the connection between this application and WordPress. Well, we can host the application on a separate domain or subdomain and since it's a fully frontend application, we just need to let it connect to the API. Or we can use it as a WordPress theme. And for that, we just create a simple index PHP file that contains the links to the production JavaScript and CSS files. Since we have used the create react app boilerplate, it's actually really easy to generate the production files. We just need to run a command. In the final part of the presentation, I'm going to talk a little bit about features that require service workers. And these are offline mode add to home screen or web app install banners and web push notifications. Just on a small note, all features that are implemented using service workers require that the application is secured using HTTPS. For offline mode, there are two things that we need to take into consideration. One is caching the files, the application files, and the other one is caching the data that we read from the API. For caching the files, we just need to create, we just need to register a service worker that will handle the caching for us. And a service worker is just a basic JavaScript file that knows how to register itself in the browser. There are several examples of strategies that you can use for offline caching. And there's a Google offline cookbook that you can use and you'll see all of them in there displayed with explanations on how to implement them. This is an example of such a strategy called network falling back to cache. And this one is really useful for caching resources that update often, such as articles, social media timelines, avatars, and so on. Caching the application files also has incredible benefits even when the user has a network connection because the application will load so much faster. And as compared to regular browser caching that you have, I'm sure you have used before, the difference is that service workers give you complete control over network requests. If you want to go even further and start caching the application data, then we need to start making changes to the application code. And there's a library called Redux Persist that you can use for that. And what this library does is to facilitate writing and reading data from the browser's local storage. This is a very basic example of how to set up Redux Persist. It basically, it is a wrapper over the application store and it's more like a set it and forget it set up. So once you do that, you know that the data will be read and retrieved from the browser's local storage. Moving on to web app install banners or add to home screen. I'm sure you have seen this before. They are basically notifications for adding an application on the user's home screen. And for these notifications to work, we need to create a manifest JSON file that contains information about the application, such as the pass to the application icons, the app name, background color, and of course the start URL. Add to home screen is completely controlled by the browser, meaning that the browser decides on when to show the notification depending on user engagement. What user engagement means is currently being redefined and you can read about it in the documentation. It used to be on the second visit with at least five minutes between visits. But like I said, this is currently being changed. For web push notifications, you can take a look at the one signal free WordPress plugin. And one signal is a service that takes care of delivering notifications to the user's devices. What happens is that when a notification reaches the user's device, the browser wakes up the service worker and the push event is dispatched. You don't need to worry about all that stuff because one signal works great and takes care of that for us. And it also works with responsive teams. So it is possible to add web push notifications even to responsive teams and desktop websites. That's it for my presentation. On the screen, you have a few links. One of them is a GitHub repository where we have published the sources for the application I just presented if you want to take a look. The other one is a WordPress plugin that uses the same application as a progressive web app mobile team. Thank you for your attention and looking forward to your questions. Kaman, Domisha. How can you transform an existing responsive theme into a progressive web application? What are the steps? Well, the short answer is that you can't because it depends on the technology. The technology is different. However, like I already mentioned, it is possible to add progressive web apps characteristics to a responsive website. For example, add to home screen and push notifications are the first thing that comes to mind. And actually, I have seen a lot of responsive websites using these techniques for user engagement. It will be difficult to implement offline mode because responsive design and responsive websites, in general, take the information by using server-side rendering. And you'll need some kind of mechanism to catch that in the browser's local storage. So that's where the difficult part comes in. Hello. I want to ask you your opinion here. Oh, okay. About the browser support right now. For server workers, we push notifications. And the thing we see at the screen for the manifest, I think that Safari right now doesn't support. Will support it in the near future or it won't? Yeah, so that's a good question. So Chrome, who invented the progressive web apps term and standard is actually pushing really, really hard on using progressive web apps, but Apple hasn't cut up on that yet. However, Safari have added service worker support to their nightly build version. That's a development version of the browser. So I suppose that it will come on Safari in the near future. I mean, the sooner, the better. What about how the progressive web app responds to search engines? Is it like any other JavaScript app? That's actually a very good question. I think at this point SEO is the only disadvantage that I can see for progressive web apps because even though Google knows how to index JavaScript code, the indexing is not that good compared to regular HTML. So for SEO, there are two options. Either using the progressive web app as a mobile version and having the same content on the desktop version. And you can use the link between them with real canonical or ensuring some kind of server-side rendering that basically takes snapshots of the progressive web apps rendered pages in HTML and deploys that. That's basically a more like a custom solution by using Node.js or another technology on how to do that, but it's definitely possible. And for, let's say, larger clients, medium, larger clients, e-commerce websites, it makes sense to have that kind of technique in place and also use the advantages from progressive web apps.