[2.0] SkyRoutes : A Simple framework for Progressive Web Apps
With the increasing trend of progressive web apps and great support from all major app stores it is clearly visible the web is the future!
But there is a problem, by looking at the term PWA we are simply reminded of this :-
But that’s not all what PWAs have to offer, you can actually create a complete native app experience and publish it on major app stores and the best thing about it is that you’ll have the exact code-base everywhere, the next closest solution to offer this is flutter (more on that some other day)
How can SkyRoutes help if PWAs are already that fancy?
You see, with the common DIY articles on progressive web apps we are just introduced to basic caching and full screen experience. In a real life scene one also needs to maintain the app by delivering updates, handling user events, etc. All this can be too verbose for someone who’s just starting fresh.
Backstory : How it all began Read here
Features :
- Complete Asset management
- Built in SPA Router
- User event handlers ( Network / App state )
- Dev friendly (Bonus features )
- Natural single file controls
App structure overview
manifest.json : We initialize, control and maintain our application through this single file.
Inside the skyroutes object, we can specify our common app assets, which are cached by our service worker on first load, this helps with faster load times and offline support.
SkyRoutes can take care of keeping these assets always fresh(atomic updates)
What about html ?
index.html : Holds meta info and app file links. It is just used as a container!
Ps. add a ‘style’ class to all your css links for enabling a cool feature!
app.html : Holds our regular html markup. But there’s a catch!
Since SkyRoutes is designed for PWAs we have to divide our app into different routes ( sections or views ) as there is a single html file, this helps us to avoid redundant code for multiple html pages.
To create a route just add a class ‘rt’ to the element, for the unique default or initial route use the class ‘irt’, the id attribute of the element acts as its router path
nav method is used for Route navigation, it accepts the path/id of route as an argument. For initial route we use an empty string, i.e. nav(‘ ’)
We can also use anchor tags as an alternative, but that’ll cause hard navigation
Gallery
Future update plans :
- Hash path fallback for older browsers (or if SW not initialized )
- Fancy router transitions
- Some fix for back button nightmare
Check out SkyRoutes
PS: This is still under testing, starter kit will be shared shortly
Feel free to leave your feedback or ideas as a response 😀
Thanks for Reading! 😎
Some apps built with SkyRoutes
