@aboutdavid/easypwa 中文文档教程

Question

EasyPWA

---

EasyPWA 让你轻松创建 PWA。 就像你所要做的就是添加：

var pwa = window.PWAinit();
window.easyPWA.inject(pwa, "/sw.js");

并将文件从 easypwa/sw.js 复制到你的服务器正在运行的文件夹中，并且你有一个 PWA。 当然，它具有默认品牌，但您可以更改这些值。 例如，要更改名称，只需修改“name”和“short_name”属性：

var pwa = window.easyPWA.init();
pwa.name = "Hello World";
pwa.short_name = "Hello World";
window.easyPWA.inject(pwa, "/sw.js");

要查看您可以配置的所有选项，请参阅 Web 应用程序清单上的 MDN 文档

Upgrading from v1 to v2:

v2 和更高版本中有一些 API/代码更改，使开发人员更容易使用它制作应用程序，并修复了一些浏览器上的一些问题。 因此，代码在 v2+ 上更加稳定

Installation:

npm install easypwa

Requiring the module:

<script src="/path/to/easypwa.js"></script>

API:

init()：返回一个带有示例清单对象的 JSON 对象。 通常用于初始化 PWA。 用法：

window.easyPWA.init();

示例：

var pwa = window.easyPWA.init();

icon(url, size, ext)：用于为清单的“图标”字段生成 JSON 对象。 url 是图标的 URL，size 是大小（widthxheigh）。

用法：

  window.easyPWA.icon(
    "url",
    "widthxheight",
    "png" // or file extention
  ) // {src: "url", sizes: "widthxheight", type: "image/png"}

示例：

pwa.icons = [
  window.easyPWA.icon(
    "https://cdn.glitch.com/70c8cfd0-7862-4692-9b6c-db66f49269bf%2Fandroid-chrome-192x192.png?v=1606418327912",
    "192x192",
    "png"
  )
];

inject()：这是注入/注册脚本以使 PWA 真正工作的函数。 用法：

window.easyPWA.inject(pwaObject, "/path/to/service-worker.js");

示例：

var pwa = window.easyPWA.init();
window.easyPWA.inject(pwa, "/sw.js");

Example:

示例位于index.html