Progressive Web App

Last Updated: 2022-02-06

Lighthouse(Chrome extension):

• https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en
• source code: https://github.com/GoogleChrome/lighthouse

The progressive web apps concept, the product of a joint effort between Google and Mozilla, is about enabling development of browser-based apps that offer a superior, native-like experience.

Register A Service Worker

To register /sw.js as the service worker, add this code snippet to your page:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker
      .register('/sw.js')
      .then(function (registration) {
        // Registration was successful
        console.log(
          'ServiceWorker registration successful with scope: ',
          registration.scope
        );
      })
      .catch(function (err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
      });
  });
}

navigator is the global variable representing your web browser. If serviceWorker is in navigator, the browser supports service worker.

Manifest Validator

https://manifest-validator.appspot.com/

Deprecation

• Application Cache has been deprecated by Service Workers. Consider implementing an offline solution using the Cache Storage API.
• Web SQL is deprecated. Consider using IndexedDB instead.