Folo推送通知：Expo Notifications集成实践

你是否曾因错过重要信息而困扰？在信息爆炸的时代，及时获取关键内容变得尤为重要。Folo作为下一代信息浏览器，通过集成Expo Notifications实现了高效的推送通知功能，让你不再错过任何重要更新。本文将详细介绍Folo中Expo Notifications的集成实践，帮助你了解如何在移动应用中实现可靠的推送通知系统。

项目依赖与配置

Folo移动应用基于Expo构建，其通知功能主要依赖expo-notifications库。在项目的package.json中可以看到相关依赖配置：

{
  "dependencies": {
    "expo-notifications": "0.31.3",
    "@react-native-firebase/messaging": "22.2.1",
    "expo-device": "7.1.4",
    "expo-application": "6.1.4"
  }
}

apps/mobile/package.json

这些依赖库分别提供了通知管理、Firebase云消息传递、设备信息获取等核心功能，为Folo的推送通知系统提供了坚实的基础。

通知功能模块结构

Folo的通知功能分散在多个模块中，主要包括通知图标、设置界面和视图组件等。

通知图标

通知功能使用了专门的图标组件，位于notification_cute_re.tsx文件中：

export const NotificationCuteReIcon = ({
  width = 24,
  height = 24,
  color = "#10161F",
}: NotificationCuteReIconProps) => {
  return (
    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
      <Path
        d="M11.204 2.043A7.587 7.587 0 0 0 5.993 5.02a7.874 7.874 0 0 0-1.239 2.554c-.19.731-.201.862-.235 2.766-.042 2.377-.053 2.432-.738 3.86-.433.9-.485 1.043-.521 1.422-.037.388.031.738.219 1.131.273.567.743.965 1.382 1.169.111.035.628.058 1.712.074l1.553.024.094.268a4.044 4.044 0 0 0 1.94 2.248c.451.231.77.335 1.235.406.484.072.726.072 1.21 0a4.015 4.015 0 0 0 3.175-2.654l.094-.268 1.553-.024c1.084-.016 1.601-.039 1.712-.074.639-.204 1.109-.602 1.382-1.169.188-.393.256-.743.219-1.131-.036-.376-.088-.517-.522-1.422-.682-1.423-.7-1.516-.739-3.88-.032-1.886-.043-2.013-.233-2.746-.228-.88-.709-1.854-1.3-2.633-.318-.42-1.004-1.104-1.406-1.402-1.008-.747-2.088-1.219-3.26-1.423-.536-.093-1.574-.13-2.076-.073m1.576 2.016c1.99.289 3.716 1.689 4.379 3.551.294.828.323 1.076.359 3.11.034 1.894.048 2.041.267 2.808.136.477.326.936.677 1.636.164.327.298.621.298.653 0 .031-.028.086-.063.12-.056.057-.719.063-6.697.063s-6.641-.006-6.697-.063c-.035-.034-.063-.089-.063-.12 0-.032.134-.326.298-.653.351-.7.541-1.159.677-1.636.219-.767.233-.914.267-2.808.017-.99.051-1.895.077-2.04.219-1.253.688-2.169 1.559-3.043.731-.734 1.463-1.166 2.442-1.442a5.559 5.559 0 0 1 2.22-.136m.94 13.982c0 .022-.13.173-.29.335-.309.313-.566.467-.938.564a2.073 2.073 0 0 1-1.423-.165c-.2-.101-.789-.649-.789-.734 0-.027.578-.041 1.72-.041s1.72.014 1.72.041"
        fill={color}
        fillRule="evenodd"
      />
    </Svg>
  )
}

apps/mobile/src/icons/notification_cute_re.tsx

这个SVG图标用于在应用中展示通知相关的UI元素，其设计风格与Folo的整体UI保持一致。

通知视图定义

在views.tsx文件中，Folo定义了通知视图的相关配置：

[FeedViewType.Notifications]: {
  icon: AnnouncementCuteFiIcon,
}

apps/mobile/src/constants/views.tsx

这段代码将通知视图与对应的图标关联起来，确保在应用的视图切换中能够正确显示通知相关的界面元素。

通知设置界面

Folo提供了专门的通知设置界面，位于Notifications.tsx文件中：

export const NotificationsScreen = () => {
  return (
    <View className="flex-1 items-center justify-center">
      <Text>Notifications Settings</Text>
    </View>
  )
}

apps/mobile/src/modules/settings/routes/Notifications.tsx

虽然目前这个界面还比较简单，但它为用户提供了一个集中管理通知设置的入口。

通知功能实现

Folo的通知功能不仅包括UI展示，还涉及到通知的触发和处理。在summary.tsx文件中，我们可以看到通知相关的交互逻辑：

Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)

apps/mobile/src/modules/ai/summary.tsx

这段代码在AI总结功能完成时触发触觉反馈，虽然不是传统意义上的推送通知，但它展示了Folo如何使用系统通知机制来增强用户体验。

在EntryNormalItem.tsx中，我们可以看到通知视图的渲染逻辑：

view === FeedViewType.Notifications ? "p-2" : "p-4",
view === FeedViewType.Notifications ? "top-[35]" : "top-[43]",
<FeedIcon fallback feed={feed} size={view === FeedViewType.Notifications ? 14 : 16} />
view === FeedViewType.Notifications ? "text-base" : "text-lg",
{view !== FeedViewType.Notifications && !!entry.description && (
{view !== FeedViewType.Notifications && <ThumbnailImage entryId={entryId} />}

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

这些代码展示了Folo如何根据不同的视图类型（包括通知视图）来调整UI元素的样式和布局，确保通知内容以最佳方式呈现给用户。

总结与展望

Folo通过集成Expo Notifications和Firebase Messaging，构建了一个功能完善的推送通知系统。从依赖配置到UI实现，再到交互逻辑，Folo的通知功能体现了现代移动应用开发的最佳实践。

目前，通知设置界面还比较简单，未来可以考虑添加更多自定义选项，如通知类型过滤、通知声音设置等。此外，还可以进一步优化通知的展示方式，提供更丰富的交互体验。

希望本文能够帮助你了解Folo中推送通知功能的实现细节，如果你有任何问题或建议，欢迎通过社区渠道与我们交流。别忘了点赞、收藏本文，关注Folo项目获取更多更新！

下一期，我们将介绍Folo中的AI摘要功能，敬请期待！