mdinfotech.net  



Progressive Web Apps. Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.

  1. Why Native Apps Are Doomed
  2. Task: Use this tutorial to turn your Web Modernization Project into a simple offline PWA: Getting-started-with-progressive-web-apps-pwa/

How to Build and Test Your First PWA

  1. Install the Chrome extension Web Server For Chrome
  2. Get an appropriate icon that does not break copyrights.
  3. Use the favicon generator to create the zip file of appropriately sized icons, the manifest.json, and html link elements.
  4. Add extra info to the manifest.
    {
     "name": "My PWA Test",
     "short_name": "PWA Test",
     "lang": "en-US",
     "start_url": "/",
     "background_color": "#2C3E50",
     "theme_color": "#18BC9C",
     "display": "standalone",
     "icons": 
        ...
     
    }
                          
  5. Generate a service worker.
  6. Add service worker code to all of your html pages.
PWA Course From Google
PWA Course for Beginners (uses Materialize and Visual Studio, but applicable)
  1. Examine the Service Worker code from the previous exercise.
  2. Learn to see what service workers have cached (Application > Cache Storage
  • Create a PWA from the HTML Canvas game you modified earlier in the course.
  • Do this tutorial to create a web app that gets real weather data from Yahoo: Your First Progressive Web App
  • Learn about JS Promises
  • Add to Homescreen Tester
  • Retro Your Webstie As A PWA
  • PWA Ultimate Guide