Progressive Web Apps in 2024

Are Progressive Web Apps still relevant?
💬 Topics:
What is a PWA;
Steps to convert a Web App into a PWA;
Working with Service Workers;
PWA Example;
List of PWA features
🥇 Become a Member - / @awesome-coding
✉️ Join the Newsletter - newsletter.awe...
📖 Blog Article - www.awesome.cl...

[@Gornius]

I'm working for startup and built PWA, which was perfect fit for our use case - easy to install, fast to update, shared codebase with desktop, could be run offline and could deliver Push notifications. But then Apple decided to be Apple and we basically lost full iOS marketshare in EU with that (we're based in Poland, and EU is our main if not only market). EDIT: So apparently it works if your default browser is Safari, but when Apple was required to allow other browsers on iOS, they stated it is impossible to have PWAs working, and they will stop working in EU.

[@anandhukraju9382]

Curious to know how you implemented the whole PWA with push notifications 🤔

[@Gornius]

@@anandhukraju9382 Oh, it was some research on my part, but there are resources on the internet. We implemented it using Firebase FCM, so firebase sdk was handling most of it. And yes - it worked just like with any other app, with that difference it was being handled by browser's android service worker not the app's (because app per se doesn't exist).

[@smithrockford-dv1nb]

Wait what did they do in the EU

[@Gornius]

@@smithrockford-dv1nb They took down PWAs in iOS, because the user's ability to choose browser (which is possible only in EU) made it impossible to implement. Such a bs.

[@vaisakh_km]

​​@@smithrockford-dv1nbapple broke pwa support in EU as part of thier malicius complience, and best part is, pwas where their sales pitch for iphones 15y ago

[@jamesgphillips91]

Hot take: as developers we should advocate for moving to pwas and wasm for all app development. The dom is by far the best way to build user interfaces, the web becomes the platform to distribute apps and we cut out the corporate fat of platform app stores entirely

[@logantcooper6]

This is why apple drags their heels so much. They don't want to let you out of their walled garden.

[@jamesgphillips91]

@@logantcooper6 hotter take: this is what regulator should make illegal

[@funkdefied1]

Google is working on it! Check out this talk from Google IO: “A web revolution: Build great desktop-grade apps”

[@CyberTechBits]

100% agree!

[@bdannnn]

whilst i agree they should be supported, the app stores allow for more quality control. apparently more security too but i don’t know enough about the specific vulnerabilities they use to justify it

[@CyberTechBits]

Building PWAs is sooo much better! Great video!

[@adriablancafort]

PWAs are awesome!

[@TheBrainDunne]

yes

[@prathamshenoy9840]

even if i am not lazy enough to build native mobile apps, i would want to skip the app store fees

[@MStoica]

question is: does a PWA (which is basically a web site, runs in the browser, just without the address bar) have access to device native APIs?

[@Dipj01]

​@@MStoicayes using the FileSystem Access API

[@codeaperture]

​@@MStoica Yes it does

[@lindakusuma6671]

@@MStoicaquestion should be: does browser has access to native device’s API? It mostly has. The access you got covers most of use cases, unless you’re doing some file management weird stuff

[@guandor]

You left out the two most important problems with PWAs... distribution and Apple.

[@willinton06]

How is distribution a problem? Apple sure but distribution is definitely not a problem

[@ustav_o]

apple is a global problem, not in just PWAs could you give more info why distribution is a problem?

[@jerrygreenest]

Distribution problem: on Apple devices you can’t make installation button, you can’t simply build it into your interface. That’s the problem. It’s quality of life and it’s non-present on Apple devices. On android it’s ok.

[@ozgurNY]

Distribution is not a problem at all. It is handled via web server!! It is what makes PWAs better than native apps because 1) devs do not pay to Apple/Google before publish (yearly subscription) 2) you are free to update your code anytime you want and users receive them immediately

[@jerrygreenest]

@@ozgurNY yeah but this distribution has some weird apple politics. You cannot make an installation button.

[@AngularUniversity]

PWAs never took off due to Apple delaying support years, and then only giving partial support, creating all sorts of problems. The installation user experience of installation was awful last time I checked.

[@statelessdev]

PWAs work in iPhone (and I love it). PWAs aren't prevalent because not everyone is building them - because - you don't discover a random PWA on a random site - you discover apps on app stores. Businesses want apps built. Developers like us can build PWAs, and make sites awesome by offering additional PWA capabilities.

[@jerrygreenest]

The worst drawback of PWA on iphones is istallation, right, you have to go to some menu somewhere, because on iphone developer cannot make an installation button, unlike on android.

[@permatrout2720]

Yeah, you have to "share" and then "add to home screen". Not that bad but most apple users just don't know how to do it.

[@SalimSalvatore]

@@permatrout2720 can you still add pwa on ios? im not talking EU , what about NA or asia?

[@terrencemoore8739]

​@statelessdev you're essentially saying the same thing as the og commenter. The way you install PWAs is also limited by Apple, on Android, PWAs do show up in the app store.

[@slmille4]

In theory PWAs let you create cheap cross platform apps, but in practice companies still end up needing iOS and Android native versions as well.

[@lardosian]

Very true..

[@jerrygreenest]

Yeah and there's two main reasons for it: 1. Web developers make shitty apps, unlike native developers who's gatekeeping shit developers away 2. There's still quite poor support for PWA, particularly from Apple, even though they take baby steps into supporting PWA more, many wish more progress on it

[@zshanahmad2669]

@@jerrygreenest their baby steps turned into giant steps in the opposite direction, ever since they were asked to allow other browsers... just plain evil.

[@jerrygreenest]

@@zshanahmad2669 they didn’t drop PWA support although they were close, so I would say it’s not «huge steps in opposite direction», but I agree it’s frightening how they almost willing to drop PWA (fortunately they didn’t)

[@TheGarageboyz]

PWAs that can run in the background is a must

[@dennisadamczyk]

Notice: To make an PWA installable, a service worker is required in a lot of browsers.

[@gageracer]

One thing I was not able to achieve is serverless PWA. Specifically for to send notifications to user without a server. I want to set reminders and alerts just from the client side and trigger a push notification when app is not up but it seems like you can only push the notifications from a server to the service worker.

[@Gruby7C1h]

The problem is Apple not wanting to make web tech too good.

[@ElectricalEngineeringApp]

I have also made a PWA of my android app, better option actually is PWA

[@AndrewEClark-mz6ch]

Excellent overview! Thank you!

[@awesome-coding]

Thank you!

[@akashthoriya]

in india, hdfc card app is PWA

[@jakeave]

The google cdn is huge. I just needed to cache a couple files for a 100kb game, so I just used the native events.

[@BrunoMussoi]

I don't understand those increases in % after moving to pwa.... From the final user point of view, there is no difference between native and pwa, they would not even know it changed, so why their behavior would change along the code change? Are they really implying that without the move to pwa they would not had increased those % amounts? How, why?

[@robert4445]

I've seen that statistic and other "case studies" flying around. I'm guessing it's from Google promoting/marketing PWAs, and so the statistics are biased. They don't tell you that the same user was using a native app before. If the user was only viewing Twitter from their browser before getting prompted to install the app, they may have a much easier time than going through browser afterwards. They're not necessarily saying PWA users tweet 70% more than native app users, though they leave a lot of room for interpretation.

[@rubenheymans1988]

yeah they always compare PWA's over just opening the website in your browser, making it seem like it has a huge amount of benefits. However they should always compare it to native apps. I think the real benefits are: no app store bs, easy and fast updates (you can easily force everyone to be on the same version too), you don't need to give a percentage of your revenue to apple/google (that's why apple is cockblocking PWA's), (way) faster development for all platforms in one go (you basically just build a responsive web app), from my experience it's really fast compared to some native apps too (angular firebase combo). Downside can be no app store, because that's what the users are used too, installing a PWA is 'weird' (although you can in theory publish a PWA to app stores), limited apple support, and some missing native features (you'll never need irl).

[@patocarrasco6266]

PWA are amazing. I just started learning it like 2 days ago and your video shows out! Very useful. The only thing that I can't find is how I can change the app version. It keeps showing `App version: 1`. 😓

[@dennisadamczyk]

Quick hint: If you already added a service worker, it is possible that you only get the old cached version of your app. In DevTools, you can update the service worker manually to get the new version with new caching. This behaviour tends to be a bit missleading since we web developers expect everything to be updated on reload 😅

[@MaximeMoreillon]

Are PWAs equally supported on all modern browsers ? I remember having issues with Safari a while ago

[@helderlj]

Apple does still hate PWA and will try to ban them every now and then

[@awesome-coding]

@helderlj Of course they will - I'm not sure that they'll be allowed to completely ban them (especially in Europe)

[@Gornius]

@@awesome-coding Now Apple's reasoning in Europe is "ability to choose browsers made PWAs technically impossible to implement", which is such a bs.

[@statelessdev]

@@helderlj not true. They even went further and added PWA support to desktop experiences aswell.

[@jimmyroserovallejo]

es porque las pwa no tenian que pagar nada apple y apple nunca pierde su dinero :c

[@nomadshiba]

there's a kysely adapter plugin, that let's you use indexeddb as sqlite database. you can also build a REST api on your sw. acting like a remote server. you can use it like a replica or proxy where you cache data. you can also have global states and all of the app logic on the sw and use the browser side as a viewer only. you can wrap sw states with a signal interface, so it's easy to handle. you can also use it with htmx if you want to, but instead of htmx directly talking with your remote server asking for it to render whole ui. it's asking it to the sw.

[@thatsalot3577]

Apple : no i don't think we'll support another way to make applications for ios, we need that in app purchase control

[@emerson-sheaapril8555]

I really like the clean ways you make your videos, what are you using?

[@awesome-coding]

Thanks! I’m using Premiere Pro

[@rrenildopereiraa]

yeee, was waiting for this video!!

[@awesome-coding]

Hope you enjoyed it!

[@abrahamsimonramirez2933]

Apache cordova works for me

[@huulbaek]

Are you talking about Twitter Lite? And isn't that a very old story? And isn't native still a way better experience when we talk about mobile apps?

[@jimmyroserovallejo]

Yo Uso una PWA y es excelente, hasta web push e instalación sin pagar en tiendas de apps, lamentablemente el soporte para apple ya no existe, pero para android son excelente opción, creo que deberiamos exigir a google nuevas características como plashscreen y una que otra cosita que falta de las nativas... que le sigan dando soporte...

[@seanknowles9985]

Would be great to cover in offline sync with Mong atlas registering pwa on the appstores

[@frangrau3750]

What is your take on PWAs vs Flutter? Thanks

[@celdaemon]

Those two things aren't really comparable, what do you mean exactly?

[@lardosian]

Ye a PWA is really just a website with extra powers so they dont really compare.

[@asagiai4965]

So this is what they called PWA, I thought it should just be named interoperability or portable for some reason

[@sinicvukaj2974]

Very good video

[@awesome-coding]

Thank you!

[@sinicvukaj2974]

@@awesome-coding I have made a few PWAs and they are awesome to create

[@Stefanune]

I dunno if I'm right but I recognize a sardinian/italian accent 😅 great content btw

[@OleksiiGr]

it’s an ai, not a real human.

[@andrespereira4608]

Don't you have issues installing a PWA in Android mobiles? Almost every phone has only one navigator (mostly Chrome) that can install a PWA and the others install a fake one (web shortcut without the pwa features but in display standalone...) The android emulator cannot install a PWA with Chrome... It's only me?

[@matrixlander85]

I use an Android and I have installed PWAs successfully with Chrome and Opera for Android.

[@kasper369]

I wounder why people are building navtive or even hybrid apps when they can build PWAs anyone explain

[@jeffreyjdesir]

Last I tried this year's ago the ios support was terrible, maybe that's changed. You can also compile web assembly and react native so the possibilities are endless

[@adambickford8720]

Apple's anti-competitive practices. Even if you use a different browser, you're still using safari on ios.

[@ChrisWilson1973]

PWAs have been around as an option for years, but iOS support for many important web platform features essential for a good "native like" experience was so poor, and has only really reached a level where it's viable quite recently, that it pretty much killed what was a great option for creating mobile apps. Apple's desire to have full control of the distribution of everything installed on iOS devices is commonly cited as the reason they dragged their heels, and being able to install what to all intents and purposes is an app, just from a third party website, without their involvement or any control, wasn't something they wanted to encourage or enable in any way.

[@statelessdev]

because businesses are paying people to do so. why? discoverability, familiarity. Mr Business / non-technical person doesn't know or care about PWAs.

[@lardosian]

If you asked lets say 100 people would they prefer to use fakebook on their app or phone browser you can be sure it will be vast majority will be their app..

[@morjor-1]

you should make a video on deno bindgen

[@joeseabreeze]

I think PWAs are going to boom soon. Many devs will be able to distro their apps for free without being governed by Apple or Alph/Google

[@awesome-coding]

You might be right. They are saying this for the past 10 years though.

[@najlepszyinformatyk1661]

PWA is awesome in theory and if you're a geek for your internal tools. But mainstream people don't use PWA. Most people I know use many native apps daily but no one uses PWA.

[@alexon2010]

O grande problema é que as explicações sobree PWA são muito rasa.... é dificil sabeer como funcionário para aplicações com muitos componentes, estou tentando entender mas tá complicado.... A PWA e de fato algo extraordinário uma pena que as Libs com Vite, React, exmplicam muito mal estee tema

[@hanmingzheng5592]

I hope less and less ppl use apple. Overpriced, so little invovation.. and limited pwa support

[@abdulazeez.98]

Awesome

[@fuzzy-02]

75% more tweets doesn't sound like a success story to me, haha

[@awesome-coding]

75% more tweets for 150% more toxicity

[@CodingHaribo]

Hasn’t Apple killed the PWA off yet?

[@perseon]

screw you apple

[@awesome-coding]

I’m going home

[@PhielDev]

goat

[@tomekk3569]

👍👍

[@rajeshpoddar5763]

meaow