React Progressive Web Apps — Part 1 – Progressive Web Apps – Medium

#ReactJS Progressive #Web Apps:  by @GethylK #JavaScript

  • How to create your first PWA app and/or convert your existing app into PWA.In this example I created new React app with PWA in mind, but the idea should be quite similar if you have to convert your existing app into PWA.You need to understand the lifecycle of a SW, which…
  • Here is the code snippet from index.htmlRegister SW if browser supportsIf the above registration step was successful, then the SW file will be downloaded.
  • Well that is because SW can intercept the fetch event, and this will help if you want to cache something from the network.Updating Cache / Making network calls — Fetch eventSW listens to fetch event, and in our example since we handle only the basic case of caching only the static files,…
  • Adding your app to the Home Screen.Perfect!Step 1 above showed you the importance of SW and how it helps to make your app to be offline first.Step 2, tells you how you can run it from your virtual device.And now let us make it feel a bit more like an app,…
  • I would highly recommend you to use it to generate a report of you webpage.Here is an example of this github example.Webpack run on dev mode yarn startWebpack dev server with prod build yarn start:PRODWhen I first ran the report, the scores where much worse, and I went through the suggestions…

Progressive Web Apps(PWA) are gaining a lot of popularity these day, and with one of the updates this year (2017), the Create React App creates your project by default as PWA. If you haven’t heard of…

Progressive Web Apps(PWA) are gaining a lot of popularity these day, and with one of the updates this year (2017), the Create React App creates your project by default as PWA.

If you haven’t heard of PWA before and don’t know what it is about, then this is a good read before you proceed further.

2. Now, with No Throttling, you can see that the contents are loaded + our service worker is registered, installed and activated (activated only if there is no other SW currently running). see here

3. And now, if I set back throttling — offline, then you can see this time when I refresh, I don’t get the browser offline screen, but instead I see my app. see here

This article is going to be less of React and more regarding PWA. I have created a very simple React app which will fetch all my github repos and list them. Yup that’s it 🙂

It’s a basic React web app which gives an app like experience and help you understand the offline first experience better.

1. How to create your first PWA app and/or convert your existing app into PWA.

In this example I created new React app with PWA in mind, but the idea should be quite similar if you have to convert your existing app into PWA.

You need to understand the lifecycle of a SW, which are listed below,…

React Progressive Web Apps — Part 1 – Progressive Web Apps – Medium