قالب وردپرس درنا توس
Home / IOS Development / Reag data layer – Part 5: Offline code

Reag data layer – Part 5: Offline code



This post is the fifth part of an 8-part series that delves deep into how to build a robust real-world frontend app data layer. See the previous sections here:

Before entering the persistent data offline, we should talk about getting your code available to run offline. If a user has already uploaded your page, it continues to work even when they lose their internet connection. But if they are offline when they want to upload your page, or if they are on a mobile device that loads your page in the background, they get an error. In that case, no matter what data we have available offline, the user will not be able to interact with it.

The solution for making the app's code available offline is called a service worker. Service workers are a browser feature that allows you to capture network requests and servers responses from a more permanent cache. They give your caching application control all the necessary resources to ensure that the app works offline.

This sounds good, but there are some warnings! With Service Workers, it is possible to destroy your web app in a way that is difficult or impossible to fix, unless users manually delete the service worker. Because of this, Create React App moved service workers from standard to log in to version 2.0. So, before you distribute a service worker to production, you will understand the technology well and rest assured that you have properly configured your production server. Here are a few links to review:

With these warnings in mind, we briefly go through setting up Service Workers here, since they are related to making your app and data available offline.

Testing Service Workers

Our app was created with Create React App 2.x, so all we need to do to enable service workers is change a line of code. Open src / index.js and make the following change:

   // If you want your app to work offline and load faster, you can change
// unregister () to register () below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
 serviceWorker.unregister ();
  + serviceworker.register ();

You should now be set … at least in production. Create React App also configures your service worker not to run in development mode, to make debugging easier. This is a good choice, but to enable you to see a service worker in use, temporarily enable it in development mode.

src / serviceWorker.js make the following change:

   export function register (config) {
 - if (process.env.NODE_ENV === & # 39; production & # 39; && & 39; serviceWorker & # 39; in navigator) {
  + if (& # 39; serviceWorker & # 39; in navigator) {
 // The URL designer is available in all browsers that support SW.
const publicUrl = new URL (process.env.PUBLIC_URL, window.location);

We remove the check to confirm that NODE_ENV is & # 39; production & # 39; so the code will run in development mode as well.

Now, stop and restart your web server to make sure this is right in the building. Go to your app and you should see the following in the console:

  This web app is cached first by a service worker. To learn more, visit http://bit.ly/CRA-PWA

In Chrome, switch to the Applications tab, and then go to Application> Service Workers. You should see an entry for service worker.js with the status "enabled and running".

 service worker installed

To test that it works, disable the network connection on the computer and reload the page. The app will still come up again. (Note that you can't use the Chrome Developer Tools checkbox for this because you get Chrome's "No Internet" error.)

Also note that our React Materialize styles are not displayed when we are offline. This is because React Materialize recommends that they be loaded directly from CDN servers by default. To get around this, we need to download these files and earn them locally from our app.

Scroll back your changes

Now that we have tried out service workers, you should at least roll back the change in serviceWorker.js to disable service development work. In the Chrome application tab, also click "Unregister" to remove service personnel.

 deregister service

To keep service workers enabled for production, as we mentioned above, consider whether you want to take the time to learn about service workers deeply at this point. If not, it is safest to disable them for now.

Service Workers and API Requests

In addition to throwing static assets, Service Workers can also cache dynamic HTTP responses, such as those coming from web services. For example, in this approach, the result of GET / Game will be cached and when the app is started while it is offline, the cached response will be served back.

This is not the approach we will take in this guide, though. One reason is that Create React Apps service worker does not support caching web service requests. But it's also a deeper reason. The state of your application does not necessarily match the latest web replies you received. Say you load the app, GET / games and it returns one game. Then add a new game to the list and POST it to the server. The app's local data now has two games, but you do not have a cached GET / game response containing the data.

Because of this, for web applications involving both reading and writing, caching web service responses are not the best level of abstraction to do caching. Instead, as we mentioned in Part 3, we store the current state of the Redux offline access store using Redux Persist. When we try to create new records, we also store these entries offline.

How we tested offline

As we have seen, you get a full simulation of how your app works offline, including both offline code and data, requiring the service workers in development mode and turning off the computer's network connection. This will be difficult for our development process because we often want to disable the network connection and then activate it again.

Instead, it will upload the app with the network enabled, and use the Chrome Developer Tools & # 39; "Offline" checkbox to simulate being offline. This will lead to any web service requests we make to fail. Because we have built a Reload button, we can restore network requests while the app is loaded to see how the app responds while offline.

Now that we've been looking at how we get our code to run offline in production and discussed how to test off-line in development, we're ready to move in to making our data available offline. Let's take our app to the next level!

Click here for part 6




Source link