I believe that once you have a satisfying background to the javascript, you could focus on a framework to streamline the development of a PWA.
My opinion is to use VueJs for ease and low learning curve, it's my framework of choice, let's say haha.
Another tip, another framework I use, is the Quasar Framework. For me it is the best and most well documented tool. Very intuitive and easy to learn from examples, great community at discord.
Once you have a notion with VueJS and its plugins like: vue-router, vue-cli, vueX no doubt you can create a great PWA.
For offline storage, you could use a lib called localForage for this and after you get the connection to the internet, synchronize it with the bank of your choice, whether it is real-time (mongo, firebase) or not.
I'll leave the links to you at a glance and stay inside Vue and Quasar.
Vue-router Create routes for web pages.
Course I bought to deepen knowledge in vueJs and plugins
Note: It is in English, but you can send an email and negotiate a value well below what they ask, they are very solicitous and they helped me in this matter.
Vuex is state management, great for when the application begins to grow and helps in scalability, organizing better the components and the interactions between them.
Quasar Framework
If you really choose to use vueJs and quasar, here is the link of the discord for possible questions, speaking directly to the community and its developers.