{"id":3015,"date":"2019-11-20T22:06:18","date_gmt":"2019-11-20T22:06:18","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3015"},"modified":"2019-11-20T22:16:39","modified_gmt":"2019-11-20T22:16:39","slug":"progressive-web-apps-in-ionic-react","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/progressive-web-apps-in-ionic-react","title":{"rendered":"Progressive Web Apps in Ionic React"},"content":{"rendered":"

With the launch of Ionic React a few weeks back, the reception from the community has been incredible. We\u2019re thrilled that so many of you are excited to use Ionic React, and I myself was excited to try React a bit more. Given that I spend most of my time with Angular, it was fun to see what another framework could offer as I learned how to “think” in React.<\/p>\n

With that in mind, I wanted to share my experience rebuilding a personal demo app that I have built in Angular (Star Track<\/a>) and rebuild it in React. For this exercise, I\u2019m going to focus on how I created a Progressive Web App (or PWA) with Ionic React. Let’s dive in!<\/p>\n

<\/p>\n

If you would like to see the final results, you can see an early version of Star Track React<\/a> here.<\/p>\n

\"\"

App Manifest<\/h2>\n

Adding the App Manifest was fairly straightforward.<\/p>\n

If you\u2019ve built with Angular, you\u2019re probably used to running ng add @angular\/pwa<\/code> and having one created for you. The logic here is that not everyone may need a PWA.<\/p>\n

With Create React App (CRA), however, a manifest and placeholder icons are provided out-of-the-box. This was nice, as I could quickly jump in there, make the edits I needed, and get back to building my app.<\/p>\n

Service Workers<\/h2>\n

Service Workers are an essential part of the PWA experience. Without one, our apps would not be able to work offline or be resilient to flaky network connections.<\/p>\n

In Angular, we work with the @angular\/service-worker<\/code> package to create and interact with our Service Worker. This allows us to express our caching strategy for our app’s resources in a JSON files.<\/p>\n

So how does this work in React?<\/p>\n

Out-of-the-box, Create React App (CRA) utilized the Workbox library<\/a> from the Chrome team. By using Workbox’s webpack plugin, we’re able to get a complete list of all the resources our app needs and create a precache with a hash revision. This is done automatically at build time so there’s no need for us to configure this.<\/p>\n

But we are putting the pig before the pen here, as we need to opt-in to Service Workers in our main index.ts<\/code> file. By default CRA has Service Workers disabled due to their advanced nature. The idea being that devs are not used to their content caching. While I disagree with this, I do appreciate that the team has noted their reason on the CRA docs<\/a>.<\/p>\n

To opt-in and register our Service Worker, we can call serviceWorker.register()<\/code>:<\/p>\n

\/\/index.ts\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\nimport * as serviceWorker from '.\/serviceWorker';\n\nReactDOM.render(<App \/>, document.getElementById('root'));\n\n\/\/ If you want your app to work offline and load faster, you can change\n\/\/ unregister() to register() below. Note this comes with some pitfalls.\n\/\/ Learn more about service workers: https:\/\/bit.ly\/CRA-PWA\n\/\/ serviceWorker.unregister();\nserviceWorker.register();\n<\/code><\/pre>\n
With this call, we’re able to register the Service Worker that the build scripts will create for us.<\/p>\n
Handling updates<\/h2>\n
Since CRA internalizes a lot of moving pieces with Service Workers, I was worried that I would not have a mechanism for handling updates. But digging into the registration function, there’s an optional config<\/code> parameter that could be passed that could handle this. The config<\/code> argument is an object that can accept an onSuccess<\/code> and onUpdate<\/code> key, with a callback function as their values.<\/p>\n
From this, we can modify our original register<\/code> call to pass a config<\/code> object:<\/p>\n
register({\n  onUpdate: async (registration: ServiceWorkerRegistration) => {\n    await registration.update();\n  }\n});\n<\/code><\/pre>\n
Not a whole lot of magic happening here, but it’s a bit clearer when looking at the registration function<\/p>\n
if (navigator.serviceWorker.controller) {\n  \/\/ At this point, the updated precached content has been fetched,\n  \/\/ but the previous service worker will still serve the older\n  \/\/ content until all client tabs are closed.\n  console.log( 'New content is available and will be used when all tabs for this page are closed. See https:\/\/bit.ly\/CRA-PWA.');\n\n  \/\/ Execute callback\n  if (config && config.onUpdate) {\n    config.onUpdate(registration);\n  }\n}\n<\/code><\/pre>\n
When our Service Worker has registered, we can hook into the lifecycles and trigger an update when the new content has been cached.<\/p>\n
Parting Thoughts<\/h2>\n
While focusing mainly on Service Worker and App Manifest, I’m still diving deep into PWAs with React. With what I (and the rest of the Ionic team) learn while we build more and more Ionic React apps, we’ll be able to provide the best suggestions for delivering fast, powerful, feature-rich apps with React. Cheers \ud83c\udf7b!<\/p>\n