| title | tags | slideOptions | ||||||
|---|---|---|---|---|---|---|---|---|
PWA |
PWA, Angular, ngBeer |
|
by Vojtech Mašek Head dev @FlowUp github.com/vmasek
Reliable load instantly and never show the downasaur, even in uncertain network conditions
Fast respond quickly, 53% of users will abandon a site if it takes longer than few seconds to load
Engaging feel like a native app
This is what earns them a place on the user's home screen
Google Developers - Progressive Web Apps
- script that browser runs in the background, separate from a web page
- written in JavaScript like a client-side proxy
- puts you in control of the cache and how to respond to resource requests
- allows pre-caching key resources
- helps eliminate the dependence on the network
- provides instant and reliable experience
Service Workers: an Introduction
- Immediacy - instantly available
- Find ability - can be found easily
- Reach - users visit hunderds of sites per month
- Compatibility - across multiple devices *
- Linkable - share via URL, does not require complex installation
- SEO - contents can be indexed by search engines
- Low friction - you need just a browser
- browser support
- HTTPS
- responsive app
- optimized app
- service workers can do pretty magical things on the browser side, but it cannot solve the problems within the app implementation
- Chrome
- Firefox
- Opera
- Microsoft Edge (In development) *
- Safari (In development) *
* supported in development preview is Service Worker ready info site
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page. It has audits for performance, accessibility, progressive web apps, and more.
- full Service worker support
- easy integration
- generated for a new project
ng new my-project --service-worker - step by step guide for existing projects
- generated for a new project
Best way to start with service workers in your project is with this guide
angular.io/guide/service-worker-getstart
Example Angular project FeedGist
- sw-precache
- generates a service worker that precaches resources
- integrates with build process
- hash of each file
- sw-toolbox and runtime caching
- common caching strategies for dynamic content (APIs)
- helps generate app shell
- Offline Caching
- Offline Analytics
- collects analytics while offline and send them to Google Analytics when online
- broadcast cache update
- cache expiration
- routing
- runtime caching
Twitter Aliexpress Forbes Pinterest Washington Post Dev.to Wiki offline ...and many more to come
| First paint | Interactive | |
|---|---|---|
| Old site | 4.2s | 23s |
| New site (PWA) | 1.8s | 5.6s |
| Repeated loads (PWA) | 0.6s | 3.9s |
A Pinterest PWA pperformance case study
| platform | size |
|---|---|
| Android | 9.6 MB |
| iOS | 56 MB |
| PWA | 150 Kb |
PWA loads routes on demand and the cost of additional code is amortized over the lifetime of the application. Subsequent navigations still don’t cost as much data as the download of the app.
Service Workers: an Introduction
Google Developers - Progressive Web Apps
Angular service worker creating automatic PWAs
Angular PWA With 100 Lighthouse Score
What is PWA and why should you care?