Skip to content

Latest commit

 

History

History
48 lines (36 loc) · 1.69 KB

README.md

File metadata and controls

48 lines (36 loc) · 1.69 KB
Raw

Tutorial: Get started with Progressive Web Apps

Set up dev environment

  • install Visual Studio Code
  • install node brew install node
  • clone the repo MySamplePWA
  • run the web server locally:
    • npx http-server

How to debug Service Worker

Safari

  1. Open the Service Worker Inspector window: Safari->Develop->Service Worker
  2. Print out what's in the cache in Console of Inspector Window
caches.open('cache-name').then(cache => {
     cache.keys()
     .then(requests => console.log(requests));
});

  1. Go to the Web Inspector -> Network tab. After refreshing the page, Transfer Size column shows whether a file is loaded by Service Worker or the cache.

  2. Test Offline: Ctrl+C to kill the web server. Fill the form again see the calculated value. However, refresh the page will show connection issue. Need to add a graceful warning message - Cannot connect server, thus don't clean the cache.

  3. Test with cache cleared then run the cache logging code in 2. again

caches.open('cache-name')
  .then(cache => {
    cache.keys()
       .then(keys => {
             keys.forEach((request, index, array) => {
                 cache.delete(request)
        })
    })
  })

See details in Debugging Service Workers in Safari

Microsoft Edge

See Tutorial: Get started with Progressive Web Apps

Google Chrome

Install LightHouse extension. Then perform the web load analysis in Inspection windown (Cmd + Option + I)