Progressive Web Apps in 100 Seconds // Build a PWA from Scratch

Поділитися
Вставка
  • Опубліковано 10 вер 2024

КОМЕНТАРІ • 439

  • @donjohnny5571
    @donjohnny5571 3 роки тому +1907

    I love these beyond 100 second videos, don't change this concept.

    • @Fireship
      @Fireship  3 роки тому +184

      Noted!

    • @Mosaeedaly
      @Mosaeedaly 3 роки тому +23

      Strongly agree

    • @user-iq7xy8is3f
      @user-iq7xy8is3f 3 роки тому +5

      Oh for me if i search up a Word like pwa here the 100sec are enough :)

    • @Shuyinz
      @Shuyinz 3 роки тому +2

      Yes please! Don't change please!

    • @AkasMajhi
      @AkasMajhi 3 роки тому +1

      ++

  • @Yaxqb
    @Yaxqb 3 роки тому +167

    These 100 seconds videos are literally invaluable. They make it possible for me to know if I should use the tech or not. It's a game changer, because this way I can keep up to date with modern features without digging around in Github or long introduction videos. It's like a news feed really. Don't ever stop❤️

    • @KAZVorpal
      @KAZVorpal 17 днів тому +1

      I value the video at two dollars.

  • @ofmouseandman1316
    @ofmouseandman1316 3 роки тому +190

    I've seen twice where you made: 100seconds... but more... I like the idea of expending in a few minutes after

  • @onlygiogi
    @onlygiogi 3 роки тому +162

    the 100 seconds is my favorite series on this channel! it explains to you everything u need to know to start using a new technology. AMAZING!

  • @ofrikirshen3071
    @ofrikirshen3071 3 роки тому +301

    me: opens youtube to search PWA
    youtube algorithm and Fireship: PWA in 100 sec

  • @richienguyen2703
    @richienguyen2703 3 роки тому +28

    I love 100 second and explanation in depth in one video!

  • @nileshpatva
    @nileshpatva 3 роки тому +15

    Opened UA-cam,
    First video - PWA in 100 seconds,
    that's why I love UA-cam algorithm, and you too ❤️
    Thank you 😊

    • @russelfernandes8483
      @russelfernandes8483 3 роки тому

      "and you too"?
      Surely there is something else going on here.
      Just kidding!
      Agreed, this channel is fantastic.

  • @Chocoholic1337
    @Chocoholic1337 3 роки тому +23

    Hey man, just wanted to leave you a comment.
    I've fallen out of touch with the software development world because I'm having a shitty time with my employer. This video... This video brought back my excitement that I had when I got into this profession. Thank you for that.
    I'm going to start a side project and put my passion in there. Thank you. You've earned a life long subscribed.

  • @Minitomate
    @Minitomate 3 роки тому +17

    I just like the way you presented this tutorial, a brief 100 seconds explanaition and at the end a brief showcase of the upcoming video that you're gonna make.
    Awesome content!

  • @DanielosCompaneros
    @DanielosCompaneros 3 роки тому +67

    Dude! Easily the best dev UA-cam channel. Such quality! Much interesting! Many educational 😁🔥

    • @DanielosCompaneros
      @DanielosCompaneros 3 роки тому +1

      And your business strategy is so clever! You're teasing with your UA-cam content to become pro member. Shame I can't afford it

  • @brianevans4
    @brianevans4 3 роки тому +6

    this is starting to look like a much better option as the app stores now only list apps whose politics they agree with. Having an independently installable app seems like a good route for future apps

  • @mirashif3416
    @mirashif3416 3 роки тому +45

    I can listen to you all day! ♥♥

  • @russelfernandes8483
    @russelfernandes8483 3 роки тому +7

    Fantastic. Best format - 100sec for concept, a little bit more for a fuller description with exercise. And the best part - everything works! Please continue to make videos in this format!

  • @TheBadFred
    @TheBadFred 3 роки тому +125

    Apple hates PWAs because they can't tax every aspect of the app with 33% like it happened with fortnight the battle royal game.

    • @cronchcrunch
      @cronchcrunch 3 роки тому +5

      It's a 30% cut and it's Fortnite.

    • @TheBadFred
      @TheBadFred 3 роки тому +1

      @@lucaspelegrino1 Cordova yes PWA not. Android can TWAs in the play store, kinda
      trusty PWAs.

    • @corvacopia
      @corvacopia 8 місяців тому +3

      Ironic since Steve Jobs originally wanted the iPhone to be based around web apps.

    • @CelentanoLuca
      @CelentanoLuca 7 місяців тому

      so why are they pushing it so hard

  • @balwinderrajput3204
    @balwinderrajput3204 3 роки тому +1

    This is by far the best tech introductory video I ever came across…just in 100 seconds I got to know all about to kick start pwa

  • @ZayyanMasud
    @ZayyanMasud 3 роки тому +37

    Google should have your voice for the assistant. So smooth. Do you have audiobooks?

    • @EllyOguttu
      @EllyOguttu 3 роки тому +1

      I wonder if AR will make it possible

    • @Formula7Driver
      @Formula7Driver 3 роки тому

      Maybe if you play it on 0.75 speed

  • @tharindusathischandra9533
    @tharindusathischandra9533 3 роки тому +1

    I really love this way of 100 seconds + beyond,, plz continue this method

  • @samuel_abate
    @samuel_abate 2 роки тому

    I prefer your 100 seconds to most ... hour courses. I'm grateful for your content, Thanks!

  • @BillCarlson
    @BillCarlson Рік тому

    Just wanted to say THANKS for this! Using this info I was able to convert my website to a PWA and make it installable in about 3 hours!!

  • @davidstavis1335
    @davidstavis1335 Рік тому

    Fireship continues to be the best learning resource on the entire internet. This video owns.

  • @orderla8877
    @orderla8877 Рік тому +3

    This video is 2yrs old...😲
    (I've just discovered PWAs.)
    Tnx dude, for awesome video.

  • @busyrand
    @busyrand 3 роки тому +2

    Well now!... This is very impressive... I'm floored by the elegant presentation... You're an amazing explainer!

  • @miteshrocker
    @miteshrocker 3 роки тому +6

    This concept is amazing! Great intro in 100 seconds and awesome tutorial in the Beyond part! Explaining such an interesting concept so well, you're awesome!

  • @KyleRuscigno
    @KyleRuscigno 3 роки тому +1

    I was literally just researching this and bam here you come with this video

  • @InstaSound
    @InstaSound 3 роки тому +12

    Thanks for making the 100 second format into something longer. Way better than it was before. The old ones always felt like a teaser clip :D

  • @gyattrizzV
    @gyattrizzV Рік тому

    When he says the line about going beyond 100 seconds it is always so satisfying

  • @midhatahir8104
    @midhatahir8104 3 роки тому +2

    Learned more from your 100 seconds videos than 1hr tutorials

  • @FlorianEagox
    @FlorianEagox 3 роки тому +2

    I love PWA
    I just built a PWA the other day.
    Great vid

  • @oardi
    @oardi 3 роки тому +1

    Thank you so much. I created my first React PWA using a custom Webpack-Stack and your help :)

  • @dasten123
    @dasten123 3 роки тому

    Information about PWA that is not from like 2015... amazing!

  • @botdamian5688
    @botdamian5688 3 роки тому

    100s videos are my fav. They get straight to the point and if I want to know some more I watch till the end. Always worth watching it and learning new tech! Thanks

  • @sarveshhiwase193
    @sarveshhiwase193 3 роки тому +1

    The best quality and best voice no arguments!!

  • @cmarc2156
    @cmarc2156 3 роки тому

    I only watch these videos because I really like your explanations... I am not even a web dev of any sort!

  • @vffbgx616
    @vffbgx616 2 роки тому

    I really like this type of videos from you. Both 100sec and beyond 100 sec

  • @djdankmemes9257
    @djdankmemes9257 Рік тому

    Dude you make some of the best content on the web. Thanks so much for providing and doing this work.

  • @abrorkhaytbaev158
    @abrorkhaytbaev158 3 роки тому +2

    Man, you just predict what I wanna learn. Love your content.

  • @zachgoll
    @zachgoll 3 роки тому

    Your videos are so concise and clear man I’m jealous

  • @Ezinma88
    @Ezinma88 2 роки тому

    I'm not ready for this level yet. But, it's fun to know that this exists for when I am there.

  • @hugopfeffer4175
    @hugopfeffer4175 3 роки тому +2

    It would be awesome if you made more in depth content with this level of quality. I would definitely think about buy it.

  • @CoolTomato
    @CoolTomato 3 роки тому +1

    Finally a video on my favourite web technology!

  • @codeaperture
    @codeaperture 3 роки тому

    Building a PWA currently.. thanks for best practices

  • @richardkirigaya8254
    @richardkirigaya8254 3 роки тому +1

    I love these beyond 100 secs style

  • @heisthazey7311
    @heisthazey7311 3 роки тому

    I am about to finish up my computer science degree this spring & this video along with the extended web sockets video have come at the perfect time for touching up my portfolio, love the extended content.

  • @kumarvishalben
    @kumarvishalben 3 роки тому +1

    Stadia on iOS as PWA.
    What a great comeback 😄

  • @alherrera9390
    @alherrera9390 3 роки тому

    This is my favorite dev channel in all youtube because of this cool stuff

  •  3 роки тому +1

    Lean, informative, concise, directly on point! I love your content!

  • @shubhamvermani2221
    @shubhamvermani2221 3 роки тому

    woah, a good explanation in a short time, as well as giving out valuable resources! Incredible channel, subscribed instantly!

  • @leonf.7893
    @leonf.7893 3 роки тому +1

    This reminds me of when I was developing Firefox OS apps many years ago.

  • @foxkashima
    @foxkashima 4 місяці тому

    This guide is awesome and incredible helpful to start off. Thank you.

  • @freeideas
    @freeideas 2 роки тому +1

    WAIT! Where did the "INSTALL" button come from, and what does it do? That's the best part of all of this!

    • @Warface
      @Warface 2 роки тому +1

      If your website have a manifest and service worker, it will trigger the install after a couple of seconds on the website on your mobile device.

    • @freeideas
      @freeideas 2 роки тому

      @@Warface thanks. You rock!

  • @narendrasinghrathore1012
    @narendrasinghrathore1012 3 роки тому +1

    Need more on PWA, like animations and similar FPS like we have in native apps

  • @dave6012
    @dave6012 2 роки тому

    According to lighthouse my content takes ~14 seconds to be interactive 🙃
    It doesn’t _actually_ take that long, but it looks like there’s room for improvement in my webpack build.
    Thanks for exposing that to me 😬😅

  • @Azaroth27
    @Azaroth27 3 роки тому

    Thank you very much! It helped me to clarify ideas and find new tools for a new project.

  • @harishst202
    @harishst202 3 роки тому

    Staying Tuned! Waiting for the Browser API Videos!

  • @MrNitPic
    @MrNitPic 4 місяці тому

    That 100 seconds was 🔥🔥😮‍💨

  • @imibuks-replit
    @imibuks-replit 2 роки тому

    This is really usefull, im actually now working on a PWA

  • @jaedmiah
    @jaedmiah 3 роки тому

    Thanks i knew about Michael Ross! He was my professor in Oxford and told us about Vectra!

  • @wontonfuton
    @wontonfuton 3 роки тому

    How could someone dislike these videos! Great vid as always!

  • @amnaatarapper
    @amnaatarapper 3 роки тому +2

    Im always amazed by the quality and the amount of real world usable informations you can squeez in a so short video!
    Thank you for the effort, you're making this world a better one for devs everywhere.
    Peace!

  • @sangameshs5403
    @sangameshs5403 2 роки тому

    1:12 That service worker is working like anything 😂

  • @arkhamian7586
    @arkhamian7586 Рік тому

    It feels good to understand. Thank you!

  • @grigoreo_fox
    @grigoreo_fox 7 місяців тому

    MAN!
    thank you so much for you videos!

  • @harmez7
    @harmez7 2 роки тому

    these mini mems among your vids steals my focus and enters me into hard laughin

  • @usertempeuqwer7576
    @usertempeuqwer7576 3 роки тому

    We need a 'SSO LDAP SAML ... in 100 sec' Video ! Greatly appreciated .

  • @ksato3991
    @ksato3991 3 роки тому

    Amazing! Love the very concise explanation! Thank you !!

  • @Glow0110
    @Glow0110 3 роки тому

    Great video! Would love to see more in depth videos about PWAs 😎

  • @rezaasgary1442
    @rezaasgary1442 2 роки тому

    this channel is something else

  • @jakubwegrzyn3798
    @jakubwegrzyn3798 3 роки тому +26

    Tells: Push notifications
    Shows iphone which doesn't support push notifications through the web

    • @Pete_YT
      @Pete_YT 3 роки тому +3

      Detect iOS device and fall back to SMS notifications.

    • @mateowang6570
      @mateowang6570 3 роки тому +2

      @@Pete_YT That or use something like Ionic

    • @mateowang6570
      @mateowang6570 3 роки тому

      ​@efficientshred True, but you can use Capacitor and turn your ionic app into a native app. There's a Capacitor plugin that will call iOS native APIs for you and fallback to web APIs in non-iOS environments.

  • @HexapoDD
    @HexapoDD 3 роки тому +1

    Perfect for my cup of tea that I just made

  • @bdpod
    @bdpod 3 роки тому

    Suggestion: Change the playlist name "100 seconds of code" to something like "X in 100 seconds"
    Note: This suggestion was nearly "Create a playlist for these 100-second videos" because I missed it before double-checking.
    Suggestion #2: Keep up the great work! 🙏

  • @benabdallahbillel
    @benabdallahbillel 3 роки тому

    This channel is dev heaven

  • @sircitrus
    @sircitrus 3 роки тому

    I just had to see this!! Great video as always.

  • @sushmam6434
    @sushmam6434 3 роки тому

    Thank you for a very nice video teaching how to build from scratch. It helped me a lot. :D

  • @eximy4818
    @eximy4818 3 роки тому +3

    Your voice is shampoo to my hair ❤️

  • @lucasmelo010
    @lucasmelo010 2 роки тому

    thanks for this amazing content. One of the best if not the best.

  • @anotherbeardedguy
    @anotherbeardedguy 3 роки тому

    Im fairly new to you channel but i must say.. Thank you so much, the content. Its easy to listen. All the information is presented clearly. Jus love it. Are you planning on making a video about your app design process?

  • @_itsbrian_
    @_itsbrian_ 2 роки тому

    Thank you so very much for this video, you saved my life

  • @ricksondpenha
    @ricksondpenha 3 роки тому

    Til pwa can be so simple to get started... I always thought u need frameworks like angular or react!!

  • @EnglishRain
    @EnglishRain 3 роки тому

    Brilliant work! Please do more PWA videos!

  • @MercyFromOverwatch2
    @MercyFromOverwatch2 2 роки тому

    Jeff is still my favourite tech youtuber

  • @seiied50005
    @seiied50005 3 роки тому

    You are the best.
    If I could I would like each part of video separately.

  • @millsmotion
    @millsmotion 2 роки тому

    Excellent video!

  • @DretaSaysHi
    @DretaSaysHi 2 роки тому

    Such an amazing video. Helped me a lot.

  • @_zetrax
    @_zetrax 3 роки тому +1

    Great Content!... only if programmers documented their code like you

  • @azatecas
    @azatecas 3 роки тому

    bro you always make videos that make me want to learn more

  • @TorstenEngelbrecht
    @TorstenEngelbrecht 3 роки тому +7

    Love your channel.
    Regarding PWA's I just wish Safari (and esspecially iOS Safari) would follow the same standards as all other modern browsers OR Apple allowing other browser engines to run natively on their platform. Until this is happening I don't see how PWAs (except for simple ones) can be a real cross-platform solution.

  • @tbgan6675
    @tbgan6675 3 роки тому

    Hope to include topic on how well IOS devices support PWA. Thanks for great info of this video.

  • @omaryassir5885
    @omaryassir5885 3 роки тому

    Fireship makes life easier ⚡

  • @vijayrana8133
    @vijayrana8133 3 роки тому

    You earned a subscriber. Good job buddy!

  • @markfawaz
    @markfawaz 2 роки тому

    You are simply awesome!

  • @samldev
    @samldev 3 роки тому +1

    iOS support is the number one blocker of PWAs right now in my opinion. And it's obvious why it's not a priority, they don't want people turning to PWAs instead of the app store where they can take their 15/30%

  • @FUNshoot
    @FUNshoot 3 роки тому

    Kudos for using a clip from "Metal Construction".

  • @utkukaanarasan6034
    @utkukaanarasan6034 2 роки тому +2

    Is this basically electron but for mobile ?

  • @thatghost281
    @thatghost281 2 роки тому +2

    keep up the good work! also, can you please leave the urls to resources you use in the description?

  • @Skyre0
    @Skyre0 3 роки тому

    PWAs are the future

  • @karanjotsandhu237
    @karanjotsandhu237 3 роки тому

    Eagerly waiting for the next video...top stuff

  • @quachhengtony7651
    @quachhengtony7651 3 роки тому +5

    So that's what that service worker file I keep deleting after initialize a new React app is for :v

  • @dhavalparekh6813
    @dhavalparekh6813 3 роки тому

    Thank you for this....it’s really informative and makes some concepts clear. I would suggest you create a video difference between mobile app build in PWA and native, pros and cons of pwa....subscribed btw 😄

  • @prasanthmanimaran5158
    @prasanthmanimaran5158 3 роки тому

    Just started my Ionic Angular for PWA too 😋

  • @ProfessionalTycoons
    @ProfessionalTycoons 3 роки тому

    what a time to be alive....