PWA Easy

This project is a MIT licensed template for creating a multi-language PWA without the complications of a packager, transpiler and whatnot.

You'll need to get updated on the following frameworks/technologies, because this template depends on them:

• Modern JavaScript (ECMAScript 2020+)
• VueJS
• Vuetify

Requirements

• The willpower
• A recent version of Chrome, Edge, Firefox or Safari (mid 2020+)
• A *nix shell

Be aware that as of July 2020, PWAs have various limitations on iOS.

Skeleton of the template

The following are folders and files that contain the main logic of the application:

PWA Easy\app
├───components  -> the VueJS components of the app
├───config      -> global settings
├───controllers -> VueJS controllers for the views
├───external    -> external resources and libraries
├───img         -> image resources
├───lang        -> language resources
├───utils       -> utilities used by the app
├───views       -> views written in HTML + VueJS template
└───index.html  -> entry point of the app

A Service Worker, app\service-worker.js, contains the necessary logic for serving the app offline. Workbox is used to abstract and simplify its logic.

Getting started

There are a couple of demonstrative pages pre-made for you to play with. The source code is generally verbose to make it easier to learn by examination and experimentation.

You'll need to serve the project from localhost or a https site, as per PWA requirements. To enable SPA navigation the user has to first visit the root directory at least once, or you can deploy a rewrite rule on the web server.

Sample server configuration files are provided:

• For Apache: app\.htaccess
• For NGINX: nginx.conf

The entire app (except for app\service-worker.js) makes heavy usage of JavaScript modules and a bunch of APIs that form a core part of 2020+ web browsers.

Deploying the PWA

After personalizing the template you'll need to generate a bundle for the project, which is achieved by executing the scripts\generate-precache-bundle.sh script (should work on any *nix shell, tested only on Ubuntu 20.04). This generates a series of files in the app\bundle directory that are required by app\service-worker.js.

Please note that it is not required to make any modification to the template if you only want to test it, just do not forget to generate a bundle first!

Of the files in the app directory, only index.html and service-worker.js are required. You can safely skip all the other files when uploading the app to a web server. Note that it is not the case with the folders in the app directory.

Various

• A personal web page of mine made with PWA Easy is running here.
• The size of the base PWA, bundled, is a bit more than 2 MiB. This includes the OpenMoji font.

Libraries and frameworks used (kudos to 'em!)

JavaScript ES modules

• VueJS
• Vue I18n
• Vue Router
• Vuetify
  • Wrapped as an ES module
• fetch-interceptor
  • Improved and rewritten as an ES module
• Progressbar
  • Modified and rewritten as an ES Module

JavaScript globalThis modules

• Mime
  • Rewritten as single file class
• fflate
• Workbox
• Conflux
  • Only a slightly modified reader is used

Non JavaScript

• OpenMoji font
• Font Awesome
• Roboto font

Helpful links

• PWA
• SPA
• Service Workers
• JavaScript Modules
• Fetch API
• ECMAScript® 2020 Language Specification