Angular PWA 在 safari 和舊瀏覽器上無法離線工作

Question

我按照以下方式創建了我的 PWA： https : //angular.io/guide/service-worker-getting-started

它可以在我的 Chrome 桌面上完美地離線工作，但它不能在 iOS 12 Safari 或 Android 5 Chrome 上離線工作。 我正在使用 http-server 命令從 localhost ssl 服務器訪問具有 ip XXX.XXX.XXX:8080 的網絡。

我不明白。 我需要為 Service Worker 不工作的舊瀏覽器和 safari 手動配置清單嗎？ 或者我在 CLI 中生成的 Angular PWA 項目應該為我做一切？

例如我的代碼https://github.com/GuilhermeLessa/teste-pwa

Answer 1

我是新手還是忍不住在這里打字，請大家指正！ 移動設備上的最大 safari 支持（如文檔所示）是 50Mib（並且 50Mb 用於 indexedDB 和 Cache Api），但在桌面上它表示無限制，我從來沒有機會驗證它。 我使用 Express、Nodejs 和一些明顯的 JS 開發了一個應用程序。 它適用於 Chrome、Firefox 和 Opera（在 android 設備上），MS Edge 38 版本似乎不支持它。 Safari 支持的方式是在離線時加載頁面、文本和圖像，但不加載視頻，我認為這是 50Mib 限制的原因，因為我只在移動設備上嘗試過。 MS Edge 42 版幾乎完全支持（至少在我的 ASUS p027 上）沒有安裝最新的 MS Edge 的機器。 另請注意，並非所有舊瀏覽器都支持您是否在清單中提及它，因為它們與 Service Worker 或 Cache API 不兼容。 我知道制作應用程序 PWA 的步驟之一是擁有清單文件，但另一方面，PWA 在沒有清單文件的情況下也能工作，只有燈塔的分數低於 100%。 所以，准確地說，我會說舊瀏覽器不支持 PWA，你會遇到麻煩。 此外，Chrome 和 Opera 瀏覽器可以擁有高達 33% 的可用可用磁盤空間的存儲池，並且每個源最多可以有來自該池的 20%。 Firefox 池是可用可用磁盤空間的 50%，但源的最大值可能為 2048，這稱為硬限制（上限可能小於此值，具體取決於池）。 此外，瀏覽器在臨時存儲上執行 LRU（最近最少使用）策略，也稱為盡力而為，但不適用於持久存儲。 對於 chrome 高站點參與度，或標記站點書籍（當書簽小於 5），將站點添加到主屏幕或允許推送通知，如果這 4 個選項中的任何一個被采用，chrome 將把它變成持久存儲，所以LRU 不會發生在它上面。 與在 Firefox 中一樣，您必須對其進行顯式編碼，並且瀏覽器會使用彈出窗口詢問用戶是否對持久存儲感到滿意。 我知道我已經改道了，但這一切都在 PWA 之下。 希望你能得到更好的答案。 干杯：）