PWA 实战 | 利用 SW 实现页面加载动画

前言

PWA（Progressive Web Apps）是一种新兴的 Web 应用程序开发方式，可以实现类似原生应用的用户体验。其中，利用 Service Worker 技术可以实现离线访问、推送通知等高级功能。本文将介绍如何使用 Service Worker 实现页面加载动画，提升用户体验。

实现思路

通常情况下，当用户在 Web 网站进行页面跳转时，会出现加载等待的情况。我们可以利用 Service Worker 技术，在页面加载过程中，实现自定义加载动画，以提升用户的等待体验。

具体实现流程如下：

1. 注册 Service Worker；
2. 拦截网络请求；
3. 显示加载动画；
4. 等待资源加载完成后，隐藏加载动画。

实现步骤

1. 注册 Service Worker

在 HTML 文件中，注册 Service Worker，并在 install 事件中缓存所需资源。

// javascriptcn.com 代码示例
// 注册 Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

// 在 install 事件中缓存所需资源
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache')
      .then(function(cache) {
        return cache.addAll([
          '/',
          '/index.html',
          '/css/style.css',
          '/js/main.js'
        ]);
      })
  );
});

2. 拦截网络请求

在 fetch 事件中，拦截网络请求，如果 cache 中有请求资源，则直接返回 cache 中的资源。否则，向网络请求资源。

// javascriptcn.com 代码示例
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

3. 显示加载动画

在页面跳转时，显示加载动画。

// 页面跳转时，显示加载动画
$(document).on('click', 'a[href^="http"]', function(event) {
  event.preventDefault();
  $('body').addClass('loading');
  var href = $(this).attr('href');
  history.pushState(null, null, href);
  loadPage(href, true);
});

4. 隐藏加载动画

资源加载完成后，隐藏加载动画。

// javascriptcn.com 代码示例
// 资源加载完成后，隐藏加载动画
$(window).on('popstate', function(event) {
  $('body').addClass('loading');
  var href = location.pathname;
  loadPage(href, false);
});

function loadPage(href, addEntry) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    $('body').removeClass('loading');
    if (addEntry) {
      history.pushState(null, null, href);
    }
    $('main').html(xhr.responseText);
  }
  xhr.onerror = function() {
    $('body').removeClass('loading');
  }
  xhr.open('GET', href);
  xhr.send();
}

总结

利用 Service Worker 技术实现页面加载动画，可以提升用户等待体验，提高网站的用户满意度。需要注意的是，Service Worker 可能会导致缓存问题，需要及时更新缓存，以获取最新数据。

示例代码

完整的示例代码可以在 https://github.com/example/pwa-loading-animation 中获取。

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