Putting the "Progressive" in Progressive Web App By Lukáš Kopenec, Senior Full-stack Developer
0 likes39 views
The document discusses key elements of Progressive Web Apps (PWAs) including the checklist for implementation, the role of service workers, and manifest files that guide app behavior. It highlights tools like Lighthouse for auditing PWAs and provides resources for further learning. The document emphasizes the importance of offline functionality and efficient service worker management.
Putting the "Progressive" in Progressive Web App By Lukáš Kopenec, Senior Full-stack Developer
- 1. Putting the "Progressive" in Progressive Web App Lukáš Kopenec, Senior Full-stack Developer 1
- 3. PWA Checklist ● Full list at https://developers.google.com/web/progressive-web-apps/checklist ● Basic points ○ Site is served over HTTPS ○ Site is responsive ○ Site has a manifest with metadata ○ Each page has a URL and each URL loads offline (service worker) 3
- 4. Lighthouse ● Part of Chrome developer tools ● Runs a number of audits for different aspects of a web application ● PWA audit 4
- 5. Manifest ● Simple JSON file ● Indicates how the app should look like and behave when installed ● Required for Chrome to show „Add to Home Screen“ prompt ● Basic data include ○ Name ○ Icons ○ Colors ○ Constraints (scope of the app, required orientation, …) ● https://realfavicongenerator.net/ 5
- 6. Service Worker ● JavaScript Web Worker ● Programmable Network Proxy ● Terminated when not in use and restarted when next needed 6
- 7. Service Worker Lifecycle 7 The intent of the lifecycle is to: ● Make offline-first possible ● Allow a new service worker to get itself ready without disrupting the current one. ● Ensure an in-scope page is controlled by the same service worker (or no service worker) throughout. ● Ensure there's only one version of your site running at once.
- 8. Updating Service Worker 8 ● 1 byte difference -> update ● New SW installed alongside the existing ● Installation error -> do not update ● Installed SW waits until the existing controls 0 clients ○ self.skipWaiting ○ clients.claim
- 9. Service Worker – Practical coding 9 ● Service workers are heavily promise-based
- 10. Service Worker – Practical coding 10 Luckily you can use async / await
- 11. Useful Resources ● https://developers.google.com/web/progressive-web-apps/ ● https://developers.google.com/web/tools/workbox/ ● https://developers.google.com/web/fundamentals/codelabs/push-notifications/ ● https://web-push-codelab.glitch.me/ ● https://realfavicongenerator.net/ ● https://meetup-19-05.salsitasoft.com/ ● https://github.com/salsita/salsita-meetup-app 1111