什么是 oghliner
oghliner 是一个基于 Service Worker 技术的 npm 包，它可以将你的静态网站转化为可离线访问的 Progressive Web App（PWA），并且可以通过 Github Pages 等静态托管服务发布。
安装 oghliner
在终端中输入以下命令来安装 oghliner：
--- ------- -- --------
安装成功后，你可以通过以下命令来检查是否安装成功：
-------- ---------
创建 PWA
接下来，我们将使用 oghliner 来创建一个 PWA。首先，我们需要在你的本地电脑上创建一个静态网站，如果你还没有创建，可以使用以下命令来生成一个简单的静态网站：
--- ---------------- ------
运行成功后，进入 my-app 目录，并将项目打包：
-- ------ --- --- -----
在生成的 /build 文件夹中，我们可以看到我们的静态网站。
接下来，我们运行以下命令来创建 PWA：
-------- ----
然后按照提示，将生成的 manifest.json 文件和一些图标文件放到 /public 文件夹中。此时，我们需要在 index.html 文件中添加以下代码：
---- - ---- ----- ---- -- ---
----- -------------- --------------------------------- --
---- - ---- ------- ---
--------
-- ---------------- -- ---------- -
------------------------------- ---------- -
-------------------------------------------------------
---
-
---------这段代码将会在浏览器中启动 Service Worker，从而让我们的静态网站变成一个 PWA。
接下来，运行一下命令即可发布你的 PWA：
-------- -------
总结
oghliner 是一款非常实用的 npm 包，它可以帮助你将你的静态网站转化为 PWA，并且提供了非常方便的发布方式。如果你在开发 PWA 过程中遇到了问题，或者希望获得更多的信息，强烈建议阅读官方文档或者参考 Github 上的相关资源。
示例代码
manifest.json 文件：
-
------------- --- -----
------- --- -----
-------- -
-
------ --------------
------- ------------
-------- ---------
--
-
------ --------------
------- ------------
-------- ---------
-
--
------------ ----
---------- -------------
-------------- ----------
------------------- ---------
-index.html 文件：
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ---------------- ----------------- --
----- ------------------ ----------------- --
----- -------------- --------------------------------- --
----- ------------- ----- ------------------------------- --
--------- -----------
-------
------
------------- ---- -- ------ ---------- -- --- ---- ---------------
---- ----------------
--------
-- ---------------- -- ---------- -
------------------------------- ---------- -
-------------------------------------------------------
---
-
---------
-------
-------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066faf3d1de16d83a67310