PWA release (optional)

REMARKS

• PWA and service workers are advanced topics
• We will not discuss the theory behind these techniques in detail
• This chapter will only give a brief introduction, and we will try to explain the underlying principles by showing you a practical example of a PWA

What is a PWA?

• A Progressive Web App (aka PWA) is a Web App which combines the best features of the Web and Native Apps
• PWA's cache the content of the website locally, so they are fully accessible even when you lost your internet connection
• PWA's are also installable on mobile devices and on desktop devices (with Chromium-based browsers)

WATCHING TIP

All you need to know about PWA (Progressive Web Apps) (opens new window)

PWA vs native apps

FEATURE	PWA	NATIVE APP
Functions offline
Accessible from the home screen
No download required
Bypass the App/Play store
One codebase
Requires no updates
Push notifications
Device integrated API's	limited access (opens new window)	full access

WATCHING TIP

PWA vs native app | Do we even need native apps? (opens new window)

PWA requirements

• To make the website installable as a PWA, you need:
  • A web manifest file (the realfavicon script already made this for us) with the correct fields (opens new window)
  • The website must be served from a secure (https) connection (http://localhost is also possible)
  • Must have an icon to represent the app on the device (is present in the manifest file)
  • A service worker to allow the app to work offline
• Only the service worker is missing to transform our "normal" (production release) website into a PWA

Add To Home Screen (A2HS)

For mobile

• Mobile browsers implemented an Add To Home Screen (aka A2HS) feature that takes the information from the app's web manifest file
• This only works if the app meets all the necessary requirements, as described above
• The Add to home screen pops up automatically when you stay for at least 30 seconds on the page
  • Open this course website (or scan the QR code (opens new window)) on your mobile device and look what happens after 30 seconds ...

• If you canceled the installation, you only get a new pop-up after 90 days!
• But no worry, you can always install the app from the menu (the dree dots) in the top right corner of your mobile browser

For Desktop

• On your Chromium-based desktop browser there is no pop-up to install the app
• You will find an "install" icon at the right in the address bar
  
  • Go to chrome://apps to uninstall the app

What is a service worker?

• As indicated in the requirements, the only thing missing is a service worker, but what does a service worker do?
• A service worker is written in JavaScript but works independently of the main browser thread
• The service worker is a proxy that lives between your website and the operating system
• The main purposes of the service worker are:
  • synchronize data in the background
  • intercept network requests and receive updates
  • receive push notifications

How do PWA's work?

How it works in theory

1. The browser checks (in the background) if the service worker has been updated
2. An update is available?
   • no: stop here and serve the cached version of the website
   • yes: start with serving the cached version of the website but also download the new service worker in the background; after the new service worker is ready for installation, go to step 3
3. Show a notification inside the browser that there's a new service worker ready to be installed
   • user doesn't accept the notification: the update will be installed after the user closes the browser window and starts it up again
   • user accepts the notification: go to stap 4
4. The new, updated service worker gets installed and after that the page is reloaded

Example

• Let's show this in a real live example and take this course website as a starting point
• Open this site in another browser (so that you can read the rest of this page)
• Open the homepage (opens new window) in Chrome
• Open DevTools in Chrome, and go to the Application tab to remove the already running service worker:
  • Remove the cached files from the Cache Storage
    
  • Unregister the service worker from the Service Workers
    
• Reload the page
  • The first time you open a PWA, the service worker is installed automatically and starts caching (downloading) ALL the files from the website and store them in the Cache Storage
• Go offline, reload the homepage and browse to a different page on the website to see how the caching works
  
• Go back online
• Wait until your teacher changed something on the homepage and pushed it to GitHub
• Reload the homepage
  • We are now at step 2 in the illustration of the previous section
  • The new service worker (with the orange dot) is available for installation, and the user gets a notification to install it
• Click on Refresh
  • The service worker will be installed (step 3) and the page is reloaded (step 4)
  • All the changed files are cached again in the background
    

Install the service worker with Gulp

• We only have to add two extra tasks to the previous build task to install a service worker
• Our new build script build:pwa (line 1) will look like this:

gulp.task('build:pwa', gulp.series('clean', 'copy', 'generate-favicon', 'inject-favicon-markup', , 'concatSW', 'service-worker', 'minify'));
gulp.task('build', gulp.series('clean', 'copy', 'generate-favicon', 'inject-favicon-markup', 'minify'));

• Package used: gulp-concat (opens new window)
• This task appends the file dist/js/serviceWorker/serviceWorker.js to the end of the file dist/js/app.js

const concat = require('gulp-concat');
...
// Concat sw script to app.js
gulp.task('concatSW', () => {
    return gulp
    .src(['./dist/js/app.js', './dist/js/serviceWorker/serviceWorker.js'])
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./dist/js'));
});

• dist/js/app.js before concatenation

import './prism.js';
import './prism-file-highlight.min.js';

import TmkFooter from './components/FooterComponent.js';
import TmkNavbar from './components/NavComponent.js';
import TmkTabs from './components/TabComponent.js';

import Highlight from './modules/highlight.js';

• dist/js/app.js after concatenation
  • Line 20: we use a standard confirmation box here, but you can replace it with a layered version (e.g. Bootstrap) if you wish

import './prism.js';
import './prism-file-highlight.min.js';

import TmkFooter from './components/FooterComponent.js';
import TmkNavbar from './components/NavComponent.js';
import TmkTabs from './components/TabComponent.js';

import Highlight from './modules/highlight.js';

// Check that service workers are supported
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/sw.js')
        .then((registration) => {
            console.log(`Service Worker registered! Scope: ${registration.scope}`);
            // ...
            if (updating && serviceWorker.state === 'activated') {
                // We use a standard confirmation box here, but you can replace it with a layered version if you wish
                const reload = confirm('This site have been updated, reload the browser?');
                if (reload) {
                    window.location.reload();
                }
            }
        })
        .catch((err) => {
            console.log(`Service Worker registration failed: ${err}`);
        });
    });
}

• Package used: workbox-build (opens new window)
• Line 7: create a new document dist/sw.js
• Line 8: indicate which files wil be pre-cached (cached immediately without you having to visit the page first) by the service worker
  • Unlike the service worker for our course, we are not going to pre-cache the images here
• Line 13: images are not pre-cached, but are only cached when the user first visit a page with an image
• Line 24: only the last 20 visited images are cached

const workboxBuild = require('workbox-build');
...
// Build service worker logic
gulp.task('service-worker', () => {
    return workboxBuild.generateSW({
        globDirectory: './dist',
        swDest: './dist/sw.js',
        globPatterns: ['**/*.{html,json,js,css}'],
        // Define runtime caching rules.
        runtimeCaching: [
            {
                // Match any request that ends with .png, .jpg, .jpeg, gif or .svg.
                urlPattern: /\.(?:png|jpg|jpeg|gif|svg)$/,

                // Apply a cache-first strategy.
                handler: 'CacheFirst',

                options: {
                    // Use a custom cache name.
                    cacheName: 'images',

                    // Only cache 20 images.
                    expiration: {
                        maxEntries: 20,
                    },
                },
            },
        ],
    });
});

• Open dist/sw.js and reformat the minified code with CTRL + ALT + L
• Line 7: e.precacheAndRoute[] contains all the URL's to the files which have to be pre-cached
  The revision only changed when the content of the file has changed

...
define("./sw.js", ["./workbox-61532933"], (function(e) {
    "use strict";
    self.addEventListener("message", (e => {
        e.data && "SKIP_WAITING" === e.data.type && self.skipWaiting();
    })), e.precacheAndRoute([{
        url: "assets/icons/faviconData.json",
        revision: "d3bf73a55b952522b97884da141fe277"
    }, {
        url: "assets/icons/html_code.html",
        revision: "f6f63d351924ad546547b6e48681e7bb"
    }, ...
    ], {}), 
    e.registerRoute(/\.(?:png|jpg|jpeg|svg)$/, new e.CacheFirst({
        cacheName: "images",
        plugins: [new e.ExpirationPlugin({ maxEntries: 20, purgeOnQuotaError: !0 })]
}), "GET");

TIPS

• You can make the service-worker task a lot smaller by pre-caching all the files from your website (like we do in this course)
  • The disadvantage is that it takes up more memory on your (mobile) device

// Build service worker logic
gulp.task('service-worker', () => {
    return workboxBuild.generateSW({
        globDirectory: './dist',
        swDest: './dist/sw.js',
        globPatterns: ['**/*.*']
});

• To integrate this service worker into your own project, you only have to copy the two Gulp tasks and the file src/js/serviceWorker/serviceWorker.js

Hosting

• Let's update our hosting again
• Every time (except the first time) you publish a new version on your hosting, you get a conform notification that there is a new version available
• When you only visited the homepage, the tree images on this page are cached
  

FTP hosting

• Run the build task build:pwa every time want to publish a new version of your PWA
• Delete all content inside the root folder of your hosting
• Upload the content of the dist folder (not the content of the src folder!) to the root of your hosting

Netlify hosting

• Go to your website settings on Netlify and update the build settings:
  • Replace the Build command with gulp build:pwa or with npm run build:pwa
    
• Every time you push a modified version of your website to GitHub, Netlify will automatically pick this up and publish the updated PWA version on your hosting

Lighthouse report

• Let's perform a new audit to see how our PWA scores this time
  

READING TIPS

• Progressive Web Apps in 2021 (opens new window)
• PWA wiki (opens new window)
• PWA builder.com (opens new window)

WATCHING TIPS

• PWA full video playlist (opens new window)
• Service Worker Full video playlist (opens new window)