progressive web apps for beginners -...
Post on 20-May-2020
23 Views
Preview:
TRANSCRIPT
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Before starting
13% Mobile web
87% AppsSource: comScore Mobile Metrix, U.S., Age 18+, June 2015
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Before starting
Progressive Web Apps!!!
Progressive Web Apps
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They're reliable, fast, and engaging.
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Progressive Web Apps
A Progressive Web App is• Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
• Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
Progressive Web Apps
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
• App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model.
Progressive Web Apps
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• Fresh - Always up-to-date thanks to the service worker update process.
• Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
• Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
Progressive Web Apps
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• Re-engageable - Makes re-engagement easy through features like push notifications.
• Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store.
• Linkable - Easily share via URL, does not require complex installation.
Progressive Web Apps
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• Baseline Progressive Web App Checklist• Exemplary Progressive Web App Checklist
Baseline Checklist
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• Site is served over HTTPS• Pages are responsive on tablets & mobile devices• All app URLs load while offline• Metadata provided for Add to Home screen• First load fast even on 3G• Site works cross-browser• Page transitions don't feel like they block on the network
• Each page has a URL
Exemplary Checklist
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• Site's content is indexed by Google• Schema.org metadata is provided where appropriate• Social metadata is provided where appropriate• Canonical URLs are provided when necessary• Pages use the History API• Content doesn't jump as the page loads• Pressing back from a detail page retains scroll position on the previous list page
Exemplary Checklist
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• When tapped, inputs aren't obscured by the on screen keyboard
• Content is easily shareable from standalone or full screen mode
• Site is responsive across phone, tablet and desktop screen sizes
• Any app install prompts are not used excessively• The Add to Home Screen prompt is intercepted
Exemplary Checklist
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• First load very fast even on 3G• Site uses cache-first networking• Site appropriately informs the user when they're offline• Provide context to the user about how notifications will be used
• UI encouraging users to turn on Push Notifications must not be overly aggressive.
• Site dims the screen when permission request is showing
Exemplary Checklist
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• Push notifications must be timely, precise and relevant• Provides controls to enable and disable notifications• User is logged in across devices via Credential Management API
• User can pay easily via native UI from Payment Request API
Checklist
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
https://developers.google.com/web/progressive-web-apps/checklist
Url checklist
Lighthouse
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
The Washington Post
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
https://wapo.com/pwa
The Washington Post
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Add to Home Screen
The Washington Post
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Add to Home Screen
The Washington Post
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Splash Screen
The Washington Post
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Launch it!
The Washington Post
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Task Manager
AliExpress
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
2x more page views
Service Worker
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
What is a service worker?
A service worker is a type of web worker. It's essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.
Because workers run separately from the main thread, service workers are independent of the application they are associated with.
Service Worker
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
What a service worker can do?
• Improve performance of your application/site • Make your app “offline-first" • Act as the base for advanced features (Notification API, Push
API, Backround Sync API, Channel Messaging API)
https://developers.google.com/web/ilt/pwa/introduction-to-service-worker
Final Considerations
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• Instant Loading • Add to Home Screen • Push Notifications • Fast • Secure • Responsive
Final Considerations
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Code, code and code!
References
+PietroAlbertoRossi
@sprik89
Pietro Alberto Rossi
Pietro Alberto Rossi
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
Resources
@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi
• Washington Post PWA - https://wapo.com/pwa • SSLMate - https://sslmate.com • Let’s Encrypt - https://letsencrypt.org/ • Manifest Generator - https://brucelawson.github.io/manifest/ • Manifest Validator - https://manifest-validator.appspot.com/ • Favicon Generator - http://realfavicongenerator.net/ • Code labs - https://codelabs.developers.google.com/pwa-roadshow
top related