Ionic 4 PWA and native android/ios service worker caching - ionic-framework

I am working on an Ionic 4/capacitor app which will be released as PWA, iOs and android native app. I am using angular service worker caching mechanism(using ngsw-config.json file) to cache some responses. It works fine on browser. Both writing to and fetching from cache works seamlessly without writing any piece of code.
My confusion is, will this service worker caching works on native android/iOs ionic 4 apps?
If not, then i would have to write caching functions( both get() and set()) in my code to cache responses/images(using ionic storage etc) . But then if my service worker caching is on and these caching methods are also in my code , wouldn't there be duplicate cache writes for the same stuff ?
I am not sure how to handle this because i am new to Ionic4/PWA world. Please suggest a caching architectural design which works in all three modes i.e. PWA, iOS and android.
Appreciate and thanks in advance.

Related

What is a good development setup for Ionicframework

I’m using Ionic with Angular to write an iOS and Android app.
But most of the development I use ionic serve with Chrome, it’s fast and simple.
But now I realized that it’s getting harder when I have to use the native HTTP API to do fundamental things like talking to a rest api on my server. The native HTTP api is working for the iOS/Android app in production, but not in the web app mode I’m using for development.
I know that I there are options like live reload for iOS and Android but they are still lazy in my point of view.
So I’m asking you:
Do you prefer developing directly with iOS/Android emulator/devices or are you also using the web app and found a way around the troubles above?
there is no way you can test native HTTP on the browser. you have to use an emulator or a native device. BUT, for testing UI you can run the command ionic serve --lab instead of ionic serve. do it and see the difference.
to test HTTP on the browser you must use HttpClient.

Reaching Ionic specific page from URL

Is it possible to reach a specific page in an Ionic3 app , from an external source , like another website , or a python script.
I would like to know if I can transfer data to the app, but without having the app asking for the data
such functionality is typically called “deep links” for apps. Its not easy to build such experience with apps due to platform differences (ios vs android). There are solutions that abstract differences and provide good overall implementation path: branch.io.
Branch features native plugins for Ionic 3+.
You can google guides for actual implementation.

Difference between Ionic Storage and Native Storage?

I'm Actually using Ionic Storage. and I heard About The Ionic Native Storage
I Don't Know the Exact Difference Between Them. Which One Is Preferred to use?
They have basically the same purpose and both work with key/value to store items, but i think Ionic Storage is better and i'll tell why.
The Native Storage need and will only work with the plugin instaled, so if there's no plugin or if it's a webapp the user can't use the storage. It's intended to be used because iOS may remove stored data when running out of memory.
The Ionic Storage works in a diferent way, you can save your values in the IndexedDB, wich is a type of storage for the browser, but if you install te SQLite plugin it'll automatically priorize to save your data in SQLite so there's no loss when iOS is out of memory.
So when using with SQLite, if in a browser running as a webapp the user can still save data, because since there's no plugin in the web it'll use the IndexedDB, and if there's no IndexedDB then it'll use localStorage.
And you don't need to learn SQLite to save with the plugin, the Ionic Storage will do all the work for you, you just need to use the key/value as the same way you would use for the Native Script or the localStorage.
Which one is preferred? It's all up to you, but i see more advantages in Ionic Storage.
Check out the Ionic Storage Docs.
Hope this helps.
the principal difference is this:
Native Storage is a Cordova Plugin, so only work in devices. Its a little faster than Ionic Storage on devices, because uses the native functions of the device to store Key/Value data.
Ionic Storage is a not a Cordova Plugin, is a javascript library, and can be used both in Devices and Navigators.
There are no big difference between them, i prefeer Ionic Storage because i can realize faster tests on browser during development.
Nowadays I work with ionic 4 and I have experienced unpleasant latency of the #ionic/storage module, but after I switched to the native storage I got a better performance. and by the way you still can use it while testing with the browser using the ionic cordova run browser command not the ionic serve command.
So what I am trying to say that native plugins always win in the matter of performance.
Best Wishes

Using Ionic application as web app

Can I build an ionic application and use it as web application with full capabilities as the mobile part ? Or ionic have 100% efficiency on phones ?
As for running ionic on as a web application. yes you can do that. but one thing you'll need to consider when developing your application. check your dependencies and libraries, and be sure that they support web application. else you should be fine.
As for the efficiency part, it is not optimal, but you can enhance the performance. something that ionic does that will slow your app is loading all your application in one JS file, that delays the lunch, to avoid that use lazy loading to load your app's components.
Let me know if you have any further questions.

Difference between react and ionic framework

I have read some docs and i do not really understand what are the differences between react and ionic frameworks.
Is one of them made from the other ?
I have to store local data. I suppose one of them is just web and javascript so data is only stored on server ? Or is it possible to do local storage with both of them.
Is it possible to host the app on a web server without having a "real" app ?
Thanks
Hi I think that you are a little bit confused. I hope this clarify your doubts:
Ionic framework is a set of tools for create Hybrid apps using html/css and javascript, It is build using apache cordova and Angular 1. In the other hand you have React a library for build rich UX(User experience) web apps.
Ionic is not build on react. They are different purpose tools but you can use that together (Using IONIC 2).
In both cases you can use local storage, but if you want to store data in servers you have to build your own backend to provide data to the app They are front end oriented frameworks(no server side)
You can put Ionic code on a server it is simple JavaScript and HTML but this is not the purpose of the framework and if you do it, you loose the native apis of the device. In the case of React it is just a library and you can use it in an existing project using HTML and Javascript or build your app entirely with it.
You have a long road ahead, hope this help you.
Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. They are essentially small websites running in a browser shell in an app that have access to the native platform layer.
React Native is the next generation of React – a JavaScript code library developed by Facebook and Instagram, which was released on Github in 2013. React Native lets you build mobile apps using only JavaScript.
They have their own way of functioning, below are few points on their differences:
Ionic is a regular web app, written using HTML, CSS, and JavaScript, but it runs in a webview embedded in a native app instead of in a stand-alone mobile browser
React Native has a completely different architecture: instead of writing your UI using web technologies, it uses the React component model to render to native views.
Ionic is a Cordova based app that wrap current web app into a mobile application. It uses the android existing web view to render the app so the file size is quite small
Meanwhile react native create bridge between JavaScript and native component.
When it comes to memory usage, Ionic framework uses more than react native apps
The Ionic app is slower at loading videos because it needs to download from other server, while in react native, it caches the tiles so it loads faster.
When it comes to integration, react native can use every client based JavaScript modules from npm (node package manager) whereas Ionic uses only the Cordova-based code.
Ionic is a framework that creates an idea of writing code only once
React native is not a write once and run anywhere framework, but is popularly touted as a “learn once, write anywhere” framework
Ionic Framework app needs to use device features and APIs through Apache Cordova plugins.
With react native you can access any device component or API
Based on the points above, you can see the difference in their functionalities, so if you want to go for something that creates performant iOS and Android apps that feel at home on their respective platforms ten you can opt for React Native.
And, if you are targeted at building hybrid mobile apps, Ionic is the best choice!