AMP 和 PWA 技术的混合开发实践-FunTeaLearn Online Web Tutorials

在现代的Web开发中，AMP（加速移动页面）和PWA（渐进式Web应用）已经成为了广泛使用的技术，它们分别针对不同的需求进行了优化。然而，一些特殊场景中，同时使用两者的需求也逐渐增多。在本文中，我们将介绍如何将AMP和PWA技术进行混合开发，以满足这些特殊场景的需求。

什么是AMP技术？

AMP技术是由Google发起的一项开源技术，旨在提供一个快速、简洁和流畅的移动页面体验。AMP通过对HTML、CSS和JavaScript进行限制和优化，来保证页面的快速加载和交互体验。此外，AMP还支持缓存、预渲染、结构化数据等特性，可以有效提高页面的用户体验和SEO效果。

什么是PWA技术？

PWA技术是由Google在2015年提出的，它的目的是提供Web应用程序的原生体验。通过使用一系列新的Web API，PWA可以实现离线缓存、推送通知、桌面应用等功能，让Web应用程序的体验与原生应用程序无异。同时，PWA还具有像优秀的SEO效果、安全性、低成本维护等优势。

为什么需要混合使用AMP和PWA？

虽然AMP和PWA都可以对Web应用程序的性能和体验进行优化，但由于它们的针对不同的方面，可能在某些场景下仅仅使用其中一者无法完全满足业务需求。例如，在搜索引擎优化方面，则需要使用AMP，同时需要在用户体验和功能方面又需要PWA；或者，如果一个页面需要在移动端快速展示且保证即使离线也有基本的交互，那么就会需要同时使用AMP和PWA。

AMP和PWA混合开发实践

步骤一：创建AMP页面

我们首先创建一个AMP页面，AMP使用了特定的HTML标签和JavaScript库，需要在head区域引入AMP库文件。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <title>AMP PWA混合开发</title>
  <link rel="canonical" href="https://example.com/">
  
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  
  <style amp-custom>
    /* Add your styles here */
  </style>
  
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
</head>
<body>
  <amp-carousel width="400" height="300" layout="responsive" autoplay>
    <amp-img src="https://amp.dev/static/samples/img/landscape_photography_1.jpg" width="400" height="300" layout="responsive"></amp-img>
    <amp-img src="https://amp.dev/static/samples/img/landscape_photography_2.jpg" width="400" height="300" layout="responsive"></amp-img>
    <amp-img src="https://amp.dev/static/samples/img/landscape_photography_3.jpg" width="400" height="300" layout="responsive"></amp-img>
  </amp-carousel>
</body>
</html>

上面的示例中，我们创建了一个简单的AMP页面，其中使用了amp-carousel组件展示了一组图片。在这里我们只使用了少量的HTML和CSS，保证了页面的快速加载和流畅性。

步骤二：添加PWA特性

我们的下一步是添加PWA的特性，包括缓存和离线使用。要做到这点，我们可以使用Service Worker技术来实现PWA。Service Worker是一种JavaScript脚本，可以完全控制Web应用程序的网络请求和响应，从而实现离线缓存和推送通知等功能。

// www.javascriptcn.com code example
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js', { scope: '/' }).then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

上述代码中，我们在页面的底部添加了Service Worker注册脚本。在Service Worker脚本中，我们可以完全控制Web应用程序的网络请求和响应，实现离线缓存和推送通知等功能。

// www.javascriptcn.com code example
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js',
  'https://cdn.ampproject.org/v0.js',
  'https://cdn.ampproject.org/v0/amp-carousel-0.1.js',
  'https://amp.dev/static/samples/img/landscape_photography_1.jpg',
  'https://amp.dev/static/samples/img/landscape_photography_2.jpg',
  'https://amp.dev/static/samples/img/landscape_photography_3.jpg'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // IMPORTANT: Clone the request. A request is a stream and
        // can only be consumed once. Since we are consuming this
        // once by cache and once by the browser for fetch, we need
        // to clone the response.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

在Service Worker注册脚本中，我们实现了一个名为CACHE_NAME的缓存版本号，并且缓存了当前页面的一些静态资源、AMP库文件和展示图片。当页面脱离网络时，Service Worker会使用缓存中的文件来展示页面，维持了基本的交互性。

步骤三：检查PWA功能是否可用

最后，我们需要检查PWA的特性是否可用，和展示PWA功能的一些交互。我们可以使用Chrome DevTools的Applications标签来检查Service Worker是否成功注册，以及缓存中的内容。

现在，我们可以开始测试混合开发的效果了。可以在设备上或者Chrome上尝试，先使用在线状态下打开网站，然后在离线状态下访问相同的网站。当前我们便可以看到，AMP组件可以流畅的显示，PWA部分能够在离线缓存以及显示默认资源的情况下正确展示页面。

结论

AMP和PWA是两项非常有用的Web技术，在许多场景下提供了非常好的体验和性能。随着Web应用程序的不断发展，一些场景中需要同时使用这两者，在本篇文章中，我们讲解了如何实现AMP和PWA混合开发，为我们日常开发中提供了一个有用的技术参考。衷心希望这篇文章对你有所帮助！

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/66fa4ffc55ba6e87058a8ee1

AMP 和 PWA 技术的混合开发实践