基于 Headless CMS 的 PWA 应用开发实践-JavaScript中文网-JavaScript教程资源分享门户

前言

在互联网时代，数据和内容已成为业务流程的核心组成部分。因此，如何管理、发布和分发这些数据和内容，成为企业所面临的重要问题。而 Headless CMS 技术方案的出现，则是针对传统 CMS 在数据管理和流程上的不足做出的优化，为企业提供更高效、更灵活的数据管理方案。

与此同时，PWA（Progressive Web App）技术则是移动互联网时代的必然选择，它不仅可以将 Web 应用转化为本地操作体验，而且具有成本低，易于维护和更新等特点。本文将介绍如何结合这两种技术实现 PWA 应用的开发。

前端技术选型

PWA 应用最核心的技术是 Service Worker，它让网站在离线时仍能正常访问、缓存页面以及减少对服务器的请求等功能。而实现 Service Worker 首先需要 web workers 和 promises 这两个技术的支持。

因此，我们选择 React、Redux、Webpack 等技术作为前端开发的基础，以及使用 Workbox 等工具来快速完成 Service Worker 的开发。

Headless CMS 技术选型

Headless CMS 方案有很多，但在选择时我们要根据实际需求进行挑选，比如是否具有 API 接口、是否易于扩展、是否支持多设备访问等等。

在本文中，我们选择具有以下特点的 Contentful 作为 Headless CMS 方案：

内容管理面板简洁易用，支持自定义字段，可快速上手；
具备良好的 API 接口，支持快速扩展和自动化部署；
可以自定义 Webhooks，在内容更新时自动触发更新操作；
支持 CDN 加速，支持大量数据的快速读取。

实战演练

项目准备

首先，我们需要创建一个新的 React 项目，并引入必要的依赖包。

npx create-react-app my-app
cd my-app

npm install --save contentful contentful-management bootstrap react-router-dom @reduxjs/toolkit redux react-redux redux-thunk axios workbox-webpack-plugin

创建 Contentful 模型

在 Contentful 中创建模型，定义数据结构，完成模型的保存，将模型 ID 保存到项目代码中。模型创建完成后，我们可以在 Contentful 管理面板中创建和编辑数据。

构建 React 模板

构建 React 页面时，我们需要先定义简单的路由和基本的页面结构，然后再引入 Contentful 数据。

// javascriptcn.com 代码示例
import React from 'react';
import { Link } from 'react-router-dom';
import { Jumbotron, Container, Row, Col, Image, Button } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import { fetchEntries } from '../store/blogReducer';

function Home() {
  const dispatch = useDispatch();
  const { entries, loading, error } = useSelector((state) => state.blog);

  React.useEffect(() => {
    dispatch(fetchEntries());
  }, [dispatch]);

  return (
    <>
      <Jumbotron className="hero" fluid>
        <Container>
          <h1>Hello, world!</h1>
          <p>
            This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or
            information.
          </p>
          <p>
            <Button variant="danger">Learn more</Button>
          </p>
        </Container>
      </Jumbotron>
      <Container>
        <Row>
          <Col md={9}>
            {loading ? (
              <p>Loading...</p>
            ) : error ? (
              <p>{error}</p>
            ) : (
              entries.map((entry) => (
                <div key={entry.sys.id}>
                  <h2>
                    <Link to={`/blog/${entry.sys.id}`}>{entry.fields.title}</Link>
                  </h2>
                  <p>{entry.fields.excerpt}</p>
                  <p>
                    <Link to={`/blog/${entry.sys.id}`}>Read More</Link>
                  </p>
                </div>
              ))
            )}
          </Col>
          <Col md={3}>
            <Image src="https://www.fillmurray.com/300/300" fluid />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Home;

构建 Redux Store

在 aync/await Promise 支持后，使用 Redux 已经变得非常简单，我们只需要定义好 store 状态即可，然后通过简单的 dispacth action 即可进行数据的查询和修改。

// javascriptcn.com 代码示例
import { createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
  entries: [],
  loading: false,
  error: null,
};

const blogSlice = createSlice({
  name: 'blog',
  initialState,
  reducers: {
    fetchEntriesStart(state, { payload }) {
      state.loading = true;
    },
    fetchEntriesSuccess(state, { payload }) {
      state.entries = payload;
      state.error = null;
      state.loading = false;
    },
    fetchEntriesFailure(state, { payload }) {
      state.loading = false;
      state.error = payload;
    },
  },
});

export const fetchEntries = () => async (dispatch) => {
  dispatch(blogSlice.actions.fetchEntriesStart());

  try {
    const { data } = await axios.get(`https://cdn.contentful.com/spaces/${process.env.REACT_APP_SPACE}/environments/master/entries?access_token=${process.env.REACT_APP_CONTENTFUL_API}`);

    dispatch(blogSlice.actions.fetchEntriesSuccess(data.items));
  } catch (e) {
    dispatch(blogSlice.actions.fetchEntriesFailure(e.message));
  }
};

export default blogSlice.reducer;

Service Worker 实现

使用 Workbox，可以简单地启用 Service Worker，实现本地缓存和实时更新功能。我们只需要设置好要缓存的 URL 路径，并通过 webpack 插件生成各种 Service Worker 缓存和更新逻辑的文件，然后将其置于 Public 目录下，就可以自由地享用 PWA 的各种特性了。

// javascriptcn.com 代码示例
const SW_TEMPLATE_PATH = path.resolve(__dirname, 'public', 'sw.tmpl.js');
const SW_FILE_PATH = path.resolve(__dirname, 'public', 'sw.js');

const swPlugins = [
  new GenerateSW({
    swDest: SW_FILE_PATH,
    clientsClaim: true,
    skipWaiting: true,
    templatedUrls: {
      [`/public/index.html`]: SW_TEMPLATE_PATH,
    },
    runtimeCaching: [
      {
        urlPattern: new RegExp('^https://cdn\\.contentful\\.com'),
        handler: 'StaleWhileRevalidate',
      },
      {
        urlPattern: new RegExp('^https://images\\.contentful\\.com'),
        handler: 'StaleWhileRevalidate',
      },
    ],
  }),
];

总结

本文介绍了如何基于 Headless CMS 和 PWA 技术实现 Web 应用的开发流程。我们选择了 Contentful 作为 Headless CMS 方案，并使用 React、Redux、Webpack 和 Workbox 等技术进行开发，最终实现了一个快速响应、离线访问等 PWA 特性的 Web 应用。

以上技术的组合，不仅可以优化数据处理和管理流程，同时还可以提高应用的响应速度和用户体验，可以广泛应用于不同的领域，照片、视频、社交媒体，甚至是增强现实和 VR/AR 领域，都可以得到极大提升。

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