EasyPWA: Make a PWA easily with only 1 file

I made a NPM package that allows you to make a PWA inside the browser.

So, like you could insert this into your HTML file:

<script src="https://cdn.jsdelivr.net/npm/@aboutdavid/easypwa@1.0.0/dist/bundle.min.js"></script>
<script>
var pwa = window.easypwa.init();
window.easypwa.inject(pwa, "/path/to/your/service-worker.js");
</script>

and have a PWA! However, you do want to customize it so It does not look generic so you might want to look at the MDN Docs for all of the available fields. To change a Field, you can do pwa.field_you_want_to_change. For example to change the description field, you could just do:

pwa.description = "New description"

and the description has been changed!

Icons are a bit trickier, so I made the PWAIcon() function. So you pass it a URL, the size of the icon, and the file extension and like magic, it returns a valid image object!

  window.easypwa.icon(
    "https://cdn.glitch.com/70c8cfd0-7862-4692-9b6c-db66f49269bf%2Fandroid-chrome-192x192.png?v=1606418327912",
    "192x192",
    "png"
  ) // {"src":"https://cdn.glitch.com/70c8cfd0-7862-4692-9b6c-db66f49269bf%2Fandroid-chrome-192x192.png?v=1606418327912","sizes":"192x192","type":"image/png"}

which you can use for your icons field:

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

Glitch Project: Glitch :・゚✧
NPM package: @aboutdavid/easypwa - npm

4 Likes

At this rate, you can make anything you want by typing three characters into the command line with aboutdavid’s projects.

3 Likes

@aboutDavid please make a Glitch collection of all the blogs you ever made. :wink:

2 Likes

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.