What benefits come from using Progressive Web Apps (PWA) guidelines? - single-page-application

I was reading about advantages of PWAs, but I really can't understand why we have to use this technology. Is this similar to SPA? Or this is completely something else?

A Single Page Application (SPA) can be a Progressive Web App (PWA) but a PWA doesn't need to be a SPA. They are two different things. A PWA as defined by Google is:
Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.
The Google PWA site is a good place to start learning about PWA and why and how you would build one.
https://developers.google.com/web/progressive-web-apps/
A SPA is simply a web app where a single page is loaded in the browser and all subsequent routing and page view rendering is handled on the client (browser) using JavaScript.
Properly combining the principles of PWA and SPA can result in a much improved user experience especially on mobile phones with unreliable internet connections.
Probably the best example today of a well implemented PWA is Twitter Lite. Check it out here:
https://mobile.twitter.com/home
...and read about it here:
https://blog.twitter.com/en_us/topics/product/2017/introducing-twitter-lite.html

A SPA is something different than a PWA. You can view PWA as an enhancement of your website. By adding a service worker and a manifest you can bring your website (SPA or not) out of the browser, work like a mobile app and make it perform better.

Related

Load Progressive Web App inside iframe

When loaded a PWA (Progressive Web App) inside a iframe, it will work normal (saving Web Workers, offline availability, etc) or some features will be blocked?
I have a PWA that uses an iframe. It uses some pretty advanced features, including a web-worker (in addition to the service worker) that I implemented long before recently porting it over to a PWA. All of those features work the same, with the additional benefit of controlled caching of specified resources. I haven't seen anything in the documentation to suggest otherwise, and can honestly say it works amazing! So fast to load now, it's in the app drawer, etc., even installs and looks like a normal app on desktop. My only issue is the soft-keyboard overlaps in fullscreen, but there is a solution, I've seen it work.
My suggestion-- try it. It's pretty easy to set up. Test your features. I am sure you will be impressed.

Create a Phone Application base on an Asp webApplication

I have to develop a phone application on every platform so I thought of using phonegap. Seems pretty nice.
I have a web application coded in classic Asp and it's this webApplication that I need to strip down to be a phone app.
At first I thought it will be simple, my classic Asp render some html so phonegap is able to put it as an app.
But it's not that simple, because in my asp I have some code that is rendered server side, I've talked to some who tell me that some html could call the asp pages and this html could be used in phonegap. Don't think it's possible ...
Well if someone could help me here, maybe i've said something wrong in my little text don't hesitate to correct me :)
My solution (I think) : code some webServices in asp.net that will use the same database as my asp classic web application. And some html and jquery will call the webservices and those html and jquery will go trough phoneGap
What is the best way to transfer and asp classic web app to a multiplatform phone app ?
EDIT : After looking everywhere, effectively phonegap can't use asp pages. So I'm questionning myself should I do a mobile website or a mobile app with webservices?
EDIT 2: I'm going for an asp.net mobile website, someone have a great way to do this, I've seen the answer proposing mvc... more details?
You are on the correct path in wanting to use PhoneGap to create a multi-platform phone app via HTML5, and some mobile framework like jQuery Mobile.
Yes, you can leverage the power of ASP.NET to serve up your data but I wouldn't create an asmx web service. A SOAP-based service serving up XML may be too fat/overkill for your mobile web app. Instead, you may want to investigate using JSON which is more lightweight (remember, bandwidth is a concern with mobile apps). One can rapidly create an API to serve up your JSON data via the new ASP.NET Web API. With your API exposed, you can make an ajax call from your html page to retrieve the JSON and bind it using jQuery.
The bonus to using the ASP.NET Web API would be when it's time to upgrade that classic ASP web site you have there, you could leverage the API you already created.
I'd really consider rewriting the website using Mvc.Net. You may want to consider using the iUI for the views.
It will be much cheaper long-term to use modern technology than trying to shoe-horn legacy code into new usage areas.
It looks like you've made up your mind to go with a webapp instead of native apps via PhoneGap. I would recommend that you pick up this book by Jonathan Stark. It's very short - shorter than it should be when it gets into using PhoneGap - and although it focuses on iPhone development, much of the content is applicable to most mobile devices. The first few chapters give a great introduction on developing attractive, responsive, highly usable web apps for mobile devices. If you familiarize yourself with jQuery and jQTouch you can get some really great looking apps with relatively little effort, regardless of the server side technology you go with.
So i'm questionning myself should I do a mobile website or a mobile app with webservices ?
The answer to that question is always mobile website... given an outdated website that the client is wanting duplicate functionality in an app.
Do the work to convert the website or at least the portions that you need to use ajax and webservices. Once you have that in place pulling the same data to place in a mobile app will be easy... you've already done it once.
So my approach would be to convert this dataview into two separate elements Data and View.
You can probably even keep the current asp pages without a lot of modification to the code since you can still call these web-service functions the same way as before in your asp code.
Well, if you really want to reuse your existing webpage you can do the following.
Create a index.html and the body.onload event, redirect to your webpage.
Then build this index.html with phonegapbuild, and you will get your "native" application that simply loads your existing webpage.
If you want to serve mobile users, you have 2 main options:
Create a mobile website. You can render html on the server all you want, no javascript programming needed. Maybe look into jQuery mobile, it can be a cheap and easy way to make the website better for mobile users.
Create a html web app (and package it inside PhoneGap if you want). This is basically a html page which loads just the data from the server in json format and updates the page contents dynamically with javascript. You need good js skills to implement this, you're server is just a REST api that server json - technology can be anything, at least asp.net mvc makes it easy. On the client side you'll want to use some good structuring frameworks, backbone.js ( http://documentcloud.github.com/backbone/ ) is a good option. Check out http://m.linkedin.com for an example of what a mobile web app can be.
3rd hidden option: just create a native app for each platform, that'll get you the best user experience.

Is it Possible to create a PhoneGap app from a Wordpress blog?

Is it possible to make a PhoneGap native app from a Wordpress mobile blog?
I understand that PhoneGap allows you to develop HTML5 apps and turn them into native mobile applications.
I'm looking to create a content distribution app somewhat like the ones so many local news services use (WGAL, Channel 69 News), but to be able to list it in the Android Market Place and the AppStore, as well as be able to access it online all with the same content.
Also are there any alternative methods to accomplish this? Are News apps like that available in some sort of a "canned form"
One way is to essentially you make PhoneGap a web browser without an adress bar. I have an iPhone example here. All I did was make javascript redirect upon loading the application, whitelisted my IP (in the case of the example it's local host) and modified the Appdeligate.m with this piece of code from:
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
return [self.viewController webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
to
- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *url = [request URL];
if ([[url scheme] isEqualToString:#"http"] || [[url scheme]isEqualToString:#"https"]) {
return YES;
}
else {
return [ super webView:theWebView shouldStartLoadWithRequest:requestnavigationType:navigationType ];
}
}
and voila, a "native" app, with access to all local resources (storage, camera, etc) built on web frameworks! Weather or not Apple or the others will let something like this in their app store I still have yet to investigate but it sure works well for demonstration purposes or personal apps.
We have just created a similar concept using PhoneGap and Application Craft, but Apple rejected the application, this is the message we received:
We found that the experience your app provides is not sufficiently different from a web browsing experience, as it would be by incorporating native iOS functionality to provide a more robust user experience.
While your app content may differ from your web site or other existing sites, the experience it provides does not differ significantly from the general experience of using Safari, as required by the App Store Review Guidelines.
You may wish to provide convenient access to a web property for a select or niche group of users - and may have enhanced that experience with features such as Push Notifications, Core Location, and/or sharing features. However, these features do not provide a robust enough user experience to be appropriate for the App Store.
If you wish to provide quick access to a web property, you may wish instead to provide instructions to your users on how to create a Safari web clip to add to their iOS device Home Screen. Or, if you would like to share the app with a select group of users, we recommend the Ad Hoc distribution method. See the iOS Provisioning Portal for details on Ad Hoc Distribution.
We encourage you to review your app concept and evaluate whether you can incorporate additional features to enhance the user experience.
If you cannot - or choose not to - revise your app to be in compliance with the App Store Review Guidelines, you may wish to build an HTML5 web app instead. You can distribute web apps directly on your web site; the App Store does not accept or distribute web apps.
HTML5 is the major new version of HTML and enables audio and video to play natively in the browser without requiring proprietary plug-ins. Using HTML5, web apps can look and behave like native iPhone and iPad apps, and using HTML5's Offline Application Cache, a web app can work even when the device is offline. With web apps, you have flexibility to deliver as much or as little functionality as you desire.
To get started with iPhone or iPad web apps, please review Getting Started with iPhone Web Apps.
For a description of the HTML elements and attributes you can use in Safari on iPhone, check out Safari HTML Reference: Introduction.
Unfortunately I can not link this as it was a reply to our application submission and not on one of the help platforms. We have not tried Google Play Store yet but from what I understand they will most likely accept the app, will update when we have tried.

iPhone Phonegap based app load External website made of componentone

My Client wants a native iPhone App that displays their mobile site optimized for iPhone developed using asp.net and ComponentOnes Studio for iPhone. i was planning to use a PhoneGap app which calls an external URL using JavaScript and do it after showing the splash screen. but according to phoneGap FAQ its most likely to apple to reject an app that loads external URL ? just need somebody to clear me on the whole process. isnt it possible to create an app like that ? i've seen various iPhone apps that do this (eg: cydia).
else what care should i take if i'm to develop such an application.
I think you have answered your own question, while it is completly possible to create such an app with Phonegap, Apple isn't going to approve an app that doesn't have functionality when running unconnected (though how much functionality with Apple is never clear). In fact, there have been at least one report on the Phonegap google groups list of app's being rejected because it was just a "web clip", meaning that the app could have just been done as a website, apparently you have to add some functionality, my guess being services exposed by Phonegap, that you wouldn't be able to do on just a website..
And it is more to the point that the app that you chose to use as an example of a "web app", is only available on jailbroken phones.

Designing iPhone applications that use ASP.NET web methods

After getting pretty far along with a jQTouch web application for our website, my boss and I decided we may as well just make a true iPhone app instead of struggling with sloppy flickering animations and login authentication issues. We currently have a fully functional web site with some SOAP web services, but we are looking at rewriting these in order to make it easier for the iPhone to call the web methods (for displaying search results, categories, and article) for our app. I have not started anything on the iPhone yet as I am not sure which direction I should be taking.
For a developer that is somewhat unfamiliar with Objective-C (I understand the basics and the syntax), what tools do you recommend to create an iPhone app that uses data from ASP.NET web methods? If everything I need is provided in the iPhone SDK, where do I start?
If you are looking to use the SOAP methods from your ASP.NET site, then use Sudzc (http://sudzc.com/).
It will generate a package with all the Objective-C source code and classes written for you, to talk to your SOAP web services. You can drop it in your iPhone project and you're good to go.
You can tweak the generated code. Huge time saver :)

Resources