Workbox doesn't cache in iOS standalone

[vanhtuan0409]

Library Affected: workbox-sw workbox-webpack-plugin

Browser & Platform: iOS 11.4

Issue or Feature Request Description: I trying to build a PWA that have the offline capability. I'm using workbox-webpack-plugin with InjectManifest class. The app runs well on Safari/Chrome (MacOS and iOS) under both online and offline condition. When I added to the app to home screen from Safari (iOS) and turn off internet connection, I got No connection page from Safari. I tried to debug from Safari but there are no error messages.

App URL: https://nordot-pwa.herokuapp.com/ Webpack config:

new InjectManifest({
      swSrc: path.resolve(paths.appSrc, "sw.js"),
      swDest: "service-worker.js",
      // Don't precache sourcemaps (they're large) and build asset manifest:
      exclude: [/\.map$/, /^(?:asset-)manifest.*\.js(?:on)?$/]
})

Sw.js:

console.log("Service worker is running!");

workbox.skipWaiting();
workbox.clientsClaim();

workbox.routing.registerNavigationRoute("/index.html", {
  whitelist: [/^(?!\/__).*/]
});

// Background sync for tracking post api
const bgSyncPlugin = new workbox.backgroundSync.Plugin("trackingQueue", {
  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
});
workbox.routing.registerRoute(
  /\/api\/.*\/*.json/,
  workbox.strategies.networkOnly({ plugins: [bgSyncPlugin] }),
  "POST"
);

workbox.precaching.precacheAndRoute(self.__precacheManifest);

When reporting bugs, please include relevant JavaScript Console logs and links to public URLs at which the issue could be reproduced.

[jeffposnick]

There's a bug in Safari's service worker implementation that prevented resources loaded by importScripts from being implicitly cached, as the service worker specification requires.

This has been fixed in Safari Technical Previews as of release 59, but I don't know how that translates into the version of Safari that's deployed on iOS 11.4.

My guess is that it explains what you're seeing, and if you have access to the Safari Technical Preview program on your iOS device, confirming that the latest version of Safari works as expected should be possible.

[vanhtuan0409]

@jeffposnick Thank you a lot for the response The Safari browser is working OK. Only Standalone version (the app after added to home screen) have the problem. So I think this is the problem of iOS itself. Do we have any workaround for this or we should wait for iOS update

[dcflow]

Hey @jeffposnick I put the workbox script inside the service worker but it still doesn't seem to work. Is there any way to make this work?

[michalsnik]

I have the same problem using GenerateSW. Everything works nice in Safari itself but not after adding the page to the home screen. Ok it works partially - that is when I open the app while having the internet and then disable it - I can go through the app and assets are loading properly from cache - but if I go to home screen and then back to the app - it shouts there's no internet - just like the service-worker had been deleted and it can't load index.html from cache anymore.

[michalsnik]

Interestingly when I move precache manifest's content from separate file to the service-worker.js itself it works as expected 🤔 Do you have any idea why it might behave like this? @jeffposnick

[michalsnik]

In the end I decided to use sw-precache-webpack-plugin and now it works like a charm.

[jeffposnick]

Here's what seems to be the relevant, underlying bug in Safari: https://bugs.webkit.org/show_bug.cgi?id=190269

I'm going to leave this tracking bug against Workbox open for the time being, and we should loop back around once that WebKit bug fix makes it out to iOS Safari and confirm that it's fixed.

[joewoodhouse]

This appears to be working now in iOS12.1?

[musti-91]

does it work for you like that? because I have the same configuration but it doesn't work for me!!😔 I mean for InjectManifet()

[alexandre-combemorel]

I also, lost my cache once I close Safari with iOS12.1. It seems to still not be working.

[jeffposnick]

If folks on the latest iOS release still can reproduce issues, let us know and we can reopen.

[egluhbegovic]

@jeffposnick Hey Jeff, I have tested on iOS 14.6, app works offline on safari, but the app that is saved on home screen, doesn't work offline.

[jeffposnick]

I believe that the existing service worker registration and cache isn't shared when an app goes from being loaded in Safari to standalone on the iOS homescreen, but after you initially load the iOS homescreen version (while online), a new service worker registration should go into effect.

So are you testing this after loading the iOS homescreen version at least once while online, or are you testing after immediately going offline?

If you're testing while first opening it while online, and you never see the service worker caching take place, that sounds like a bug. Could you share the URL of the web app you're testing with?

[egluhbegovic]

@jeffposnick Thank you for the prompt reply.

I did a test with going inline first with the standalone app then switched offline and tried.

I will not be able to share the app I am working on at the moment, but I can duplicate the setup and host somewhere. I Will message here when that is up.

To confirm though, do you have a iOS standalone app working offline?

[jeffposnick]

https://www.tiktok.com/ uses Workbox and has a custom offline experience, and when I just tried adding it to my homescreen using the most current iPad version of Safari, I was able to see that custom offline experience after switching to Airplane mode.

[akaFTS]

I'm seeing the same issue on iPadOS 15.3. My Workbox-based PWA is cached correctly inside Safari - I can move to other pages while offline, even pages I hadn't visited before, and also close the tab and open again - but a version of it installed to the homescreen does not cache anything at all.

It also works perfectly in other platforms such as desktop Chrome.

[jeffposnick]

Hello @akaFTS—if this issue is limited to iOS Safari, then I'd recommend taking advantage of the offer at https://twitter.com/jensimmons/status/1491113783838019584

I.e. file a bug with steps to reproduce at https://bugs.webkit.org/, and if you don't hear anything back via the WebKit issue tracker, ping via Twitter.

Resolving (most) issues with service workers on iOS Safari is unfortunately outside of the control of the Workbox team.