This is a summary of PWA Roadshow video from Google Chrome developers, here is list of each video with summary:
All about PWAs.
13% Mobile. => 87% Apps native.
- more predictable.
- easy to find on home screen.
- push notification.
Native app is a big commitment in:
hints: 78% of time spent is in user’s top three apps.
so, Progressive web app come to solve this issues and try to be like-app
- Work on mobile browsers (almost).
- Work until if browser off.
- Combines the best of the modern web & native features.
the default web experience.
hint: When visit PWA site second time will prompt you to add to home screen.
PWA can added to task luncher.
Twitter Statstics (App size):
PWA: 0.6mb (Woow)
and 75% increase in tweets.
Service worker (SW):
- can cache all resource needed.
- decide when to hit the cache or network.
- must use https (security reason).
Add to home screen.
Web app manifest.
- JSON structure
- Control the home screen like appp name, icons for screens, splash screen, start url, orientation and theme color.
Browse prompted the user to add to home screen.
Chrome check if the user is engaged.
66% of purchases on mobile are on the web.
Autocomplete attribute is able to complete forms 30% faster.
Payment request api (PRA), is a single api call to request payment information, and payment request ui to collect minimal payment data information.
instant lading in offline and stop relying on the network.
60% of mobile connects are 2g.
if browser closed, OS can wakeup a service worker.
inspect network request, rewrite them, get response from network or from the cache.
we have full control over the response.
sw work only on the second request.
- Register (check if sw work & register).
- Install event (after downed & parsed).
Workboxjs.org is collection of libraries to develop PWA.
- Support from all browsers except Safari.
- no need for matters right now!!!
- put it as a good to know.
- keep it personal.
Three words put into your consideration when you deal with Push notofication
How its work.
- subscribe (permission).
- push api for subscription.
- send to server.
- create message on server.
- use web push protocol (http)
- push service delivers message.
- message arrives on device if browser is offline will put into queued until its up.
App server Keys
- Public: used for subscription(client side).
- Private: used to send message.
Must use https
Apis that request https:
- Seervice worker.
- Push Notification.
- app cache.
- Encrypted Media Extensions.
- Best practise.