A Companion Post to Neeraj Singh’s talk at ReactFoo Pune 2018 What if I told you that now a web developer can easily build mobile apps? All you need to know is some , , and and you are good to go! No need to go through the pain of learning native languages like (for Android Apps) or and (for iOS Apps). HTML CSS JavaScript Java Objective-C Swift It would be even more awesome if you could publish your apps without having to go through the rules and restrictions placed by Play Store and App Store! If you are a Mobile App Developer, you might have experienced the troubles of following the norms of App Store. The App store also has some very strict rules about when you can update your app or what that update can contain (App Store won’t let you publish the update if it changes the fundamental working of your App). In this post, we will find out about how building Progressive Web Apps lets you do all the things that I mentioned above, and more! ReactFoo Pune 2018 This is a companion post to Neeraj Singh’s talk about Progressive Web Apps, which he gave at . ReactFoo Pune 2018 ReactFoo is a developer conference organized by . This conference is full of talks and workshops about the popular web design framework, . HasGeek ReactJS The conference was held at . There were many amazing talks by well-known developers such as , , , , , and many more! MCCIA Trade Tower Satyajit Sahoo Siddharth Kshetrapal Manjula Dube Preeti Wadhwani Jaison John Titus The event was attended by many React developers and enthusiasts who came from places like Ahmedabad, Surat, Hyderabad, Chennai, Mumbai, and of course, Pune! , , and leading a Birds of Feather session on testing for React Preeti Manjula Siddharth What are Progressive Web Apps (PWA)? Simply put, a Progressive Web App is a mixture of a mobile and web app! But what does this exactly mean? And how are these different from Traditional Web Apps and Native Apps? — These apps work for every user, regardless of the browser that you are using or even where you are situated in the world! So whether you are using Chrome or Opera or whether you are living in India, UK or even North Korea, it doesn’t matter! Progressive Web Apps will work just as well because they’re built with progressive enhancement as a core tenet. PWAs are Progressive — ProgressiveWeb Apps will fit any device! Be it a desktop, a mobile, a tablet, or even something that hasn’t been created yet! Responsive — With the help of service workers, Progressive Web Apps can even work on low-quality networks, or even offline! Web Apps that don’t depend on connectivity — Progressive Web Apps feel just like an app. They have app-style interactions and navigation. App-like feel — Thanks to service workers, your Progressive Web App will always be up-to-date with the latest updates! Fresh — Progressive Web Apps are always served via HTTPS, ensuring that no-one without proper authorization can tamper with your app. Safe — According to the W3C manifest, Progressive Web Apps are classed as apps. It easier to find a Progressive Web App thanks to service worker registration scope that allows search engines to easily find them. Discoverable — PWA features like Push Notifications make user engagement very easy! User Engagement — Users can “keep” the most useful PWAs on their home screen without the hassle of app stores. Installation — PWAs can be easily shared via URL and do not require complex installation. Linkable Native Apps vs. Traditional Web Apps vs. PWAs Let’s do a brief comparison between Native Apps, Traditional Web Apps, and PWAs Native Apps A native mobile app is a smartphone app that is coded in a programming language like Objective-C for iOS or Java for Android operating systems. Native apps have the following features: Fast performance and a high degree of reliability. Complete access to phone’s hardware. Native apps can even modify system settings. Native apps can even access phone’s various devices and features, such as the camera and address book. It can also use the phone’s telephony features to send messages or to make calls. Native apps have slower iterations. What this means is that it takes a while for updates to be available to users. This is because Native Apps are usually found in app stores, so any update sent by the developer has to go through the store’s regulation before it is made available to the public. Traditional Web Apps Traditional Web Apps are apps that have the following features: — Depending on the speed of your internet, the web app will be instantly delivered to you. Real-Time Delivery Web apps are built using standard , , and . HTML CSS JavaScript . So while your app may be able to access features like camera or location services, it won’t have access to your mobile’s telephony features. Limited access to device’s features . Without a proper connection, all that you would be able to do is play with the Chrome Dinosaur. Web apps depend on internet connectivity You on your device. cannot install the web app . Unlike native apps, web apps don’t have to bother with any kind of app store restrictions. Any update will be instantly delivered to all the users Progressive Web Apps (PWAs) Along with the features that I have mentioned above, PWAs are also defined by the following features: — PWA updates are instant! All the users will get the prompt instantly and simultaneously! Low friction of distribution Just like a traditional web app, PWAs will also have . limited access to the device’s features A major disadvantage of PWAs is that to PWAs. But developers at Apple seem to have started working on providing the support. iOS is yet to provide support Discoverability in PWA According to , over 50% of America’s smartphone users download zero apps a month! What this means that the time when our phone used to be filled with apps is slowly fading away! Comscore Mobile App Report Statistically, each step to download an app reduces about 20% of the app’s potential number of users. Progressive web apps have effectively reduced the steps between the discovery of an app and getting it on the home screen, thereby eliminating the friction of getting the app installed on your device. Another win for PWAs is that native apps are only available via Play Store/App Store. The reason behind the success of these stores is that users have no other choice in how they can find and install native apps. But when it comes to web apps (both traditional and progressive), there is no single store! So we can have carefully curated app stores that suit our needs perfectly. The opportunities are limitless! The general process of installing Native Apps is something like this: Open the App Store and search for the app. Click install. Accept various permissions Open the app App launches. Sign in to the app Use the app Let’s compare that to installing progressive web apps: Visit the site. Add to home screen. Go to home screen and open site. Use the app! PWA on Home Screen Let’s take the example of . When you open the Flipkart URL on your mobile’s browser, you will get something like this: Flipkart When you open the browser’s menu, you will see the option . Add to Home Screen : If you get a prompt as shown below, you will know that you are adding a PWA to your home screen. Note But if the browser instead asks you to enter a name, then it is not a PWA. Once your PWA is installed, it will appear on your home screen like this: Just like a Native App, your PWA will also be available in the device’s app drawer. Now when you open the PWA, you will notice that is exactly like what you saw on your web browser. The only difference is that in the PWA, there is no URL bar. Chrome browser will automatically send you a prompt to add the PWA to your home screen if you have opened the webpage 2X times for two weeks. PWA Manifest Manifest is a simple file that gives the developer the ability to control how the app should appear to the user in areas where they would expect to see apps (a mobile device’s home screen), direct what the user can launch, and define its appearance at launch. JSON Here’s an example for file of a PWA app: manifest.json To link this file to your PWA, use: JSON <link rel="manifest" href="/manifest.json"> Push Notifications A push notification is a message that pops up on the user’s device. Push Notifications can be triggered locally by an open application, or they can be “pushed” from the server to the user even when the app is not running. Push notifications allow users to opt-in to timely updates and also allow you to effectively re-engage with customized content. Push Notifications are assembled using two APIs: the and the . The Notifications API lets the app display system notifications to the user. The Push API allows a service worker to handle Push Messages from a server, even while the app is not active. Notifications API Push API The Notification and Push API’s are built on top of the , which responds to push message events in the background and relays them to your application. Service Worker API Service Workers I have been mentioning service workers multiple times in this post. But what are these Service Workers? Service Worker is a script that your browser runs in the background, separate from the web page/web app. It is generally used for features that don’t need a web page or user interaction. Service Workers provide the technical foundation that features like offline experiences, periodic background syncs, and push notifications rely on. Registering a Service Worker To install a service worker you need to kick-start the process by registering it, so your app knows where the service worker actually lives. To know more about Service Workers: _Rich offline experiences, periodic background syncs, push notifications&mdash;functionality that would normally…_developers.google.com Service Workers: an Introduction | Web Fundamentals | Google Developers How To Push Notification? To implement push notifications, you need to configure both the Client Side and the Server Side of your PWA. Let’s start with the Server Side first. Server Side At the server side of your PWA, The data that you want to send to your user is first generated. The date is then encrypted using the user public key. The server now sends the encrypted data to the endpoint URL. VAPID There are multiple ways through with a server can send Push Notifications to the user. One such method is the VAPID(Voluntary Application Server Identification for Web Push) Protocol. VAPID uses JSON Web Tokens to carry information. The core of VAPID is called claim. A claim is a JSON object that contains several common fields. The application server creates a public/private key pair. The public key is given to your web app, whereas the private key stays with the admin. When the user elects to receive push notifications, the PWA adds the public key to the call’s object. subscribe() options Now the app’s server sends a push message, it includes a signed JSON web token along with the public key. If this public key matches the one that user has, the data is decrypted. This method prevents unauthorized push services, which otherwise would have lead to a greater risk of DOS attack. Also, any app server in possession of the endpoint can send messages to your user, and there is no way for the push service to contact the developer if there are problems. Web Push Web push notifications are messages that come from the web. You get them on your device when the PWA is not open and is usually used to re-engage the users without having to know their details. You can set up Web Push by using Google Cloud Messaging service or by using VAPID as shown below: Now you can send Push Notifications to your device! Here’s how you can configure your push notification: Client Side At the client side of your PWA, The user subscribes to the push service. The PWA sends the subscription object to the server. Push Notification Listener Here’s an Even Listener that will “listen” to when you receive a Push Notification: Offline Capabilities Internet connections can often become flaky or even non-existent when you are on the go. This is why PWA comes with offline capability, which allows it to work even when there is no internet connectivity at all! In a PWA, the service worker acts as a network proxy. So when a user opens a new screen of the PWA, the request for that page first goes to the service worker. The Service Worker then tries to access that content from the cache. If the content is available from the service worker, then we will get the new page, regardless of the network connectivity. Otherwise, the service worker redirects the request to the network. When Should You Update Your PWA? It is up to the developer to release updates for the PWA. A developer can release the update whenever he/she wants. PWAs don’t have to bother with the play store restrictions. The user can decide whether they want to update their app. Since the service worker first sends the requests to the cache, the working of the app is not affected by the new updates that are available. The cache is only updated when the app is closed. The developer needs to make sure that the new update does not interfere with the user interactivity. So it is advised that the developer should just send a prompt to the user to update the app, and the user can update it whenever he is free. If you have ever used Whatsapp Web, you might have seen the occasional push notification informing you of a new update. PWA with ReactJS One might wonder just how compatible are PWAs with existing architectures using libraries like . Does a PWA require a wholesale rewrite? React There are many advantages if you use React to build your PWA. One these advantages is better discoverability. If you develop a Single Page App (SPA), you will have the client-side JavaScript which will execute in the browser and Google would then be able to index it. React provides the method , which will render a React element to its initial HTML. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. React.renderToString() Another advantage of using React for PWA is Async Import. It often so happens that a user does not use a certain part of the app. But our app has to bundle all the components and their dependencies into the bundle.js file. By doing this, not only does the size of app increase, but the app also takes longer to load. We can instead use Async Import to define Higher Order Component (HOC) that will load different parts of your app only when the user needs them. By implementing the above code, your app will load the file only when the user requests. LineChart To know more, check out this post by Anton Lavrenov _Are your users tired of waiting when your app is loading and they close the tab? Let’s fix it with the progressive…_blog.lavrton.com Progressive loading for modern web applications via code splitting PWA Tools Google has provided us with two useful apps called and Workbox to help us build better PWAs. Lighthouse Lighthouse is a tool which is very useful for auditing an app for PWA features and checking whether your app meets a respectable bar for web performance under emulated mobile conditions. Lighthouse Lighthouse is available as a and a , both of which provides a report that looks something like this: Chrome extension CLI The top-level audits Lighthouse runs effectively a collection of modern web best practices refined for a mobile world: Network connection is secure User can be prompted to Add to Homescreen Installed web app will launch with custom splash screen App can load on offline/flaky connections Page load performance is fast Design is mobile-friendly Site is progressively enhanced Address bar matches brand colors Here’s a getting started guide for Lighthouse. _Learn how to set up Lighthouse to audit your web apps._developers.google.com Lighthouse | Tools for Web Developers | Google Developers You can also check out this post by to know more, Addy Osmani _Progressive Web Apps take advantage of new technologies to bring the best of mobile sites & native apps to users…_medium.com Progressive Web Apps with React.js: Part I — Introduction Workbox is the successor to and . It is a collection of libraries and tools used for generating a service worker, routing, and runtime-caching. Workbox also includes modules for easy integration of and into your service worker. Workbox [sw-precache](https://github.com/GoogleChrome/sw-precache) [sw-toolbox](https://github.com/GoogleChrome/sw-toolbox) background sync Google analytics To generate a precache: Workbox also provides you with various caching strategies such as: Cache Only Cache first, falling back to network Cache with network update Network Only Network first, falling back to cache Check out this CodeLab to learn how to build a PWA using Workbox: codelabs.developers.google.com Build a PWA using Workbox PWA is the next step in web development. So try it out and be ready for the Future! I am , a Technical Content Writer at . An aspiring coder who has a long way to go. A Die-Hard DC Comics Fan who loves Marvel Movies. 😛 Follow me on to know more about all the amazing things that are happening at . Rajat S GeekyAnts Twitter GeekyAnts Thanks to Neeraj Singh, who is a Senior Software Engineer at . Neeraj was at ReactFoo Pune to talk about Progressive Web Apps. GeekyAnts And thank you for reading! Please do 👏 if you liked it.
