Más contenido relacionado


Progressive Web App

  1. Progressive Web App (PWA)
  2. “Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience” • Progressive: It works for every user(independent of browser choice ) there by reduced load time to the least possible minimum( i.e. <3sec) • Web App: In terms of look and feel on the choice of device. Will give the experience like an native mobile app since we can add as an icon to home screen. Affordable mobile web app @ no cost( in development / deployment / maintenance ) • A Progressive Web App works in the browser so there is no need for specialized development.PWA’s fit all kinds of tablets, laptops or smartphones due to the use of responsive web design techniques.. • Works in low connectivity even when offline. • PWA saved 88% of time to load the first content and meaningful paint and thus reduced load time less than 3 seconds. • PWAs allow websites to be added to home screens on mobile devices and receive push notifications. • Security is ensured in PWA since HTTPS hoisting. • No need to download/update from app store( some apps are paid ).
  3. HTTPS App Manifest Service Workers
  4. • An app manifest file should describe the resources your app will need. This includes your app’s displayed name, icons, as well as splash screen. If you link to the manifest file in your index.html, browsers will detect that and load the resources for you. • The minimal HTML, CSS, and JavaScript and any other static resources that provide the structure for your page, minus the actual content specific to the page.
  5. { "name": "service-worker", "short_name": "sw-demo", "theme_color": "#1976d2", "background_color": "#fafafa", "display": "standalone", "scope": "/", "start_url": "/", "icons": [ { "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, … ] } 12 • short_name is used on the user's home screen, launcher, or other places where space may be limited • name is used in the app install • theme_color is used on the user's home screen, launcher, or other places where space may be limited•The background_color property is used on the splash screen when the application is first launched.• display property Opens the web app to look and feel like a standalone native app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar, etc. • Browser will automatically scale the icon for the device.
  6. 13
  7. • The worker thread can perform tasks without interfering with the user interface. • In addition, they can perform I/O using XMLHttpRequest (although the responseXML and channel attributes are always null). Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa.) “Web Workers is a simple means for web content to run scripts in background threads”
  8. • We will be demoing them how an application behaves with and without web worker. • Demo URL : https://web-worker- 15
  9. • Service worker could be mentioned in Offline Support, but it really deserves its own section. Service worker provides a programmatic way to cache app resources. Be it JavaScript files or JSON data from a HTTP request. The programmatic API allows developers to decide how to handle caching and provides a much more flexible experience than other options • Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs. “A Service Worker is just a javascript file that runs in the background. A service worker is a type of web worker ”
  10. • We will develop a basic angular app with PWA implemented. • Demo URL: https://sw-demo- 17
  11. 18
  12. BROW SER LIMIT Chrom e <6% of free space Firefox <10% of free space Safari <50MB IE10 <250MB Edge Dependent on volume size
  13. “Cache-First strategy is to check the cache before going to the network. This is great for caching on the fly and optimizing for repetitive asset requests since it only hits the network on ‘fresh’ assets”
  14. “All requests for assets will follow standard pattern of requesting them from the server. Once the server responds with the asset, it will then be cached by the Service Worker. If the request the for assets fails for whatever reason, the Service Worker will check the cache. This is great for assets that always need to be fresh. You may have noticed this strategy will fail if an asset is requested and fails on the first try”
  15. “network requests only with no cache”
  16. “The Cache-Only strategy is a tad confusing. It only allows requests to be served from the cache. The only way this works is if you have another process pre-caching these resources before they are requested by your application”
  17. Traditionally, you’d have to build • Desktop/mobile web + native Android + native iOS You can, right now, in most cases, just build • PWA + native iOS And once iOS Safari implements push notifications, it will be just • PWA
  18. 30
  19. PWA Service Worker HTTPS Responsive 31 Site is served over HTTPS To Test Use Lighthouse to verify Served over HTTPS To Fix Implement HTTPS and check out to get started. Pages are responsive on tablets & mobile devices To Test •Use Lighthouse to verify Yes to all of Design is mobile-friendly , although manually checking can also be helpful. •Check the Mobile Friendly Test To Fix Look at implementing a responsive design, or adaptively serving a viewport-friendly site.
  20. • Progressive - Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet. • Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next. • Connectivity independent - Enhanced with service workers to work offline or on low quality networks. • App-like - Use the app-shell model to provide app-style navigation and interactions. • Fresh - Always up-to-date thanks to the service worker update process.
  21. • Safe - Served via HTTPS to prevent snooping and ensure content has not been tampered with. • Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them. • Re-engageable - Make re-engagement easy through features like push notifications. • Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. • Linkable - Easily share via URL and not require complex installation.
  22. • Lighthouse returns a Performance score between 0 and 100. 0 is the lowest possible score and 100 is the best. • The PWA audits are based on the Baseline PWA Checklist, which lists 14 requirements. • Lighthouse has automated audits for 11 of the 14 requirements. The remaining 3 can only be tested manually. • The color-coding maps to these Performance score ranges: • 0 to 49 (slow): Red • 50 to 89 (average): Orange • 90 to 100 (fast): Green
  23. Before Implementing PWA After Implementing PWA
  24. • We will deploy the developer angular app with PWA implemented (Exercise 2 ). • Create Firebase Account to Deploy Angular Application • Install the Firebase Tools using Firebase CLI • Login and Initialize Firebase project using Firebase CLI • Initialize your Firebase project run below command. • Create Production Build using the AOT / JIT Compilation • Deploying the web app in Firebase server • Testing the hosted app in participants mobile (with / without data) • Step by step guidance : 18f99c9d5722 38
  25. • Cross Browser Support : While Chrome, Opera, and Samsung’s android browser supports PWA, IE, Edge and Safari are yet to extend their support. • Limited Functionality: PWA doesn’t have support for any hardware that is not supported by HTML5 ( • Cross Application Login Support : Native apps have the capability to talk to other apps and authenticate logins (Facebook, Twitter, Google). As a webpage, PWA doesn’t have the capability to communicate with other apps installed. 49
  26. • • • • • • 50
  27. 51 Questions ?

Hinweis der Redaktion

  1. Src:
  2. Src :
  4. Src:
  6. Src:
  10. Src:
  11. Src:
  13. Src :
  14. Src: