Convert Next.js 14+ App to PWA (Progressive web app) | What is PWA and its Benefits

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 49

  • @abuzaryaseen474
    @abuzaryaseen474 8 месяцев назад

    Amazing after spending the whole day reading different articles, finally implemented it with the help of your tutorial

  • @maskman4821
    @maskman4821 Год назад +7

    awesome, next topic: turn nextjs 14 app into android apk with capacitor && turn nextjs 14 app into windows app with electronjs ❤

  • @MushfiqFeed
    @MushfiqFeed 11 месяцев назад +1

    Thank you man. After spending 2 days at last it has been done. I was facing problem at node js 20.10 then downgrade it to 18.19

  • @АлександрМальков-ц8я
    @АлександрМальков-ц8я 9 месяцев назад

    Thanks a lot, it's perfectly done! PWA, Next.js

  • @EzaDev
    @EzaDev 11 месяцев назад

    Thank you for the tutorial, Indians are the best with their tricks

  • @carchutogimenez8539
    @carchutogimenez8539 7 месяцев назад +2

    Hi! Awesome tutorial, thank you!
    According to the author, for new projects we should use Serwist.
    It would be great if you have the time to do a tutorial using Serwist

  • @mohammadghiasi2204
    @mohammadghiasi2204 2 месяца назад

    It was great. Thank you very much ❤

  • @whyisthiscodenotworking
    @whyisthiscodenotworking 6 месяцев назад

    amazing video
    easiest tutorial ! thx bro

  • @rheavictor7
    @rheavictor7 7 месяцев назад

    Really cool video, thanks for this!

  • @vinaybhadre4664
    @vinaybhadre4664 10 месяцев назад

    Awesome buddy ✨
    Really help tutorial

  • @ziyabnajeeb
    @ziyabnajeeb 10 месяцев назад

    Good work brother, only one thing, u r also able to send and receive notifications on the devices with pwa...

  • @Paul-kn4xz
    @Paul-kn4xz Год назад

    Bro! You're awesome! 🤜🏻🤛🏻

  • @annielow9294
    @annielow9294 9 месяцев назад

    Thanks bro, great explanations

  • @VoceBR97
    @VoceBR97 7 месяцев назад

    Can you make a video explaining how to create a service-worker? for example to intercept data coming from a database, api. And save them in cache to make it a little more dynamic?

  • @izz_h
    @izz_h 10 месяцев назад

    Awesome tutorial

  • @vi_shw
    @vi_shw Месяц назад

    In My case It is not creating those sw.js files,I already deleted .next folder ,restarted many times and could not figure out How to resolve that .

  • @almeale317
    @almeale317 9 месяцев назад

    Thanks man!

  • @solomonsunday5537
    @solomonsunday5537 9 месяцев назад

    Thanks a lot for this lecture, please can you also show us how to prompt a user to update the PWA app when there is an update?

    • @swire1571
      @swire1571 9 месяцев назад

      set reloadOnline in next.config.js. so it will automatically reload the cache

  • @GajendranMegajolla
    @GajendranMegajolla 7 месяцев назад

    thanks for the effort

  • @dileepparmar1514
    @dileepparmar1514 8 месяцев назад

    thank you so much sir, how can i use it in other computer?

  • @BigBlackSmoke
    @BigBlackSmoke 11 месяцев назад

    Instant sub

  • @ilmioiosottoilletto
    @ilmioiosottoilletto 5 месяцев назад

    Any idea on how to cache request done by server components?

  • @pavlotsyhanok4843
    @pavlotsyhanok4843 3 месяца назад

    legend!!!!

  • @TemmyCodingLifestyle
    @TemmyCodingLifestyle Год назад

    Thank you. Does that mean the app has a kind of notification system with sound, and it's installed on mobile. will the sound notification work?

  • @shubhamrawat9596
    @shubhamrawat9596 9 месяцев назад

    ThankU ❤

  • @muhammadalifdanielbinmohdh3188
    @muhammadalifdanielbinmohdh3188 8 месяцев назад

    how do i make the theme color and background color dynamic using tailwind or next theme

  • @z1982_
    @z1982_ 7 месяцев назад

    Thanks you! But you don't really show offline support in details

  • @liebespaar93
    @liebespaar93 11 месяцев назад

    i have problem
    Content is not sized correctly for the viewportThe viewport size of 436px does not match the window size of 412px.
    how can i fix it?

  • @krystianwojtowicz9305
    @krystianwojtowicz9305 11 месяцев назад

    No supplied icon is at least 144 px square in PNG, SVG or WebP format, with the purpose attribute unset or set to "any"

    • @tejasivanarayanaprathipati4356
      @tejasivanarayanaprathipati4356 7 месяцев назад

      It is beacause of the icons.
      Try following these steps..
      1. Open any website which converts photos into different sizes icons
      2. Download those icons (Must download 144*144 sized icon)
      3. Copy those icons(png type) to public
      4. now in manifest.json file change the path of the images
      5. Include 144*144 size icon also

  • @nexthero2616
    @nexthero2616 Год назад

    Nice bro

  • @Enigma237x
    @Enigma237x 11 месяцев назад

    Please would this work exactly for Nextjs app thar is not using src directory?

    • @burgerxxiii
      @burgerxxiii 11 месяцев назад

      Same procedure. I didn't do anything differently for mine to work

    • @Enigma237x
      @Enigma237x 11 месяцев назад

      Yeah mine just work. But I was having issues with the images, kept giving errors at the lighthouse but I used this site Pwa builder and it is working now

    • @burgerxxiii
      @burgerxxiii 11 месяцев назад

      can you share the link of the PWA builder?@@Enigma237x

  • @dayanr.5950
    @dayanr.5950 11 месяцев назад

    What happens when you have an app with several urls that contains params? I get error

  • @kacperkepinski4990
    @kacperkepinski4990 11 месяцев назад

    i still dont know when to change id...., it was very unclear for me

  • @krystianwojtowicz9305
    @krystianwojtowicz9305 11 месяцев назад

    i have files but i dont have download icon

  • @piratestuart2917
    @piratestuart2917 3 месяца назад

    where is link broo ?

  • @chrisbitoy7272
    @chrisbitoy7272 6 месяцев назад

    Why make mountain out of a rock, why not use the code from the makers of `next-pwa`:
    ```
    const withPWA = require('next-pwa')({
    dest: 'public'
    })
    module.exports = withPWA({
    // next.js config
    })
    ``` - plain and simple.

    • @qwkl2450
      @qwkl2450 3 месяца назад

      That's what i thought... Why is he using another library instead of the more famous "next-pwa"

  • @khaitrung28
    @khaitrung28 6 месяцев назад

    Oh @ducanh/next-pwa, I'm so proud that the author of this package is a Vietnamese ❤

  • @KhanGaming-ls5ue
    @KhanGaming-ls5ue Год назад

    Bro another Urdu channel