When I heard that my team decided to do build a PWA application for this project, I started to do googling as usual.
What the heck is PWA O_O ?
Long story short. Progressive Web Application.
Long story starts. If you start to working on PWA application, presumably, you have also considered mobile applications. Don’t you? Because I did! It was a normal day, I would say. My architect of team told me that I am going to do an app-development. So at the outset of the undertaking, I started to build a mobile application such as react-native for android-app.
Previously, I never did an app-development. Kotlin, Java, React-native and Flutter… All these new languages and frameworks just overwhelmed my brain in such a short time !
Wait! Before we dig into PWA, I would answer this question preemptively. What does “native” mean ?
React-native, native application… At the beginning, I could not understand a meaning of “native”. I know that English is not my mother tongue language. But I know this word !
In software engineering, “native” means native device feature. Hardware like I-phone or Samsung-galaxy have native features such as adding an app on home screen, pushing notifications, taking some flicks and also accessing the app when offline. But what if we could just write a code with Html, Css and Javascript but have also native features ? Sounds amazing! Now we talk !
PWA: Running on browser, Behaving like a native mobile application !
If it is possible, we don’t need to learn new mobile app languages. We can use just Html, Css and Javascript and etc. We can just make it as regular websites. These PWA app runs in the browser but it also have access to device features. But PWA apps are still new in web development, so support is not as widespread as on the browsers and also the specification is changing a lot.
Now, please let me share all the errors that I encountered.
I decided to create an app by using React, Typescript, GraphQL and Hasura. Do you already feel the errors and also my frustration ?
Create Manifest file
Manifest file is a single JSON file which provides information about the app to the browser(i.g. name of app, color themes, logo…). Name of file “Manifest” is compulsory. It should be placed on the root of the project. With react application, manifest file should be place on “public” folder. The course that I followed online was actually creating web app with simply Html and Css, not with React. So I was confused even where should I put my “manifest.json”file. In manifest file, there are some configurations that we have to do. Name, short-name, start-url, display, background_color, theme_color, orientation, What are all does properties for ? Basically, if we download a PWA application on our mobile device, manifest file will be inspected automatically. That is why the name “manifest” is compulsory. Time to pinpoint all features step by step.
Name and short-name are simple. Once it is downloaded on app, below the small icon, it will display this short-name and when user open the app, this property will show the name. Start-url will direct us to the page when we open the application. Display: there are “standalone”, “browser” and etc. If we choose standalone, this PWA app is going to stand alone like a real mobile application… Icons are the array of objects which contains different size of icons depending on the devices. You can check more about properties here. →https://web.dev/add-manifest/
These days(December 2021), I found that “Id” property is newly required by browser. So what is an “Id”? The id property represents the identity of the PWA to the browser. →resources: https://developer.chrome.com/blog/pwa-manifest-id/ Nothing will happen even though we don’t put Id property in manifest file. But to be more accurate, just set the Id property in manifest file. The value will be same as “start-url”.
Now we are ready to test out our PWA application on Android emulator. This article is not for explanation for an emulator. I would like to make this part very short. Go to android emulator and choose which the device to text out. In my case, I decided to go on Pixel2. Go to Chrome and then put a specific url on “10.0.2.2:XXXX”. The last four numbers should be your port number. I can add this webpage on home screen of emulation. Then you will see icons, short-name and start-url. In this case, I got an error which does not make me surprise.(I had an issue with this, thereby I am writing this article). Everything works perfectly, except react components are not correctly rendering on my “index.html”. But I will comeback this for later.
Create Service Workers
Service workers do allow us to do all of things you would expect from modern app runs on mobile device. Load content offline, use background sync, use push notifications…
Service workers are just javascript files. Service worker does not run with normal JS files. It runs on different thread. Service worker is running on background and listening different events like fetching request and pushing messages.
Service worker lifecycle
When we have to register service worker javascript file, it should be registered with normal javascript file. Browser will install service worker → install event → service worker becomes active → active event (Once SW is active, it can have access to all the files inside its scope)→ service worker can listen for all the events(http request and intercept request). After I started to work with service worker, I encountered all the errors! I am going to write another article just for service worker. See you soon, then !