Hi all,
I'm fairly new to web development (primarily a data scientist), but have built some pet projects to build my skillset in web development.
I'm trying to a build a small app that I can potentially push to the Play Store/App Store preferably written with Typescript.
I've built pure Node backend web apps as well as pure React UI web apps before. I've also recently built a NextJS web app with both server and client side components.
I've never worked with something publishable to mobile and would really appreciate help if you could opine on what the right/most favourable frameworks for this would be.
Will appreciate any and all suggestions. Thanks guys!
P.S. Sorry asking on r/webdev since r/appdev is not half an active.
If someone is interested in my NextJS app: https://daily-cryptic-iief.vercel.app/
What are Progressive Web Apps?
Previously, native applications were viewed as the epitome of perfection for mobile users. Their inability to deliver a highly immersive experience led to the rise of Progressive Web Apps (PWA). These applications stand out due to their high adaptation potential. The applications can be adapted to different hardware, platforms and devices. PWA combines the benefits of native applications and further improve them with their particular features. The JavaScript applications work on browsers and bring same features of native applications (like push notifications) to the web. Chrome and Opera supports PWA. Firefox supports mostly all features. Samsung Internet browser also now supports PWA while Apple has entered on the bandwagon by making a key component called service workers.
Best Progressive Web Apps Frameworks and tools-
It is confirm that, PWA is taking the smartphone world by a stride. If you are thinking to use them for marketing your business, the initial step is to choose which framework to build it on. Presently, there are various choices available. But, not all frameworks are satisfactory. Here are the best ones you can discover.
1. Angular JS-
AngularJS is a powerful tool for building the client side part of web applications. The appearance of Angular 5 has brought developers a simple approach to make PWA. Angular 5 is now furnished with a great service worker for built-in PWA support. The most recent version of this framework has a few new features for making responsive and also reliable PWA. This tool empowers scalability for a project, so your application would now be able to deal with a major extent of data. New CLI commands allow developers to effortlessly transform projects into a PWAs.
Key Benefits of Angular-
-
Easy implementation due to clearly defined methodology
-
The addition of CLI has shortened the learning curve for the framework
-
Includes IntelliSense and Typescript
-
Excellent support, as Google backs it
2. React-
React is a popular and highly functional PWA framework. It is supported by Facebook. It is well known among developers because of its highly scalable JavaScript library. This framework uses JSX to link with HTML structures. To scale up their app and also project further, you can make use of available packages.
Key Benefits of React-
-
A common ecosystem
-
smooth operations and great support because of supported by Facebook
-
React helps to create scalable and flexible apps
-
The code used to develop for web apps can also be used for native apps
-
The rendering process is very quick, due to to Virtual-DOM
Disadvantages of React-
-
Only a programmer can use the framework since it requires knowledge about JSX
-
This framework is quite complex
-
There is no defined methodology. Subsequently, execution is tricky
3. Vue-
As compared to React and Angular, Vue is much newer. Vue features one of the fastest growing libraries among all other frameworks. This is because the framework has managed to crack the code by conveying two basic things-high-speed rendering and simple coding. Similar to React, you can go through extra packages to scale your application using Vue.
Key Benefits of Vue-
-
Big players like Laravel and Alibaba support the framework
-
As the code is simple; it is easy for new developers to learn it
-
The framework is quite simple
-
has similar concepts like Angular and React
Disadvantages of Vue-
-
support team is small
-
The advantage of flexibility creates issues when used
4. Polymer-
The polymer has been created by Google and is open source also. It has a wide variety of tools, web components, and templates. This makes it a great decision for PWA development since the operation perspective turns out to be highly simplified. Besides, the tools and components within the framework are supported on a wide range of browsers. Along these lines, the application you make utilizing Polymer is profoundly versatile and open. Along these lines, the application you make with the use of Polymer is more adaptable and accessible. It uses pure HTML, CSS, or JavaScript. This makes it an independent framework.
Key Benefits of Polymer-
-
It has complete support, including routing, data level, and responsive designs
-
The API is simple to understand
-
Presence of embedded development tools render the need for debugging tools unnecessary
Disadvantages of Polymer-
-
not SEO friendly
-
high reloading time
-
There is no official IDE
5. Ionic-
It is an open-source framework having foundation on Angular framework and also Apache Cordova. This framework has been used to create more than 5 million hybrid applications. It has a library of components for iOS and Android. Ionic permits developers to create website pages that run inside the browser of a device using WebView, which basically renders web pages so that they resemble a native application.
Key Benefits of Ionic-
-
Since the framework is open-source, which reduces the expense of development.
-
Easy to learn
-
Easy maintenance
-
It has Built-in tools
-
It has an extensive library. You can access APIs without coding
Disadvantages of Ionic-
-
You must update your app frequently to keep up with the latest changes on the framework
6. Workbox-
It is a tool made by Google. Workbox incorporates a few Node modules and libraries that improve the web application performance and eases development of progressive web applications. If the PWA is ready, one shouldn’t forget to ensure that all requirements referenced in Google’s PWA checklist are met.
7. Lighthouse-
This tool was developed by Google so as to improve the quality of web applications. This tool lets you know if your web application is ready to turn into a PWA. At the point when you add your website to this application, Lighthouse measures it on its four criterias and shows issues that you should solve to increase the productivity of your web application.
Final words-
Choosing the appropriate framework or tool for your progressive web app is one of the most important tasks. It decides whether your developed application will be responsive, scalable, interactive, powerful, and easy to use or not. Which framework is perfect for you is relies upon your application needs and the expertise of your developer. Hence, you can’t choose without your developers’ input.
Videos
Hi, I checked out several popular PWA apps like app.starbucks.com and definitely believe this is the perfect solution for everything except games! I love the way you can install it right into Android without going through Google Play, and add to home screen for iOS which a little more nuisance, but totally OK! It looks great on PC/Mac too!
I am trying to look for a good boilerplate with UI kit to build a prototype. I am proficient with React, I went on Github and searched for "PWA" and sorted everything by number of stars:
-
Ionic - Seems to be the most popular framework in this space, but far more Angular coverage than React, all the tutorials I can find are Angular only. So I think if I try to do React I will have a hard time. But this is by far the most matured project in this space because of their hybrid app development background since 2013
-
React-PWA - Seems to be based on a small project PawJS, does come with good variety of UI kits with Material, Ant Design, Semantic and Tailwind not sure which one is the best for PWA
-
Vue - Quasar, PWABuilder, Nuxt, Bento-Starter, I think Vue is a great framework, just not a big job market for it in America at least compared to React and Angular
Anything I missed? I am a jack-of-all-trades and heavily rely on Google to learn programming. So good number of tutorials and large user base is a must.
Maybe I should just start with React + any UI kit, and just follow a tutorial to add the service workers?
Say you were making a TikTok clone intended to run on both mobile device browsers and in the desktop browser - not a mobile app so no Flutter / Kotlin / Swift. One stack.
The app needs to run in mobile browsers, so as fast as possible. Are we talking Rust + WASM or something like Svelte? Blazor might be an option but I hear the initial boot up speed might be too slow.
I am trying to figure out the best vue framework for pwa and seo. I am building a website where people can create their stores and I want each store's single view to be SEO friendly. Last project I used nuxt with vuetify2 but their vue3 versions, they both seem to be in alpha versions. Anyone with experience with Quasar PWA that could give me advice or any other suggestions are greatly appreciated. Or maybe use nuxt3 with other UI lib?
My only experience is with Bootstrap, but it's not designed to build mobile interfaces that feel like native apps. Is there a better alternative?
What are good JavaScript frameworks/technologies for a PWA, ServiceWorker and offline first application with lots of indexedDB interaction + Auth0 authentication and Webtorrent?
Needs to be robust, simple, easy to develop on and at least a little future proof.
I'm not looking for the one right answer, but to understand which possibilities I have.
Apart from the authentication, there is no need for server communication. Other than downloading static HTML, CSS and JavaScript files.
I don't want to go theTypeScrip route, so the question is not about that.
I am a web designer (Figma/HTML/CSS/JS with WordPress) looking to move to frontend development.
My main goal is convert my WordPress developed websites into their own apps using the headless option that WordPress provides with graphQL or its own RESTAPI.
Most of the sites I've built over the years are in the news domain and I want to convert these to PWA/apps that will make them quicker and also offer an option to submit them to mobile app stores.
Any suggestions?
I want to build PWA and searched framework to build PWA, many people recommended React. React is not very intuitive. Is there any easy way to build PWA?
Hello !
I wanted to make a simple app to help me at work, and wanted to give PWAs a try.
The thing is, there’s so much choice that I don’t know where to start.
It’s nothing complicated, just access to some database, inputs, lists.. if possible something that would look like and feel like iOS. A desktop app would be nice too (electron?).
What should I look into? Where to start?
Thanks !
A really simple project I just finished is building a PWA client for hacker news.
I personally used React with Tailwind for mine, but there's a GitHub repo here (sadly archived now) that fully outlines a spec to go off, as well as providing you with an API to fetch the stories from.
As you can see from the HNPWA site people have implemented it in many different frameworks, and all have their source code linked on that site.
Have a read of a few of the implementations and choose whichever seems the most fun!
I found this really useful
https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
Hey everyone, I'm a web developer who recently started making mobile apps with Svelte and Capacitor, I've been loving it all the way, it's so simple and fast, such a great developer experience
Soon, I plan to get into Flutter to learn more about it and find out any reasons why I shouldn't be making PWAs, I'm aware of the performance argument but I'm not sure it still holds in 2025 since most smartphones nowadays can handle so much more load
If you have worked with Flutter or native before, I would love to read your opinion on why would a developer go that route instead of a PWA, I expect it might highly depend on the type of application you're building, I would like to read your reasoning about that as well
Thank you for reading
So I'm thinking about building a new app. This time I'm thinking PWA (written some native Android apps before).
The problem is that I'm not a designer, so I need a good UI framework with native feel to base the app upon. Any suggestions?
I've played with Material Components Web but I don't think it looks super nice.
wondering if working on a PWA instead of native makes sense in 2024, as definitely the development efforts are much less.
I'm trying to decide which tool should I use to create my new Progressive Web App, which tries to emulate the behavior of a mobile native app. For the first version I used Vite with lazy loading for the routes, but with the new react docs it says Vite is not recommended for production and instead I should use NextJS, but with Vite I had the option to host static files and it is somewhat of a requirement to avoid installing or keep running a NodeJS process for that. Which would you recommend me in spite of those limitations?
I don't think react docs recommend against vite so just keep using it imho.
but with the new react docs it says Vite is not recommended for production
It doesn't, or if it does I couldn't find it.
It doesn't explicitly recommend vite, but that's a very different thing from "not recommended".
Vite is still good, especially if you don't need or want all the framework stuff.
I am building a PWA for my MVP because of my familiarity with web development. Also it comes without the headache of building a native app. But is there a template or UI library that is best suited to give the PWA that native app feel and look?
pwa
Progressive Web Apps (PWAs) offer lightning-fast performance, seamless offline access, and cross-platform compatibility. So, why aren't we embracing them more?
Just did a test The offline access is awful even with a service worker. Anyone has an idea on how to nail offline access?
My latest project was built in ionic 7 react. I didn't enjoy Ionic as there are still some kinks not worked out.
What do you guys use to build your apps?