Progressive web app and technologies needed to build one
Hello, can someone elaborate on what a progressive web app is please. From my understanding it's just a responsive web app that works both on pcs and mobile.
Are there any recommended technologies that we can use to build one?
17 Replies
PWAs work offline and can be installed on some devices. As for technologies, it's just html Javascript and css
I wanted to try it out, for me to be able to download it, should I access a particular website on my mobile? Or can I do it using my laptop for e.g. then I will have a desktop app?
ah okkk
managed to do it
that's interesting
do we need to learn any framework to be able to build one or we can do it using vanilla js?
Anything can be done with vanilla
I'd recommend following a tutorial or two
yep will do that, thanks !!
A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app. Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed apps.–MDN You make a normal webpage/site and then write some JS code via service workers—a kind of proxy that allows you to cache resources to be used off-line. Then the user can click the "install" button (or similar, it's up to you to determine when/how to allow for local install). And then the browser does some magic and BOOM! Insta-app!
yep, I see, ty !
small question, when we install a progressive web app, how is that possible that we didn't install any installer and we already have a desktop shortcut for it? I checked my downloads and I didn't have anything related to a PWA I downloaded (pinterest for e.g)
It's just the code for the site saves somewhere and the icon is a link to a disguised browser instance
yepp I see
it's just an illusion of an "app"
Basically yeah
But then lots of apps are just wrappers for websites anyway
yep I see, thanks !
hello, quick question
how do we know what is the most suitable for us, a PWA or a native app? How do we decide that?
I'm sure you'll be shocked to hear this but… it depends.
If your company has a bunch of web devs but no C++ devs then you'll be making PWAs since you have no one on staff who can do a native app. But the main issue is performance: you won't be writing Call of Duty in JS for example, or even Final Cut Pro. While WASM has made the browser capable of doing a lot more than it used to, there's still some perf issues when the WASM file talks to the browser, and then JS has to do something with the data.
Another thing to keep in mind is capabilities: PWAs are disguised browser windows, so if there's a lot of network traffic the browser is one of the best apps you can use to make HTTP requests. In addition, the browser gives you accessibility right out of the gate with literally zero work on your part. If you want an accessible native app you have to put in work—it ain't easy. PWA, however, are reliant on the user having a browser that's updated regularly and is otherwise limited by that. Can you imagine making a PWA that is designed to run on the latest JS spec and someone tries to use IE !? 🤢 At least with a native app you know what the baseline capabilities are since you coded them yourself.
Of course, with Electron, Tauri, and the like the line between native and PWA can get blurry. Both Electron and Tauri ship a dedicated server and a browser—Electron uses Chrome and Tauri uses Safari I think—so wraps everything that would normally be your PWA into a "native" app. Hell, Discord is an Electron app! They both have some sort of backend tech to use for communicating with the host system, Electron ships Nodejs and I don't remember what Tauri uses, but it's Rust something.
Anyway, TLDR: PWA is usually easiest since it's just a web site. Native apps have the performance benefits (unless you use browser wrappers). The needs and capabilities of the business will ultimately determine which you use.
Tauri uses the operating system's default web view
That's why it produces much smaller executables, it doesn't package in an entire chromium install for every app
OH! That makes a lot of sense. I maybe was thinking of Deno that uses webkit instead of V8 🤔
yep I see, thanks !
If you want to use some native API that isn't available in the browser then PWAs are not an option. You can do a lot with modern web APIs but you also can't do basic things in the browser like opening a raw TCP connection.
Deno doesn't use WebKit, you are probably mistaking that with Bun which uses JavaScriptCore engine, which was built for WebKit. Deno is based arount V8 from Chromium, like Node. WebKit is a browser engine so it is like saying that Node uses Chromium, in another words that doesn't make sense.