Angular PWA 在 safari 和旧浏览器上无法离线工作

Question

I created my PWA following this: https://angular.io/guide/service-worker-getting-started

It works perfectly offline on my Chrome Desktop, but it does not work offiline on iOS 12 Safari or Android 5 Chrome. I am accessing network with ip XXX.XXX.XXX:8080 from an localhost ssl server using http-server command.

I dont understand. I need to configure the manifest manually for old browsers and safari where service workers dont work? Or my Angular PWA project generated in CLI should does everything for me?

example my code https://github.com/GuilhermeLessa/teste-pwa

Answer 1

I am a newbie still can't stop myself typing in here, please correct me everyone! The max safari supports (as documented) is 50Mib (and that 50Mb is for both indexedDB and Cache Api) on mobile devices but on the desktop it says unlimited, i never had a chance to verify it. I developed an application using Express, Nodejs and some obvious JS. It works fine with Chrome, Firefox and Opera (on android devices), MS Edge 38 version doesn't seem to support it. Safari supports in a way that when offline, it loads the page, texts and images but not the videos which I assume is the reason on the 50Mib limit, as I only tried on the mobile device. MS Edge version 42 supports almost fully (atleast on my ASUS p027) didn't get a machine with the latest MS Edge intalled. Please also note that not all the old browser will support whether you mention it in the manifest or not as they are not compatible with service worker or Cache API. I know making an app PWA one of the steps is to have manifest file, but PWA on the other hand does work without manifest file only the score of lighthouse would be lesser than 100%. So, in precise I would say old browsers don't support PWA and you will remain in trouble. Also, Chrome and Opera browsers can have storage pool of up-to 33% of available free disk space and each origin may have up-to 20% from that pool. Firefox pool is 50% of the available free disk space but the origin may have maximum of 2048, and this is called hard limit (upper bound can be lesser than this depending on the pool). Also, the browsers excercise LRU (Least Recently Used) policy also known as best effort on temporary storage while it doesn't apply on persistent storage. for chrome high site engagement, or making a site book marked (while the book marks are less than 5), adding a site to the home screen or allowing push notification, if any of these 4 option taken chrome will turn it into persistent storage so the LRU won't take place on it. Where as in Firefox, you have to explicitly code it and the browser ask using a pop-up if the user is happy for the persistent storage or not. I know I have diverted but it all comes under PWA. Hope you will get better answer. Cheers:)