Islam AlZatary
Share

This is a summary of PWA Roadshow video from Google Chrome developers, here is list of each video with summary:


  1. All about PWAs.

    Statistics (2017):
    13% Mobile. => 87% Apps native.
    but 87%???

    • more predictable.
    • easy to find on home screen.
    • push notification.

    Native app is a big commitment in:

    • Space
    • Time
    • Cost

    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

    PWA Features

    1. Fast.
    2. Integrated.
    3. Reliable.
    4. Engaging.

    Push Notification

    • Work on mobile browsers (almost).
    • Work until if browser off.
    • Combines the best of the modern web & native features.

    Example:
    Twitter lite.
    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):
    Android: 24mb
    IOS: 214mb
    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).

  2. Integrated experience.

    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.

  3. Reliable experience.

    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.

    Implementation:

    • Register (check if sw work & register).
    • Install event (after downed & parsed).
    • activated

    Workboxjs.org is collection of libraries to develop PWA.

  4. Engaging.

    Push notification:

    • 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

    • Timly.
    • Precise.
    • Relevant.

    How its work.

    1. subscribe (permission).
    2. push api for subscription.
    3. send to server.
    4. create message on server.
    5. use web push protocol (http)
    6. push service delivers message.
    7. 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.

  5. Secure experience.

    Must use https

    Secure mean:

    • Identity.
    • Confidentiality.
    • Integrity

    Apis that request https:

    • Seervice worker.
    • getUserMedia.
    • Push Notification.
    • app cache.
    • Encrypted Media Extensions.
    • geolcation
    • Http/2

  6. Tools.

    Lighthouse:

    • PWA
    • Performance
    • Accessibility
    • Best practise.

 

Leave a Comment