progressive-web-apps

PWA with multiple pages

我是研究僧i 提交于 2020-01-13 10:07:12
问题 I'm creating a PWA for my website. It was a multiple page website built using jquery. Now I have created an app shell which consists of a common header for the site. My site has good SEO ranking and ranks in top 3 links usually. Now when I want to go from page A to page B and I want the header to be preloaded and a loader gets displayed until the data for page B is received from the server. I am still using jquery as most of the modules are already built in that and I don't want to rebuild

How to deploy a different version of index.html for PWA and native Apps with Ionic 2

自作多情 提交于 2020-01-05 08:51:45
问题 our PWA lives here: https://m.quemesa.com and we also have native apps with the same codebase. However, we are not targeting the Cordova Browser platform (because it does not seem to be officially supported and I can’t see what benefit it adds) so we have to add slightly different code for our PWA compared to our native app builds. For example, In the PWA, we use the pure Google Analytics solution which requires 2 lines of javascript in the index.html. For our native builds, we use the

Workbox will not load

不羁岁月 提交于 2020-01-05 04:11:12
问题 I'm trying to use Workbox to add PWA functionality to my website. I'm following the Get Started guide, but I'm not getting far. When I run the website in Chrome I get the following error: Refused to load the script 'https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Per the docs, I am importing workbox-sw.js in my service worker file that is in my wwwroot folder with

Linking a progressive web app to a beacon to trigger a event

萝らか妹 提交于 2020-01-04 17:46:12
问题 I'am trying to make a progressive web app where I will use beacons to transmit the eddystone URL. As soon as the phones catch the Eddystone URL and click on the notification(using physical web) it will open the Progressive web app. My question is that is there a way to integrate the web app with beacons such that when the phone comes in the range of a certain beacon, it triggers an event specific to that. For eg: if i go in a park and there is a beacon on a bench, the PWA should know be aware

302 redirects do not work in a service worker built with Google Workbox

被刻印的时光 ゝ 提交于 2020-01-04 05:45:08
问题 For having the "add tome homescreen" alert displayed, I want to integrate a service-worker and an offline capability of the application: When the user is offline, the app should simply display a special offline HTML file. My service-worker looks like this: importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js'); const CACHE_VERSION = 1; workbox.core.setCacheNameDetails({ prefix: 'app', suffix: 'v' + CACHE_VERSION }); workbox.routing.registerRoute( '/offline

PWA loses its params and query params after being added to the home screen

空扰寡人 提交于 2020-01-04 03:51:43
问题 I have created a PWA(Progressive Web App) using Angular6. It works perfectly as expected in the browser. My scenario is to handle all the app data based on the params I get from URL eg: https://<my-site.com>/app/abc123 where abc123 is my param which I need to add to the home screen app. So the problem is when user adds the app to the home screen it loses all the params (I have tried using queryparams as well) and that leaves me only with the hostname. I need the whole URL to be added as the

Ionic PWA get version number from config.xml

不问归期 提交于 2020-01-03 17:03:07
问题 I want to show the version number from config.xml in an Ionic PWA. It is easy to get it done for ios/android builds using ionic native app version plugin. But what is a good approach for a PWA build (npm run build --release --prod)? 回答1: Ok, so if cordova-plugin-app-version is not available on PWA, an alternative way to access to config.xml file is using a grunt task that copy the version to your templates (As you know, on Ionic the config.xml file is not placed on a "servable" location, so

Localising a PWA web manifest

陌路散爱 提交于 2020-01-03 05:42:08
问题 Is there a way in which a web manifest can be localised? i.e. having multiple translations of name , description etc... I have thought of a couple of potential solutions but they each have pretty big drawbacks... Potential Solution 1 (preferred but not sure if it will work) Dependant on the locale in the url ( example.com/en/foo ), load the relative manifest. For example: For example.com/en/foo , load example.com/en/manifest.json For example.com/jp/foo , load example.com/jp/manifest.json

Facebook JS SDK Progressive web app issue

删除回忆录丶 提交于 2020-01-01 09:32:21
问题 I have a Progressive Web App built with Angular 4. My Problem is the Fb login dialog does not close automatically when used from the home screen app. It works perfectly fine when opened in chrome browser but when i use it from installed home screen app the dialog window opens asks for permissions, after all permission is given the dialog goes blank and does not close or redirects back to the app. It seems like if i change the "display" in manifest.json to "browser" it works but does not work

Can I use Add to home screen in Chrome on an iOS device?

点点圈 提交于 2020-01-01 07:29:17
问题 I know I can use Chrome on a desktop or Android device to “Add to Home screen”. I know I can use “Add to homes screen” in Safari iOS. But, can I use “Add to home screen” feature in Chrome for iOS? Thanks, Wayne 回答1: No. There is no such option in Chrome for iOS. I'm using iOS 12 on iPhone X with latest Chrome and I don't see such option. Safari for iOS have "Add to home screen" for a long time now. Its just the "Service worker" support that came recently in 11.3 version . Notably, Chrome for