PWA 在 android 浏览器上的表现和解决方法-JavaScript中文网-JavaScript教程资源分享门户

随着移动互联网的普及，越来越多的网站开始采用 PWA（Progressive Web Apps）技术。PWA 可以像传统的 Native App 一样提供类似于离线访问、推送通知、添加到桌面等功能，同时兼具 Web 应用的跨平台和无需下载安装等优点。但是，在 Android 浏览器上体验 PWA 的时候，你可能会遇到各种问题，比如安装失败、无法完成保存到桌面等问题。本文将介绍 PWA 在 Android 浏览器上的兼容性表现以及相应的解决方法，帮助您更好地开发和使用 PWA。

PWA 在 Android 浏览器的兼容性表现

地址栏

在 Android Chrome 浏览器上，当您访问一个提供 PWA 功能的 Web 应用时，如果该应用支持 PWA，会显示一个加号图标在地址栏右侧。单击该图标会显示 "添加到主屏幕" 的提示信息。但是，在某些 Android 版本上，这个加号图标并不存在，这可能导致用户无法知道该应用提供了 PWA 功能。因此，我们需要针对不同版本的 Android 进行兼容性调整。

安装

当您点击添加到主屏幕按钮时，系统会自动将该应用图标添加到主屏幕，同时下载应用相关文件（如 Service Worker），并在后台完成安装过程。但是，在某些 Android 版本上，该安装过程可能会失败。

缓存

PWA 的最大好处是通过 Service Worker 实现了缓存页面，使应用具有离线访问能力。但是，在 Android 浏览器上，缓存相关的 API 支持不是很好，这可能导致 PWA 在离线状态下无法正常使用。

解决方案

兼容性判断

在移动端兼容性判断中，我们通常使用 Modernizr 和 Bowser 等库进行兼容性检测。由于 PWA 技术并没有一个明确定义的标准，可以选择检测某些 API 的支持情况，例如 Web App Manifest、Service Worker、Push Notification 等API。代码示例：

if ('serviceWorker' in navigator) {
    // Service worker support
}

if ('PushManager' in window) {
    // Push notification support
}

if ('standalone' in window.navigator) {
    // Installed PWA support
}

导航提示

当网页支持 PWA 时，可以给用户提供相关的操作提示。例如，显示一个 "添加到主屏幕" 或 "下载应用" 按钮，并使用 JavaScript 来处理这些用户操作。代码示例：

// 添加到主屏幕
function addToHomeScreen() {
    var prompt = document.createElement('prompt');
    prompt.textContent = 'Add to Home Screen';
    prompt.addEventListener('click', function() {
        // 显示添加应用的弹窗
        deferredInstallPrompt.prompt();
        deferredInstallPrompt.userChoice.then(function(choiceResult) {
            if (choiceResult.outcome === 'accepted') {
                console.log('User accepted the A2HS prompt');
            }else {
                console.log('User dismissed the A2HS prompt');
            }
            deferredInstallPrompt = null;
        });
    });
    document.body.appendChild(prompt);
}

// 下载应用
function downloadApp() {
    window.location.href = '/app.apk';
}

Service Worker 兼容性

对于 Android Chrome 浏览器上的 Service Worker 兼容性问题，我们可以使用一些 polyfill 来解决。例如，可以使用 sw-toolbox 或 Workbox 来模拟 Service Worker API 在不支持的浏览器上运作。代码示例：

if ('serviceWorker' in navigator) {
    // Service worker support
    // 使用 Workbox 生成 Service Worker
    const wb = new Workbox('/sw.js');
    wb.register().then(
        // Service worker is active
    ).catch(
        // Service worker registration failed
    );
} else {
    // Service worker not support
    // 使用 sw-toolbox 注册 Service Worker
    importScripts('/sw-toolbox.js');
    toolbox.precache(['/index.html']);
    self.addEventListener('fetch', toolbox.fastest);
}

缓存策略

对于 Android 浏览器上缓存相关的问题，我们可以使用以下几种策略：

使用 History API，避免缓存相关问题。
适当降低缓存优先级，以避免占用过多存储空间。
使用 IndexedDB 存储，以替代传统的 localStorage 和 sessionStorage。
使用 Server-Sent Events 和 WebSocket 等技术，在后台更新缓存。

代码示例：

// 使用 IndexedDB 存储
if (window.indexedDB) {
    var request = window.indexedDB.open('myDatabase', 1);
    request.onerror = function(event) {
        console.log('Error opening database.');
    };
    request.onsuccess = function(event) {
        db = request.result;
        console.log('Database opened successfully.');
    };
    request.onupgradeneeded = function(event) {
        // 创建数据库
        var db = event.target.result;
        var store = db.createObjectStore('users', {keyPath: 'name'});
        store.createIndex('email', 'email', {unique: true});
    };
}

// 使用 Server-Sent Events 更新缓存
var source = new EventSource('update.php');
source.addEventListener('message', function(event) {
    var data = JSON.parse(event.data);
    if (data.type === 'update') {
        var url = data.url;
        caches.open('myCache').then(function(cache) {
            fetch(url).then(function(response) {
                cache.put(url, response.clone());
                console.log('Cached ' + url);
            });
        });
    }
});

总结

本文对 PWA 在 Android 浏览器上的表现及相应解决方法进行了详细的介绍。针对不同的兼容性问题，我们可以使用不同的解决方案。希望此文能够帮助您更好地开发和使用 PWA。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a79601add4f0e0ff0ba6ef

PWA 在 android 浏览器上的表现和解决方法