/Progressive-Web-App

Getting Started with Progressive Web Apps

Primary LanguageHTMLMIT LicenseMIT

PWA basic concepts

Live link

Simple guide to creating quick Progressive web apps.

Normal website to Native mobile features

  • install on homepage
  • access app offline
  • push notifications

PWA vs Native

Native

  • Made with device specific SDK
  • publish on store then installed
  • runs on device and has access to device features
  • used offline and has notifications

PWA

  • uses Web tech
  • accessed via web
  • can be installed
  • used offline and push notification

As webAPP (manifest, HTML, css ....)

  • Basic project template set up

Step 1 L Web App manifest

  • Json file with info for browser on how to display the app on phone
  • Root of the project
  • manifest.json
  • Json file
    • short_name -> used for icon name on device.
    • display:standalone -> not like browser
    • background_color -> when first loading app
    • orientation -> portrait-primary
    • inco-> add array of icon
  • Link json in all html files <link rel="manifest" href="/manifest.json">

Android Emulator

  • android studio
  • go to pc loclhoset address 10.0.2.2:portn

iphone os

  • icon not suported
  • insert link in html
<link rel="apple-touch-icon" href="img/icons/88.png">
<link rel="apple-touch-icon" href="img/icons/256.png">
<!-- and so on-->
  • For status bar <meta name="apple-mobile-web-app-status-bar" content="#aa7700">

As progressive webAPP (service worker)

  • Load content offline without internet
  • sync data upon connection
  • push notification
  • Runs on a diffrent thread irrespective of html page (has not acess to DOM)
  • background process
  • listens for event in background to reposed accordingly

service worker life Cycle

  • project we create sw.js giving it global scope
  • first register it on browser with app.js or main js
  • upon registration its put on separate sw thread
  • fires installs event (we can do multiple manipulations here)
  • fires active event (sw now listens for events)
  • upon refresh does nothing unless sw code changes
  • new sw active event gets strted only when app tab/browser with old SW are closed

Registering service worker

  • created in root dir sw.js for global access

regitering sw using app.js

  • look for browser support
  • returns promise
// Service worker registration 
if ('serviceWorker' in navigator){
    navigator.serviceWorker.register('sw.js').then((reg)=>{
        console.log("service worker registered ", reg)
    }).catch((error)=> console.log("Could not register worker", error));
  } else console.log("SW not supported");

Install event

  • while sw is being installed 'install event' is triggred
  • we lsiten for this on sw.js
  • Install event wont be triggred again unless sw.js file has changes
  • we could use this to add assets for offline mode (css, js and so on)
  • Keep devtools -> update on reload checked

Fetch Events

  • save a trip to server on fetch
  • look for items in cashe and try to work offline when possible

Offline behavior

  • load content offline using cashe api
  • storing assets locally
  • disable browser cashed and we store cashe using sw
  • sw store assets from server in cashe
  • if we go offline sw looks up cashe Resourses we need to cashe
  • App shell assets that dont change over time
  • We do it inside install event handler
  self.addEventListener('install', (evt) =>{
    // console.log('Install Triggered', evt);
    evt.waitUntil(
        caches.open(staticCacheName).then((cache)=>{
            console.warn('adding assets');
            cache.addAll(assets);
            console.warn('Done assets');
        });

    );
    

});

intercepting request to use cache Offline

  • check chashe for fetch request insted of server

  • fetch event listner we can intercept here

  • on fetch check if resource exists in cache

self.addEventListener('fetch', (evt)=> {
//console.log(evt);
    
evt.respondWith(caches.match(evt.request).then( response => {
    return response || fetch(evt.request);
}

))

cache versioning

  • delete previous caches
  • update new cache based on version currently
  • in activate so new cache is worked on before fetch

Caching approch

  • wait for user to browse pages to cache
  • casche response form server into dynamic assets
  • if the page has been cached brose it if not add to dynamic

What if user visits the page while offline

  • get a 404 for offline page
  • Show a fallback page when offline.
  • Create a fallback page.
  • store it in static cache
  • make sure to only display it if the request is resourcing a page. not image or css or something.

Limit cache to numbe of items

  • cache size limit function.

DATA in PWA

  • acessing DATA in PWA
  • google firebase
  • create project -> database
  • new collection -> documents -> title and recipes