Ad
More Related Content
What's hot (20)
Similar to Progressive Web Application by Citytech (20)
Ad
Recently uploaded (16)
![5-Ways-To-Future-Proof-Your-SIEM-Securonix[1].pdf](https://cdn.slidesharecdn.com/ss_thumbnails/5-ways-to-future-proof-your-siem-securonix1-250426114439-c707b6bf-thumbnail.jpg?width=560&fit=bounds)
Ad
Progressive Web Application by Citytech
- 1. A new way to deliver amazing user experiences on the web. A Technical Work Shop presentation by Citytech Software Private Limited To know more about us please visit www.citytechcorp.com
- 2. What is a Progressive Web App? A progressive web app (PWA) delivers an app-like experience through your mobile phone’s browser but has the same flexibility and gestures as a native application. Because they are powered by mobile browsers, they are not particular to any one device, meaning developers no longer need to write separate code for Android and Apple devices.
- 3. Characteristics of Progressive Web App Progressive: Gives an app like experience for the mobile website. Responsive: Design adapts as per device whether desktop, mobile, or tablet. Connectivity independent: Uses the browser service worker technology to work offline or on low-quality networks. App-like: Feels like a mobile app with app-style interactions since it's built on the app shell model. Installable: Allows users to install the website as an app on their home screen without the taking user to an app store.
- 4. Linkable: Easily share via URL, works exactly like normal link tracking on web. Re-engageable: Re-engage users with features like push notifications even when they are not on website. Discoverable: Identifiable as an "application" through manifest and service worker registration scope. So normal search engine discovery rules apply. Safe: Served via HTTPS to ensure content is securely delivered
- 6. What you need to build PWA ? • Node Server (to run node package manager) • Angular with typescript (Data binding, logic and http request) • HTML and CSS (structure and cascading's) • Chrome Browser • Chrome extension Lighthouse • Firebase app
- 7. TypeScript Basic What is TypeScript? TypeScript is a strongly typed, object oriented, compiled language. It was designed by Anders Hejlsberg (designer of C#) at Microsoft. TypeScript is both a language and a set of tools. TypeScript is a typed superset of JavaScript compiled to JavaScript. In other words, TypeScript is JavaScript plus some additional features. Features of TypeScript: TypeScript is just JavaScript. TypeScript supports other JS libraries. JavaScript is TypeScript. TypeScript is portable.
- 8. Lighthouse Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
- 9. PWA Manifest Manifest is a simple JSON file that gives the developer the ability to control how the app should appear to the user in areas where they would expect to see apps (a mobile device’s home screen), direct what the user can launch, and define its appearance at launch. <link rel="manifest" href="/manifest.json">
- 10. Service Workers Service Worker is a script that your browser runs in the background, separate from the web page/web app. It is generally used for features that don’t need a web page or user interaction. Service Workers provide the technical foundation that features like offline experiences, periodic background syncs, and push notifications rely on.
- 11. Example Contents: • Creating an Angular App • Place PWA code in angular app • Creating the Firebase App • Installing the Firebase Tools • Using Firebase In Our Angular App • Deploying • Firebase Hosting Dashboard • Extra: Script to Deploy • Conclusion
- 12. Start progressive web with angular application: Once we have the CLI, we can create a new Angular app and test it out using the following:
- 13. Step 1. First audit. Our app is good to go! Let's start setting up Progressive Web Apps. We need to figure out how is our app going and where our week points take place. And all we have to do is open our Chrome DevTools and go to the Audits tab, where we can find such a powerful tool as Lighthouse— the best diagnostics of web pages. Step 2. Adding the app shell An application shell is the minimal UI that user will see ASAP. The app shell should load really fast to catch user’s eyes and make him wait for the whole content.
- 14. 2.1 Loader The most common example of app shell is loader (or spinner), that is visible for users until app and data is ready. As an example resource, you can go to the codepen.io and search for something like ‘simple css spinner’ and choose whatever you like. Copy markup and styles directly to your index.html file. Css goes to <style> tag (minifying the css code would be helpful), the html of your loader — inside <app-root> element (it will be removed automatically when angular app will be ready to work). <app-root> <div id="spinner"></div> </app-root> 2.2 Header To avoid an abrupt jumps in view, we can add some fake header-template. <app-root> <nav style="background-color: #673ab7; height: 56px; width: 100%"> </nav> <div id="loading"></div> </app-root>
- 15. 2.3 JS Fallback Some of the Lighthouse warning says, that we didn’t provide any content, if scripts are not available. To deal with it, we can use the html tag <noscript>. For example: <noscript> <h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;"> Sorry, but app is not available without javascript </h3> </noscript> Step 3. Adding the manifest we can see from the audit results, 3 red warnings tell us that we need something called “manifest”. The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience. There are a lot of examples of how manifest should look like, but the core info should include app name, short description, urls to icons for different devices, name of start file and theme color. For our test, I created the following:
- 17. Create manifest.json under the src folder and copy/paste the code above. Open the .angular-cli.json file and add manifest to assets section: As you can see from the config, we need to include icons of different sizes to our project. For our studying process, just google for it — choose any you like. (Hint: go to the Google search result Image tab, find Tools button, and on the slided down toolbar open the size menu. Choose exact size to clarify the search request). Download images and move them to our assets folder. Go to the index.html file, add the following tags to head section:
- 18. Step 4. Service Worker The last one. We are at the finish line. The last 3 fails we have are related to absense of something called Service Worker. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. npm install @angular/service-worker --save
- 20. Add line /package.json Then Run below the command Ng pwa
- 21. Creating the Firebase App We'll need to create a Firebase account and a Firebase app so that our application knows where to deploy to. Once you login to your Firebase console, create a new app.
- 22. We'll name our app Angular Hosting Test. You can also set the subdomain for your app. Your app will be hosted at subdomain.firebase-app.com.
- 23. Our new app is live! That's all we had to do in the Firebase dashboard. The rest of the work will be done on our own computer in our applications. Installing the Firebase Tools Please run below the command one after one. npm install -g firebase-tools firebase login This will open your browser and allow us to login from there.
- 24. That's it! We're all ready to start using the Firebase tools.
- 25. Using Firebase In Our Angular App The first step is to link our local Angular app to our Firebase app we created in the Firebase dashboard. Here's the answers to the questions Firebase tools will ask: Are you ready to proceed? Yes Which Firebase CLI features? Hosting (In the future, use whatever you need! Press space to select.) Select a default Firebase project? Angular Hosting Test (Choose whatever app you created in the earlier steps) What do you want to use as your public directory? dist (This is important! Angular creates the dist folder.) Configure as a single-page app? Yes
- 26. App Deploy to Firebase Now that we have the dist/ folder, we can tell Firebase to deploy it: Now run below the comment to push code firebase deploy
- 27. Our app is now deployed and ready to view! Run this Firebase command to see it in action: Last and final command to open site in browser firebase open hosting:site
- 28. Thank you A Technical Work Shop presentation by Citytech Software Private Limited To know more about us please visit www.citytechcorp.com