如果你正在开发 Progressive Web App (PWA)，那么你一定知道托管它的重要性。Firebase 提供了一种无缝托管 PWA 的方式，同时还提供了多种其他功能，比如即时通讯、数据库、认证、分析等。本教程将带你一步一步学习如何使用 Firebase 托管你的 PWA。
创建 Firebase 项目
首先你需要在 Firebase 中创建一个项目。打开 Firebase 控制台 并点击“添加项目”按钮。在弹出的对话框中填写相关信息，比如项目名称和国家/地区，然后点击“创建项目”按钮。
配置 Firebase
在创建完项目后，你需要配置 Firebase 以托管 PWA。首先打开 Firebase 控制台中的“设置”页面，在“常规”标签下找到“Web 应用”部分，然后点击添加 Web 应用按钮。
在弹出的对话框中填写相关信息，比如应用名称和 Firebase 应用 ID，选择“注册应用”按钮。接下来按照提示添加 Firebase SDK 到你的应用中。
集成 Firebase Hosting
Firebase Hosting 是一种将应用程序部署到全球 CDN 上的托管服务。要使用 Firebase Hosting，你需要在 Firebase 控制台中启用 Hosting 服务。在 Firebase 控制台中的“设置”页面中找到“Hosting”标签，然后点击“开始”按钮，按照提示启用 Hosting 服务。
接下来，使用 Firebase CLI（命令行界面）部署应用程序。如果你还没有安装 Firebase CLI，请参考 Firebase 文档中的安装指南。完成安装后，打开命令行工具，进入你的项目目录并输入以下命令：
firebase init
这个命令将提示你一系列问题，以配置 Firebase CLI。根据提示选择 Hosting 服务，并在最后选择“启用单页应用”选项。
接下来输入以下命令，将应用程序部署到 Firebase Hosting：
firebase deploy
这个命令将上传你的应用程序到 Firebase Hosting，并自动分配一个 *.firebaseapp.com 子域名。你可以访问这个子域名来查看你的应用程序是否成功托管。
安装 PWA
现在你的应用程序已经托管成功，接下来你需要将其转换为 PWA，以便用户可以在离线状态下访问它。要将 Web 应用程序转换为 PWA，你需要执行以下步骤之一：
- 提供一个 Web App Manifest，指定应用程序名称、图标、主题颜色等元数据，以便将其添加到设备主屏幕上。
- 提供一个 Service Worker，以便在离线状态下缓存应用程序资源，以便用户可以访问它们。
这里我们将使用 Service Worker。将以下代码添加到你的 HTML 文件中：
-- -------------------- ---- -------
--------
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------
------------------ -- -
-------------------- ------ ------ --------------------
--
------------ -- -
-------------------- ------ ------ -------
---
---
-
---------这个代码将在加载页面时注册 Service Worker，并将其缓存到 /sw.js 文件中。现在你需要为 Service Worker 提供一个缓存策略，以便在离线状态下缓存应用程序资源。将以下代码添加到你的 JavaScript 文件中：
-- -------------------- ---- -------
----- ---------- - ------------------
----- ----------- - -
----
--------------
-----------------
------------------------
--------------------
--
-------------------------------- ----- -- -
----------------
-----------------------
----------- -- -
--------------------
------ --------------------------
--
--
---
------------------------------ ----- -- -
------------------
-----------------------
----------- -- -
------ --------------------------
-------------- -- -
------ -------- -- --------------------
-------------- -- -
------ ------------------------ -----------------
-------- -- -
------ ---------
---
---
---
--
--
---这个代码将在 Service Worker 安装时缓存指定资源，并在离线状态下从缓存中提供对这些资源的访问。
现在你已经成功地将你的应用程序转换为 PWA。在支持 Service Worker 和 Manifest 的浏览器中，你应该能够将应用程序添加到设备主屏幕上，并在离线状态下访问它。可以前往浏览器权限管理器，找到应用出现的位置，然后打开使用权即可看到 PWA 应用。
添加 Firebase 回退函数
Firebase Hosting 支持回退函数，以便在找不到请求资源时返回你的 index.html 文件。这种方法适用于单页应用程序，因为用户访问的每个 URL 都由应用程序动态生成。
要使用 Firebase 回退函数，你需要创建一个 firebase.json 文件，并将以下代码添加到其中：
-- -------------------- ---- -------
-
---------- -
--------- -----------
----------- -
-
--------- -----
----------- -----
-
-
--
------------ -
--------- ------------
-
-这个代码将从 functions 目录中调用一个名为 app 的回退函数。
接下来使用 Firebase CLI 创建一个新的回退函数。在命令行中输入以下命令：
firebase init functions
这将创建一个名为 functions 的目录，并初始化你的回退函数。在 functions/index.js 文件中添加以下代码：
-- -------------------- ---- ------- ----- --------- - ------------------------------ ----- ------- - ------------------- ----- --- - ---------- ------------- ----- ---- -- - ---------------------- - ---------------------- --- ----------- - -------------------------------
这个代码将发送 index.html 文件作为HTTP响应，以回退到请求的 URL。
现在你已经成功地添加了 Firebase 回退函数，如果资源不存在，将回退到 index.html 文件。
结论
使用 Firebase 托管 PWA 可以简化你的部署流程，同时提供更好的性能和用户体验。在本文中，我们介绍了如何在 Firebase 中创建项目并配置 Firebase Hosting，同时还学习了如何将 Web 应用程序转换为 PWA 并添加 Firebase 回退函数。希望这篇文章对你学习 Firebase 托管 PWA 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670ffbd95f5512810268972e