Hey Bande, in diesem PWA-Tutorial beginnen wir damit, einige unserer Assets für den Offline-Modus vorab zu cachen. Wir können dies im Ereignishandler ‘install’ des Service-Workers tun. —————————————- 🐱‍💻 🐱‍💻 Kurslinks: + Kursdateien – + Modernes JavaScript-Tutorial – 🐱‍💻 Andere verwandte Kurse: + Firebase Firestore-Wiedergabeliste – Firebase-Authentifizierungs-Tutorial – .

Kommentare (27)

  • Luc Huet Antworten

    Merci encore ! First !

    20. Mai 2019 um 11:44
  • mr Minstrel Antworten

    Great and timely series, Thanks! I'm actually following along and trying to mirror a NUXT version of these vids. It's sort of hit and miss but a learning experience to be sure!

    20. Mai 2019 um 12:28
  • I AM Antworten

    When using a service like firebase (imported in react ) how would you prevent caching??

    20. Mai 2019 um 15:13
  • Łukasz ;p Antworten

    Thx for work

    21. Mai 2019 um 14:24
  • ToniMaunde Antworten

    Great content as always!

    21. Mai 2019 um 15:12
  • ziranshu Zhang Antworten

    Isn't caching "/" already caching everything? So when you add a lot of path, will there be duplicated resource being cached multiple times just for different route requests?

    24. Mai 2019 um 22:01
  • Abdul Shakur Antworten

    why dont we cache the manifest file too?

    27. Mai 2019 um 15:54
  • Alex K. Antworten

    it is very interesting and informative series! thank you!

    10. Juli 2019 um 18:19
  • Cesar Martinez Antworten

    @4:30 you mention that the add and addAll methods reach out to the server to grab resources. Is this a second request that is sent after the first response with all the assets is obtained? Is it not possible to cache the answer from the request as they return from the server instead of hitting the server twice?

    22. Juli 2019 um 11:27
  • Satyam Singh Antworten

    I am getting this error in my Service worker line 1. This is the error "Uncaught (in promise) TypeError: Request failed"
    I have exactly the same code of yours.

    15. August 2019 um 17:13
  • Exploding Art Antworten

    Great series. I'm following it and learning a lot! One thing I'm wondering about is that the Material Icons google font is not showing up in either mine or your DevTools > Application > Cache Storage. Is the font still cached?

    19. August 2019 um 12:00
  • Ahmad Mobaraki Antworten

    Awesome tutorial, Thank you my friend.

    22. August 2019 um 6:26
  • Ryan Roberts Antworten

    im getting an uncaught promise error on line one? not sure what im doing wrong?

    code is below

    const staticCacheName = 'site-static';
    const assets = [

    // install service worker
    self.addEventListener('install', evt => {
    console.log('service worker has been installed');
    caches.open(staticCacheName).then(cache => {
    console.log('caching shell assets');

    // activate service worker
    self.addEventListener('activate', evt => {
    console.log('service worker has been activated');

    // fetch event
    self.addEventListener('fetch', evt => {
    console.log('fetch event', evt);

    16. Oktober 2019 um 20:12
  • Yann Salmon Antworten

    Amazing teacher ! I love your work, thanks.

    2. November 2019 um 8:38
  • Vanessa Martin Antworten

    In my case I need to put "return cache.addAll(assets);
    // install event

    self.addEventListener('install', evt => {

    console.log('service worker installed');


    caches.open(cacheStatic).then(cache => { // if exist

    console.log( 'caching shell assets' );

    return cache.addAll(assets);




    7. Februar 2020 um 9:49
  • flex capacitor Antworten

    Let's say you create a large list of files frequently. Is it possible to store the list of assets separately in a separate file and import them in to the assets constant?


    `const assets = require("assets.js");`


    `const assets = ['/','index.html','long','list','of','assets'];`

    7. Mai 2020 um 17:59
  • Rob Molloy Antworten

    If you have uncaught (in promise) error it is likely a typo in your assets array. Start with assets = ['/']; and check if that works. Then add each item carefully one by one.

    Great tutorial net ninja!

    9. Mai 2020 um 11:49
  • Даниил Устименко Antworten

    The start_url did respond, but not via a service worker.

    11. Mai 2020 um 13:26
  • Parth Akbari Antworten

    Best explanation. Can we add frequently changes files in cache with version number append so, we can keep update cache file when change on server?

    23. August 2020 um 8:21
  • hamed ostovari Antworten

    What's happened for webapplications like react js or next js apps , that have built and then upload , there is no stable page and it alwasy has been changed the name of files or theye are alotof file and i cant cache all of them one bye one … so in offline mode i got error and my app didnt run … can you explain this situation?🤔

    30. August 2020 um 6:51
  • Edward Leung Antworten

    this playlist is gold

    1. September 2020 um 15:20
  • Rahul Dahal Antworten

    how and where do we cache dynamically generated css/js files.
    like, app.[contentHash].js ?

    27. Dezember 2020 um 14:36
  • Domingo Alvarez Antworten

    I have followed the entire series up until now but I have an issue with this part. I have followed the steps to cache assets and copied the code from the GitHub. The 'site-static' site is showing up but nothing inside it. I am getting an error -> Uncaught in promise TypeError: Failed to execute 'Cache' on addAll: Request failed. Any ideas?

    29. Januar 2021 um 15:57
  • Ian Rogers Antworten

    This is not working in 2021.

    9. März 2021 um 3:14
  • Balaji Ravi Antworten

    Can I use CDN links to cache?

    29. April 2021 um 21:14
  • Behzad Abf Antworten

    wow.. this is we call tutorial…you supeeeer perfect… can please please make video about webrtc please. with real stun turn server configuration …not local one…please..sir… thankxxxxxxxx

    30. Mai 2021 um 22:47
  • Raydon Frost Antworten

    i was trying to cache api data which includes a image src link, everything is getting cached but the images are not showing, so how can i cache images from urls which i get from an API request?

    23. Juni 2021 um 22:04

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.