Tutorial: Get started with Progressive Web Apps
- install Visual Studio Code
- install node
brew install node
- clone the repo MySamplePWA
- run the web server locally:
npx http-server
- Open the Service Worker Inspector window:
Safari
->Develop
->Service Worker
- 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));
});
-
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.
-
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.
-
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
See Tutorial: Get started with Progressive Web Apps
Install LightHouse extension. Then perform the web load analysis in Inspection windown (Cmd + Option + I)