Quasar-Framework开发PWA：浏览器离线可用，Android7.1.1设备离线无法访问

Hey there! Let’s break down why your Quasar PWA works perfectly in the browser (even with the server down) but fails on Android 7.1.1. Older Android WebView versions have specific quirks with Service Workers, so here are the most common fixes to try:

1. Service Worker Compatibility with Old WebView #

Android 7.1.1 uses Chrome WebView version 51-55, which has limited support for modern Service Worker features. Quasar’s default PWA setup might be using newer APIs that aren’t supported here.

• Check Workbox Version: If you’re using Workbox (Quasar’s default for PWA caching), versions 6+ drop support for older WebViews. Downgrade to Workbox 5.x in your project dependencies.
• Adjust Cache Logic: In src-pwa/register-service-worker.js, avoid using options like ignoreSearch or ignoreMethod in CacheStorage.match() calls—these aren’t fully supported in older WebViews. Stick to basic cache matching logic.

2. HTTPS & Certificate Validation #

Older Android WebViews enforce strict HTTPS requirements for Service Workers (unlike localhost testing in desktop browsers). If your PWA isn’t served over HTTPS, or there’s a certificate issue, the Service Worker won’t function properly.

• Use HTTPS: Deploy your PWA to an HTTPS-enabled server (production environments require this).
• Verify Device Date/Time: Incorrect system time can cause certificate validation failures. Ensure the Android 7.1.1 device has the correct date and time set.

3. Cache Manifest & Resource Integrity #

Quasar generates a cache manifest (via Workbox) to store offline assets. Android 7.1.1’s WebView is picky about manifest integrity—any mismatched resource hashes or missing files will break offline access.

• Rebuild the PWA: Run quasar build -m pwa to regenerate the cache manifest and ensure all asset paths/hash values are correct.
• Check Workbox Config: In src-pwa/workbox-config.js, confirm that critical assets like index.html, your main JS bundle, and static assets are included in the cache scope. Avoid excluding files that the app needs to load offline.

4. Service Worker Registration Timing #

Older WebViews might fail to register Service Workers if the registration happens too early (before the page is fully loaded).

• Delay Registration: Modify src-pwa/register-service-worker.js to register the Service Worker only after the window has finished loading:

  window.addEventListener('load', () => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(registration => {
          console.log('SW registered: ', registration);
        })
        .catch(registrationError => {
          console.log('SW registration failed: ', registrationError);
        });
    }
  });
  

5. Storage Quota Limits #

Android 7.1.1’s WebView has smaller cache storage limits. If your PWA caches too many large assets, the cache might get truncated or fail to save entirely.

• Trim Cached Assets: Remove unnecessary large files (like unused images or libraries) from your project.
• Implement Cache Cleanup: Add logic in your Service Worker to delete old or unused cache entries when new versions are deployed, freeing up space for critical assets.

Start with checking the HTTPS setup and device time first—those are the quickest wins. Then work through the other steps one by one, testing after each change to see if the offline functionality works on Android 7.1.1.

内容的提问来源于stack exchange，提问作者D3myon